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

Question

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

以下是我目前尝试过但没有成功的方法。

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

$('#test').html( $('#test').html().replace(r, '<span class="found">'++'</span>') ); // Uncaught ReferenceError:  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>

Answer 1

我想这是否如您所愿？最主要的是在替换字符串中使用 </code>，如 <code><span class="found"></span>.

var term = 'test'
var r = new RegExp('('+term+')', "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</div>

也可以舍弃捕获组，使用$& backreference in the string replacement pattern that refers to the whole match and also escape the search string since in case it contains 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>

Answer 2

您需要用函数包装替换表达式。

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

$('#test').html( $('#test').html().replace(r, function(){return '<span class="found">'++'</span>'}) ); // Uncaught ReferenceError:  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 中的捕获组从变量创建正则表达式

Create regex from variable with capture groups in javascript

javascript

regex

jquery

replace