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

感谢: user2182349 解决了这个问题。请参阅下面的答案。

我正在尝试替换我的 BBcode。我使用这个每个人都认为答案的功能，但对我来说仍然不起作用。

我想替换这样的东西:

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>",];

[N] 标签被替换为跨度。实际上，一旦我让它工作，它们都将是跨度或其他标签。我现在使用简单的标签来使其工作。

我测试过的函数和一些示例字符串

// 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>

所以问题似乎出在我将 BBcode 发送到正则表达式替换函数的方式上。我该怎么喂它？

Answer 1

正则表达式很好，因为您无需编写大量代码即可添加标签。如果我正确理解你的问题，你想将 BBCodes 转换为 HTML 等效项。这是使用正则表达式完成的一种方法。

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

如果您愿意允许任何 BBCode，您也可以使用此:

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

这将采用任何[withsomecharacters]并将其转换为，包括开头的可选斜杠。

更复杂的实现是使用对象数组。每个对象可以有两个属性 - in 和 out。 in 是输入，out 是输出，对于更复杂的标签，它可以使用字符串替换进行循环。下一段代码可以执行正则表达式。

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