Javascript：突出显示保持原始大小写但在不区分大小写模式下搜索的子字符串

Question

我正在尝试编写一个“建议搜索框”，但找不到允许使用 javascript 保持原始大小写突出显示子字符串的解决方案。

例如，如果我搜索“ ca ”，我在不区分大小写的模式下搜索服务器端，结果如下：

计算器

日历

逃脱

我想查看前面所有单词中的搜索字符串，所以结果应该是：

计算器

加州 伦达

ES CA PE

我尝试使用以下代码：

 var reg = new RegExp(querystr, 'gi');
var final_str = 'foo ' + result.replace(reg, '<b>'+querystr+'</b>');
$('#'+id).html(final_str);

但显然这样我就失去了原来的情况！

有没有办法解决这个问题？

原文由 Giovanni Di Milia 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为 .replace() 的第二个参数使用一个函数，它返回带有连接标签的实际匹配字符串。

试试看： http: //jsfiddle.net/4sGLL/

 reg = new RegExp(querystr, 'gi');
       // The str parameter references the matched string
       //    --------------------------------------v
final_str = 'foo ' + result.replace(reg, function(str) {return '<b>'+str+'</b>'});
$('#' + id).html(final_str);​

带有输入的 JSFiddle 示例： https: //jsfiddle.net/pawmbude/

原文由 user113716 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

ES6版本

const highlight = (needle, haystack) =>
  haystack.replace(
      new RegExp(needle, 'gi'),
      (str) => `<strong>${str}</strong>`
  );

原文由 serby 发布，翻译遵循 CC BY-SA 4.0 许可协议