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.

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.

• javascript
• regex
• replace

Share Improve this question Follow edited Feb 22, 2017 at 17:09 TylerH 21.1k7979 gold badges7979 silver badges114114 bronze badges asked Jan 31, 2013 at 22:30 RandomUser123RandomUser123 4511 gold badge22 silver badges55 bronze badges 4

• 1 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 Commented Jan 31, 2013 at 22:34
• Yeah, what's the weird string? – Felix Kling Commented Jan 31, 2013 at 22:36
• Its something like that, but longer: <f<f<fo</font>t><f<fo</font>t></font>t c<fo</font>t><fo</font>t><fo</font>t><<fo</font>t>f<fo</font>t></font>t>=\ – RandomUser123 Commented Jan 31, 2013 at 22:41
• Shouldn't the second "<font>" be "</font>"? – Barmar Commented May 27, 2021 at 22:56

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

[ 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(ma seperated values) is identical to [ma 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]" bees "\[red\]" (the bracket escaped).

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.

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.