We want to make this open-source project available for people all around the world.

Help to translate the content of this tutorial to your language!

back to the lesson

Find bbtag pairs

A “bb-tag” looks like [tag]...[/tag], where tag is one of: b, url or quote.

For instance:

[b]text[/b] [url]http://google.com[/url]

BB-tags can be nested. But a tag can’t be nested into itself, for instance:

Normal: [url] [b]http://google.com[/b] [/url] [quote] [b]text[/b] [/quote] Can't happen: [b][b]text[/b][/b]

Tags can contain line breaks, that’s normal:

[quote] [b]text[/b] [/quote]

Create a regexp to find all BB-tags with their contents.

For instance:

let regexp = /your regexp/flags; let str = "..[url]http://google.com[/url].."; alert( str.match(regexp) ); // [url]http://google.com[/url]

If tags are nested, then we need the outer tag (if we want we can continue the search in its content):

let regexp = /your regexp/flags; let str = "..[url][b]http://google.com[/b][/url].."; alert( str.match(regexp) ); // [url][b]http://google.com[/b][/url]

Opening tag is \[(b|url|quote)].

Then to find everything till the closing tag – let’s use the pattern .*? with flag s to match any character including the newline and then add a backreference to the closing tag.

The full pattern: \[(b|url|quote)\].*?\[/\1].

In action:

let regexp = /\[(b|url|quote)].*?\[\/\1]/gs; let str = ` [b]hello![/b] [quote] [url]http://google.com[/url] [/quote] `; alert( str.match(regexp) ); // [b]hello![/b],[quote][url]http://google.com[/url][/quote]

Please note that besides escaping [, we had to escape a slash for the closing tag [\/\1], because normally the slash closes the pattern.