JS - 使用正则表达式获取字符串替换的原始值答案

【问题标题】：JS - Get original value of string replace using regexJS - 使用正则表达式获取字符串替换的原始值
【发布时间】：2013-12-28 21:24:49
【问题描述】：

我们有一个字符串：

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.";

所以我使用了一些 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>');

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

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

我用用户的输入替换了内容，这意味着文本现在得到了用户的脏大小写不敏感。

如何使用上面显示的跨度包装所有匹配项，同时保持匹配项的原始值？

想通了，理想的结果是：

// user inputs 'REAL',

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

【问题讨论】：

你试过userInput.toLowerCase()...
不行，因为如果用户搜索1366 Mulberry Lane，那么匹配结果将显示全部小写，而应该是正确大小写。

标签： javascript regex

【解决方案1】：

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

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

FIDDLE

【讨论】：

最好转义某些在 RegExp 或 HTML 中有意义的字符，例如<>[]?^$
哇。 8 年的 Web 开发，不知何故，我从未听说过反向引用或见过它们的使用。 +100。
@Paul S.，如果您查看我上面的代码，您会发现我已经这样做了。
@PaulS。 - 在 OP 的代码中，用户输入中有一个转义的 replace()，所以我认为这已经处理好了。
@dc2 - 现在你知道它们是如何工作的了，它有时真的很有用

【解决方案2】：

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

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

【讨论】：