Question

在制作简单的bbcode解析器时，需要在字符串中找到类似[color=blue]的子字符串，并将其替换为<span style="color:blue">之类的字符串。我一直在使用正则表达式和javascript .replace（）来做到这一点。如何使用正则表达式查找我需要的内容，然后还提取要在跨度中使用的颜色名称？

Answer 1

$(document).ready( function () {

    function my_func(whole_match, group1, group2) {
      return '<span style="' + group1 + ':' + group2 + '">';

    }

    var regex = /\[([^=]+)=([^\]]+)\]/;
    var str = 'hello [color=blue] world';
    var result = str.replace(regex, my_func);

  console.log(
      result
  );


});

--output:--
hello <span style="color:blue"> world

Answer 2

像这样：

var input = "[color=blue]";
var output = input.replace(/\[color=([a-z]+)\]/ig, "<span style=\"color:$1\">");
console.log(output);

相关位是指定第一个捕获组的$1。

Answer 3

对于简单案例，您可以使用/\[color=([a-z]+)\]/g正则表达式：

var str = 'Hi there [color=blue] friend and [color=red] not friend';
str = str.replace(/\[color=([a-z]+)\]/g, '<span style="color:$1">');
console.log(str);

输出：

Hi there <span style="color:blue"> friend and <span style="color:red"> not friend

如果您有结束标记，请使用/\[color=([a-z]+)\](.*?)\[\/color\]/g：

var s2 = 'Hi there [color=blue]friend[/color] and [color=red]not friend[/color]';
s2 = s2.replace(/\[color=([a-z]+)\](.*?)\[\/color\]/g, '<span style="color:$1">$2</span>');
console.log(s2);

输出：

Hi there <span style="color:blue">friend</span> and <span style="color:red">not friend</span>

如果您有嵌套代码，则必须拨打replace两次：

var s4 = 'a[color=blue]b[color=red]c[/color]d[/color]e';
s4 = s4.replace(/\[color=([a-z]+)\]/g, '<span style="color:$1">');
s4 = s4.replace(/\[\/color\]/g, '</span>');
console.log(s4);

输出：

a<span style="color:blue">b<span style="color:red">c</span>d</span>e

See testing fiddle here

_{请记住正则表达式不是为了处理嵌套而设计的。但是，由于您的情况很简单，它可以使用两个替换 - 但可能会产生一些附带效果，例如创建一个从未打开的</span>的结束span（如果用户键入{{1} } 只要）。如果你真的需要，我们可以创建一个处理嵌套的正则表达式，但只能达到一定的水平，并且代价是使表达式复杂化。}

JS替换正则表达式，但在输出中使用表达式的一部分，就像变量一样

3 个答案: