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 "hello", 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
– Floris, Commented Jan 31, 2013 at 22:34
Its something like that, but longer: <f<f<fot><f<fot>t c<fot><fot><fot><<fot>f<fot>t>=\ — RandomUser123
– RandomUser123, Commented Jan 31, 2013 at 22:41

Community · Accepted Answer · 2017-05-23 10:29:44Z

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

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Jan 31, 2013 at 22:32

Benjamin Gruenbaum

278k90 gold badges524 silver badges524 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Barmar Over a year ago

If you don't use a regexp, it will only replace the first match, not all the matches.

Daniele B · Accepted Answer · 2013-01-31 22:34:34Z

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, 2013 at 22:34

Daniele B

3,1352 gold badges26 silver badges46 bronze badges

1 Comment

Barmar Over a year ago

But it only replaces the first match, not all matches.

elclanrs · Accepted Answer · 2013-01-31 22:41:02Z

0

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.

answered Jan 31, 2013 at 22:41

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Collectives™ on Stack Overflow

replace() with RegExp on array elements

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related