Which regexp should be used to replace bbcode-style tags with HTML tags

Question

I want to replace some specific letters (got from user input) to replace with some specific html tags like ,,,etc. I am using some regexps in javascript, but can not make out which use best. I am using

/\[u\](.*?)\[u\]/g // replace with <u>$1</u>
/*
 * if i type [u]underline[][u] //this allows '[]' braces
*/

or should I use

/\[u\]\([^\[u\]]+)\[u\]/g // this doesn't allow third braces to be underlined

I am also using the same regexps in php. I am confused which type of regexp use would be safe from xss attack.

bbcode is not a regular language. You should not try to parse it using regular expressions. Get a bbcode parser from github or write your own. — Marcos
– Marcos, Commented Jan 4, 2014 at 7:49

Community · Accepted Answer · 2017-05-23 11:58:07Z

1

No regexes should be used. Find a decent bbcode parser (for instance, PHP's BBCode) and use it. trying to parse HTML or any established markup language with Regex yourself is asking for pain, trouble, and insecurity.

bobince wrote an epic answer about parsing HTML with regexes, which is relevant here as well and always worth a read.

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Jan 3, 2014 at 20:19

cincodenada

3,13929 silver badges36 bronze badges

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

2 Comments

cincodenada Over a year ago

I edited for clarification, but it doesn't really matter. You're trying to write your own parser for an established markup language that has lots of little details and gotchas. Just learn and use something that's been tested and well-used, you'll save time and it will be far more secure and less buggy.

cincodenada Over a year ago

The reason my answer was originally oriented towards HTML, by the way, is that your title (before I edited it) implied you were parsing HTML. I went back and edited it to refer to bbcode, but missed the third reference to HTML in my answer.

Jonny 5 · Accepted Answer · 2015-08-31 14:56:21Z

You asked, whether to use /\[u\](.*?)\[u\]/g or /\[u\]\([^\[u\]]+)\[u\]/g. Both patterns are not designed with an ending-tag, which is important. [u]underlined text[/u] is BBCode

A solution using extended regex could be the use of recursive patterns. I think there is no support in JavaScript yet, but works fine e.g with PHP which uses PCRE.

The problem: Tags can be nested and this will make it difficult, to match the outermost ones.

Understand, what the following patterns do in this PHP example:

$str = 
'The [u][u][u]young[/u] quick[/u] brown[/u] fox jumps over the [u]lazy dog[/u]';

1.) Matching any character in [u]...[/u] using the dot non-greedy

$pattern = '~\[u\](.*?)\[/u\]~';
$str = preg_replace($pattern, '<u>\1</u>', $str);
echo htmlspecialchars($str);

outputs:

The [u][u]young quick[/u] brown[/u] fox jumps over the lazy dog

Looks for the first occurence of [u] and eats up as few characters as possible to meet the conditional [/u] which results in tag-mismatches. So this is a bad choice.

2.) Using negation of square brackets [^[\]] for what is inside [u]...[/u]

$pattern = '~\[u\]([^[\]]*)\[/u\]~';
$str = preg_replace($pattern, '<u>\1</u>', $str);
echo htmlspecialchars($str);

outputs:

The [u][u]young quick[/u] brown[/u] fox jumps over the lazy dog

It looks for the first occurence of [u] followed by any amount of characters, that are not [ or ] to meet the conditional [/u]. It is "safer" as it only matches the innermost elements but still would require additonal effort to resolve this from inside out.

3.) Using recursion + negation of square brackets [^[\]] for what is inside [u]...[/u]

$pattern = '~\[u\]((?:[^[\]]+|(?R))*)\[/u\]~';
$str = preg_replace($pattern, '<u>\1</u>', $str);
echo htmlspecialchars($str);

outputs:

The [u][u]young[/u] quick[/u] brown fox jumps over the lazy dog

Similar to the the second pattern: Look for the first occurence of [u] but then EITHER match one or more characters, that are not [ or ] OR paste the whole pattern at (?R). Do the whole thing zero or more times until the conditional [/u] is matched.

To get rid of the remaining bb-tags inside, that were not resolved, we now can easily remove them:

$str = preg_replace('~\[/?u\]~',"",$str);

And got it as desired:

outputs: The young quick brown fox jumps over the lazy dog

For sure there are different ways achieving it, like preg replace callback or for JavaScript the replace() method that can use a callback as replacement.

Collectives™ on Stack Overflow

Which regexp should be used to replace bbcode-style tags with HTML tags

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related