Trying to parse bbcode out of a string and I'm running into trouble when I have nested tags

Question

This

[b]this text is bold[/b]
[i]this text is [b]italic[/b][/i]

parse out to this (in html)

<b>this text is bold[/b]<br><i>this text is [b]italic</i></b>

this text is bold[/b]
this text is [b]italic

using this function

function bbcode(input){
return input
.replace(/\[b\]([^]*)\[\/b\]/ig, '<b>$1</b>')
.replace(/\[i\]([^]*)\[\/i\]/ig, '<i>$1</i>');
}

I figure there has to be a problem with the regular expression finding each set of tags, but it appears that only the first bold tag and the last bold end tag are being parsed. Any idea how this can be fixed?

Nested logic in regex is hard, specially in JS since it doesn't support recursion. — elclanrs
– elclanrs, Commented Jun 5, 2013 at 2:23
What are you expecting [^]* to capture? Unless I'm mistaken, it's exclusion is applying to nothing, so it's essentially the same as .*. You'll most likely want to make that clause non-greedy, by adding a ? to make it [^]*?. Or, you may wish to actually exclude characters. — FThompson
– FThompson, Commented Jun 5, 2013 at 2:25
Why not just replace [b] with <b>, [/b] with </b> and so on? Also, [^] has to be the most creative way to write . I've ever seen. — Patashu
– Patashu, Commented Jun 5, 2013 at 2:27
@Patashu Replacing each individual start/end will cause issues in the (rare) case that someone writes a start without an end, or vice versa. — FThompson
– FThompson, Commented Jun 5, 2013 at 2:29
I came to [^] as I was working off examples and regex syntax is difficult to get a hold of. Once I got something that worked I stopped fussing with it. — user1755043
– user1755043, Commented Jun 5, 2013 at 2:32

Antony · Accepted Answer · 2013-06-05 04:17:34Z

1

function bbcode(input){
    var b = /\[b\]([^[]*(?:\[(?!b\]|\/b\])[^[]*)*)\[\/b\]/ig;
    var i = /\[i\]([^[]*(?:\[(?!i\]|\/i\])[^[]*)*)\[\/i\]/ig;
    while (input.search(b) !== -1) {
        input = input.replace(b,'<b>$1</b>');
    }
    while (input.search(i) !== -1) {
        input = input.replace(i,'<i>$1</i>');
    }
    return input.replace(/\n/ig, '<br>');
}

BBCode:

[b]x[b]y[/b]z[/b]
[b]this text is bold[/b]
[i]this text is [b]italic[/b][/i]

Usage:

var string = '[b]x[b]y[/b]z[/b]\n[b]this text is bold[/b]\n[i]this text is [b]italic[/b][/i]';
console.log(bbcode(string));

Output:

<b>x<b>y</b>z</b><br><b>this text is bold</b><br><i>this text is <b>italic</b></i>

See DEMO.

edited Jun 5, 2013 at 4:17

answered Jun 5, 2013 at 2:26

Antony

15.2k10 gold badges48 silver badges76 bronze badges

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

3 Comments

Patashu Over a year ago

Does this work correctly if you have something like [b]x[b]y[/b]z[/b] with nested tags of the same type?

FThompson Over a year ago

@Patashu It does not, but I believe that level of parsing goes beyond the scope of the question, so I'll be giving this answer my vote.

nhahtdh Over a year ago

It is important to note that this will only work for limited number of nesting levels.

Collectives™ on Stack Overflow

Trying to parse bbcode out of a string and I'm running into trouble when I have nested tags

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related