javascript - JS 替换正则表达式，但在输出中使用部分表达式，如变量

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 

请参阅此处的测试小提琴。

_{请记住，正则表达式并非旨在处理嵌套。但是，因为您的案例很简单，所以它可以与两个替换一起使用 - 但可能会产生一些附带影响，例如创建一个从未打开过的 a 的关闭（如果用户只键入</span>）。如果您真的需要，我们可以创建一个处理嵌套的正则表达式，但只能达到一定的水平，并且以使表达式真正复杂化为代价。span[/color]}