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.

Answer 1

[ 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).