在 javascript 中使用捕获组从变量创建正则表达式答案

【问题标题】：Create regex from variable with capture groups in javascript在 javascript 中使用捕获组从变量创建正则表达式
【发布时间】：2015-06-08 15:10:57
【问题描述】：

如何从一个变量创建一个正则表达式，以便它有一个捕获组，然后可以在replace() 调用中使用？

以下是我迄今为止尝试过的，但没有成功。

var term = 'test'
var r = new RegExp('('+term+')', "ig");

$('#test').html( $('#test').html().replace(r, '<span class="found">'+$1+'</span>') ); // Uncaught ReferenceError: $1 is not defined

.found{
  background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="test">This is a test</div>

【问题讨论】：

标签： javascript jquery regex replace

【解决方案1】：

我想这正如你所期望的那样工作？主要是在替换字符串中使用$1，如<span class="found">$1</span>。

var term = 'test'
var r = new RegExp('('+term+')', "ig");

$('#test').html( $('#test').html().replace(r, '<span class="found">$1</span>') );

.found{
  background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="test">This is a test</div>

您也可以丢弃捕获组并在引用整个匹配的字符串替换模式中使用$& backreference 以及搜索字符串escape，因为如果它包含special regex chars，它可能无法匹配：

var term = 'test+test'
var r = new RegExp(term.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), "ig");

$('#test').html( $('#test').html().replace(r, '<span class="found">$&</span>') );

.found{
  background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="test">This is a test+test</div>

【讨论】：

是的:)。另外，请查看 MDN (developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/…) 上的“使用带括号的子字符串匹配”，这非常有帮助。
如果term 包含任何括号，则此方法将失败，因此您必须使用term.replace(/$/g, "\\(").replace(/$/g, "\\)")... 之类的东西来转义它们，[] 和当然 \ 本身也是如此.有关正则表达式术语清理的一般解决方案，请参阅此答案 (codereview.stackexchange.com/a/153702)。
@Extragorey 我看不出您的评论有何相关性：我的第二个代码 sn-p 准确显示了如何处理特殊字符 (var r = new RegExp(term.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), "ig");)。这个问题基本上是关于用自身替换正则表达式匹配，转义特殊字符是额外的增强，以防 OP 必须处理特殊字符。并非总是如此。
@WiktorStribiżew 很好，只是想我会为像我这样需要它的人增强答案。
@Extragorey 然后可以用SO link 替换codereview 链接，我认为转义代码最干净。

【解决方案2】：

你需要用函数包裹替换表达式。

var term = 'test'
var r = new RegExp('('+term+')', "ig");

$('#test').html( $('#test').html().replace(r, function($1){return '<span class="found">'+$1+'</span>'}) ); // Uncaught ReferenceError: $1 is not defined

.found{
  background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="test">This is a test</div>

【讨论】：