Question

我在使用正则表达式模式时遇到了一个小问题。我没有正则表达式的知识，所以我无法解决它。

我有这样的文字：

var text = "this (is) some (ran)dom text";

我希望捕捉()之间的任何内容。所以在关注this tutorial后，我提出了这种模式：

var re = /(\(\w*\))/g;

工作正常。但我现在要做的是替换找到的匹配，或者修改。我想用span标记包装找到的匹配项。所以我使用了这段代码：

var spanOpen = '<span style="color: silver;">';
var spanClose = '</span>';
text.replace(re, spanOpen + text.match(re) + spanClose);

即使代码有效，我也没有得到我想要的结果。它输出：

as HTML

this <span style="color: silver;">(is),(ran)</span> some <span style="color: silver;">(is),(ran)</span>dom text

作为文字

this (is),(ran) some (is),(ran)dom text

您可以查看fiddle中的示例。我该如何解决这个问题？

小提琴中的代码：

var text = "this (is) some (ran)dom text";

var re = /(\(\w*\))/g;

var spanOpen = '<span style="color: silver;">';
var spanClose = '</span>';

var original = "original: " + text + "<br>";
var desired = "desired: this " +spanOpen+"(is)"+spanClose+ " some " +spanOpen+"(ran)"+spanClose+ "dom text<br>";
var output = "output: " + text.replace(re, spanOpen + text.match(re) + spanClose);

var result = original + desired + output;

document.body.innerHTML = result;

_{如果标题错误或误导，我会更改它。}

Answer 1

.replace()方法可以将函数作为第二个参数。这将在这里派上用场。

var output = "output: " + text.replace(re, function(match){
    return spanOpen + match + spanClose
});

每个匹配都会调用该函数。

您还可以在替换字符串中使用'$&'来引用每个匹配

var output = "output: " + text.replace(re, spanOpen + '$&' + spanClose);

请参阅：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

Answer 2

text.match（re）返回一个结果数组，所以你可以做的就是循环这个数组并用每个项替换你的字符串，如下所示：

var matches = text.match(re);

var output = "output: " + text;

for (var i = 0; i < matches.length; i++)
{
    output = output.replace(matches[i], spanOpen + matches[i] + spanClose);    
}

请参阅 FIDDLE

如何参考找到的匹配？

2 个答案: