javascript - 如何引用找到的匹配项？

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

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

作为 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 中的示例。我该如何解决这个问题？

<小时/>

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