HTML editor

[ivan3510]

Hi!
Sorry for my bad english!
I want to make HTML editor (editor with tags, like this on daniweb) with tables.
Here's the problem:
If user writes [TABLE], I made that this replace with <table>. If the user write, eg. [TABLE:BORDER=1;WIDTH:300;], it will change this to <table border=1 width=300>
Here's code how I made this:

string.replace(/\[TABLE:(BORDER=(\d)+;)*(WIDTH=(\d)+;)*\]/g,"<table border=$2 width=$4>")

But what if the user write it with inversion?
eg. [TABLE:WIDTH=300;BORDER:1].
The code, that I wrote, doesn't work.
How to do that?
ps. The width of table also didn't work.

[hielo]

But what if the user write it with inversion?

You would need to write ANOTHER expression that would try to do a match based on the reverse order. Basically execute back-to-back replace() operations:

function tables(str){
	var t={};
	t["<table border='$2' width='$4'>"]=/\[table(:|\s+)border=(.+?)(\s+|;)width=(.+?)\]/ig;
	t["<table width='$2' border='$4'>"]=/\[table(:|\s+)width=(.+?)(\s+|;)border=(.+?)\]/ig;
	t["<table border='$2'>"]=/\[table(:|\s+)border=(.+?)\]/ig;
	t["<table width='$2'>"]=/\[table(:|\s+)width=(.+?)\]/ig;
	t["<table>"]=/\[table\]/ig;

	for( var k in t)
	{
		str=str.replace(t[k],k)
	}	
return str;
}

var str="";
str+="[table:border=10;width=300]\n"
str+="[table]\n"
str+="[table:width=500]\n"
str+="[table:border=30]\n"
str+="[table:width=300;border=20]\n"
alert( tables(str) )

[ivan3510]

This is too long. What will be if I add more option, eg. background color, font color, border color...
Then the code will be very, very long.
Is there any shorter code that will do the same thing?
(PS. What is the name of t={}, what {} means?
I search for it on internet befor one month and I didn't find the name of it. Can you write it? Thank you very much!)

[hielo]

This is too long

In that case then instead of trying to support some SPECIFIC individual properties, then expect CSS rules. In other words instead of: [table:border=2] (which by the way, does not allow you to specify units such as percentages, em, etc.)

you would write: [table border:2px] For ANY other css rule: [table border:2px;background-color:yellow;color:red] then you would just need one regex:
to convert it to: <table style="border:2px;background-color:yellow;color:red"> which in my opinion offers more styling options to your table. The expression you would need is: str.replace(/\[table\s*(.*?)\]/ig,'<table style="$1">');

(PS. What is the name of t={}, what {} means?

that is shorthand for var t= new Object() . There I am just initializing a variable that holds different rules which I then try to match against your input string. So, if you want to support only specific properties, you will need that "long" approach. But if you want to support ANY css rule, the the expression I showed you above will suffice.

[hielo]

if you really want just the border and width try:

str.replace(/\[table((\s+(border|width)=(\d+)){0,2})\]/ig,'<table$1>')

[ivan3510]

Thank you!
But!!!!
I speak croatian, so I make that in croatian. In croatian this look like this:
[TABLICA RUB=3 SIRINA=300]...[/TABLICA]
("rub" replace with "border", "sirina" replace with "width", "tablica" replace with "table")
How to do that?