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:

1. Replace multiple strings at once
2. replace() with RegExp on array elements
3. 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?

Answer 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>'));