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

Question

我们有一个字符串:

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

某些输入中的用户类型:

var userInput = "REAL";

我希望匹配此输入,并用跨度包装以突出显示它:

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

Answer 1

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

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

小提琴