replace() with RegExp on array elements

Question

I want to write a JavaScript function which converts some simple BBcode Tags like [red] [/red] to Html-Tags. I think the replace() function is the best way to do it. I wrote a simple testfunction to try it, but it does not seem to work.

/**
* @function
* @description Replaces the bb-tags with html-tags
*/
function bbToHtml(form) {
    debugger

    var text = form.text.value;
    bbTags = new Array("[red]", "[yellow]", "[green]", "[/red]", "[/yellow]", "[/green]");
    htmlTags = new Array("<font color='red'>", "<font color='yellow'>", "<font color='green'>", "</font>", "<font>", "</font>");

    for (var i = 0; i < bbTags.length; i++) {
        var re = new RegExp(bbTags[i], "g");
        text = text.replace(re, htmlTags[i]);
    }

    alert(text);
}

It should convert "[red]hello[/red]" to "<font color='red'>hello</font>", but it just gives me a weird string.

What is wrong? I think this has something to do with my regular expression.

Can you put your "It should convert"... in a code block - I think there are some html constructs there that don't show up in the question. Also, can you show what the "weird string" is? — Floris, Jan 31 '13 at 22:34
Its something like that, but longer: t>t>t ct>t>t><t>ft>t>=\ — RandomUser123, Jan 31 '13 at 22:41

score 2 · Accepted Answer · edited May 23 '17 at 10:29

[ and ] have special meaning in regular expressions and need to be escaped, moreover you do not need regular expressions the way you've written your code and can just do:

function bbToHtml(form) {
    debugger

    var text = form.text.value;
    bbTags = new Array("[red]", "[yellow]", "[green]", "[/red]", "[/yellow]", "[/green]");
    htmlTags = new Array("<font color='red'>", "<font color='yellow'>", "<font color='green'>", "</font>", "<font>", "</font>");

    for (var i = 0; i < bbTags.length; i++) {
        while(text.indexOf(bbTags[i])!==-1){
            text = text.replace(bbTags[i], htmlTags[i]);
        }
    }

    alert(text);
}

Just to let you know, you can use array literals so instead of arrays. new Array(comma seperated values) is identical to [comma seperated values] in javascript. Also, you can use your array like a map in your case, for example:

var bbTagsToHTML = {}
bbTagsToHtml["[red]"] = "<font color='red'>"

and iterate through that.

If you would like you can escape your regular expressions too, please see How do you use a variable in a regular expression? for a function that does that.

You can also do that manually. "[red]" becomes "\[red\]" (the bracket escaped).

If you don't use a regexp, it will only replace the first match, not all the matches. — Barmar, May 27 '21 at 22:55

score 0 · Answer 2 · answered Jan 31 '13 at 22:34

0

just change this line

text = text.replace(re, htmlTags[i]);

into

text = text.replace(bbTags[i], htmlTags[i]);

removing unuseful code.

replace works also on 'normal' (not regex) values as argument.

answered Jan 31 '13 at 22:34

Daniele B

3,117
2
23
46

But it only replaces the first match, not all matches. – Barmar May 27 '21 at 22:56

score 0 · Answer 3 · answered Jan 31 '13 at 22:41

If you want to do it with regex you can simplify a lot. No arrays or loops:

var str = '[red]foo[/red] hello world [blue]hey[/blue]',
    re = /\[(\w+)\](.*)\[\/\1\]/g;

str = str.replace(re, '<font color="$1">$2</font>');

console.log(str);
//^ <font color="red">foo</font> hello world <font color="blue">hey</font>

Also, as a side note, font is rarely used anymore I'd suggest you use a span with a class.

replace() with RegExp on array elements

3 Answers3

Linked