Javascript : How to not confuse regex with BB code

Question

Please Note

I could find several questions&answers about this but the end result I came up with is : Dont use regex. So I am posting this question to find a solution to my problem. And maybe an alternative to Regex. I base this on several similar question:

Replace multiple strings at once

replace() with RegExp on array elements

BB-Code-RegEx in javascript

Credit to: user2182349 sor resolving this. See answer below.

I'm am trying to replace my BBcode. I use this function that everyone take for an answer but still is not working for me.

I want to replace things like that:

var find = ["[b]", "[/b]", "[i]","[/i]","[u]","[/u]","[N]","[/N]","[c]","[/c]","[li]","[/li]"];
var rep  = ["<b>", "</b>", "<i>","</i>","<u>","</u>","<div class='editNote'>","</div>","<center>","</center>","<li>","</li>",];

The [N] tag gets replaced by a span. Actually once i get it to work they will all be span or other tags. i use simple tag right now to be able to get it to work.

The Function and a few sample string i have tested

// With escaped
var fEs = ["\[b\]", "\[/b\]","\[i\]", "\[/i\]"];
// Without escape
var f = ["[b]", "[/b]","[i]", "[/i]"];
//replaced with
var r  = ["<b>", "</b>","<i>", "</i>"];
// The string
var string = "this is the [b]first[/b] one and here comes the [b]second[/b] one and when the text contain some b like bacon";

String.prototype.replaceArray = function(find, replace) {
  var replaceString = this;
  var regex; 
  for (var i = 0; i < find.length; i++) {
    regex = new RegExp(find[i], "g");
    replaceString = replaceString.replace(regex, replace[i]);
  }
  return replaceString;
};

//Ignore the rest. It is just for the snippet to work//////////////////////////////////

 $("#Es").on("click",function (event) {
   string = string.replaceArray(fEs,r)
   $('#result').html(string);
});
 $("#noEs").on("click",function (event) {
    string = string.replaceArray(f,r)
   $('#result').html(string);
});
 $("#reset").on("click",function (event) {
 string = "this is the [b]first[/b] one and here comes the [b]second[/b] one and when the text contain some b like bacon";
   $('#result').html('');
});

span{
cursor:pointer
}
div{
height:100px;
width:300px;
border:1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="Es">Click here to see result with escape</span><br><br>
<span id="noEs">Click here to see result without escape</span><br><br>
<span id="reset">Reset here</span><br><br>
<div id="result"></div>

So the problem seams to be coming from the way i send my BBcode to the regex replacing function. How Should i feed it?

why do you need a regexp for this? Just use simple string replace — Gavriel
– Gavriel, Commented Jan 21, 2016 at 0:35
iirc '[' and ']' are special in regexp, so you need to escape them with a '\\' — Shanimal
– Shanimal, Commented Jan 21, 2016 at 1:15
and you need to double escape them because its a string. \\[ — Shanimal
– Shanimal, Commented Jan 21, 2016 at 1:16

user2182349 · Accepted Answer · 2016-01-22 00:16:58Z

1

A regex is nice because you can add tags without a lot of code. If I understand your question correctly, you want to convert the BBCodes to HTML equivalents. This is one way it could be done with a regex.

var s = "this is the [b]first[/b] one and here comes the [b]second[/b] one and when the text contain some b like bacon, and there are [i]icicles[/i]";

var re = /\[(\/?[bi])\]/mg;

console.log (s.replace(re,'<$1>'));

If you are willing to allow any BBCodes, you may also use this:

var re = /\[(\/?[^\]]+)\]/mg;

This will take any [withsomecharacters] and turn it into <withsomecharacters>, including an optional slash at the beginning.

A more complex implementation would be to use an array of objects. Each object could have two properties - in and out. in is the input, out is the output, and it can loop through using a string replace for the more complex tags. The next piece of code could do the regex.

var s = "this [N]editnote[/N] is the [b]first[/b] one and here comes the [b]second[/b] one and when the text contain some b like bacon, and there are [i]icicles[/i] and [li]li[/li]";

var p,pairs = [ { "in": "[N]",
    "out": '<div class="editNote">' },
  { "in": "[/N]",
    "out": '</div>' }
];

for (p in pairs) {
        s = s.replace(pairs[p]["in"],pairs[p]["out"]);
}
var re = /\[(\/?[^\]]+)\]/mg;
console.log (s.replace(re,'<$1>'));

edited Jan 22, 2016 at 0:16

answered Jan 21, 2016 at 0:36

user2182349

9,8323 gold badges31 silver badges44 bronze badges

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

9 Comments

MadeInDreams Over a year ago

But what happen if i have [li] and[i] will both i get confused?

Gavriel Over a year ago

Even if this would work this totally opposes the idea behind using bbcode, where we want to whitelist the elements we accept

MadeInDreams Over a year ago

Its only work with one letter bbcode and wont work with more complex one line [n][/n] to

user2182349 Over a year ago

@MadeInDreams - the second approach will handle multicharacter tags, but it will not translate [n][/n] to , I didn't see that in the original question.

jkdev Over a year ago

Maybe use a two-regex solution. First convert [n] to <n>, then run a separate regex to convert <n> to

|

Collectives™ on Stack Overflow

Javascript : How to not confuse regex with BB code

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related