Javascript JS-使用regex获取字符串replace的原始值

我们有一个字符串：

var dynamicString = "This isn't so dynamic, but it will be in real life.";

某些输入中的用户类型：

var userInput = "REAL";

我想匹配此输入，并用一个span将其环绕以突出显示：

var result = " ... but it will be in <span class='highlight'>real</span> life.";

var result=“…但它将出现在现实生活中。”；

因此，我使用一些RegExp魔术来做到这一点：

// Escapes user input,
var searchString = userInput.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");

// Now we make a regex that matches *all* instances 
// and (most important point) is case-insensitive.
var searchRegex = new RegExp(searchString , 'ig');

// Now we highlight the matches on the dynamic string:
dynamicString = dynamicString.replace(reg, '<span class="highlight">' + userInput + '</span>');

//转义用户输入，
var searchString=userInput.replace（/[\-\[\]\/\{\}（\）\*\+\？\.\\\\^\$\\\\\；]/g，“\$&”）；
//现在我们制作一个匹配*所有*实例的正则表达式
//而且（最重要的一点）不区分大小写。
var searchRegex=newregexp（searchString，'ig'）；
//现在，我们突出显示动态字符串上的匹配项：
dynamicString=dynamicString.replace（reg，“+userInput+”）；

这一切都很好，但结果如下：

console.log(dynamicString);
// -> " ... but it will be in <span class='highlight'>REAL</span> life.";

console.log（dynamicString）；
//->“……但它将在现实生活中出现。”；

我用用户的输入替换了内容，这意味着文本现在获得了用户的不区分大小写的特性

如何使用上面显示的范围包装所有匹配，同时保持匹配的原始值

我想，理想的结果是：

// user inputs 'REAL',

// We get:
console.log(dynamicString);
// -> " ... but it will be in <span class='highlight'>real</span> life.";

//用户输入“REAL”，
//我们得到：
console.log（dynamicString）；
//->“……但它将在现实生活中出现。”；

您可以使用正则表达式捕获组和反向引用来捕获匹配项并将其插入字符串中

var searchRegex = new RegExp('('+userInput+')' , 'ig');
dynamicString = dynamicString.replace(searchRegex, '<span class="highlight">$1</span>');

var searchRegex=newregexp（“（“+userInput+”）”，“ig”）；
dynamicString=dynamicString.replace（searchRegex，$1'）；

---

您也可以在不捕获组的情况下使用它

dynamicString = text.replace(new RegExp(userInput, 'ig'), '<span class="highlight">$&</span>');

dynamicString=text.replace（新的RegExp（userInput，'ig'），'$&'）；

您是否尝试过userInput.toLowerCase（）…但不起作用，因为如果用户搜索了1366 Sanberry Lane，匹配结果将显示所有小写字母，而大小写应该是正确的。最好转义某些在RegExp或HTML中有意义的字符，例如

[]？^$

哇。8年的网络开发，不知何故，我从未听说过反向引用，也从未见过它们的使用+100.@Paul S.，如果你看我上面的代码，你会发现我已经在做了。@PaulS-OP代码中的用户输入上有一个转义replace（），所以我想这已经解决了。@dc2-现在你知道它们是如何工作的了，有时候它真的很有用