Javascript:突出显示保留原始案例的子字符串,但在不区分大小写的模式下搜索

Question

我正在尝试编写一个"建议搜索框",我找不到一个解决方案,允许使用javascript保持原始案例突出显示子字符串.

例如,如果我搜索" ca"我在不区分大小写模式下搜索服务器端,我有以下结果:

计算器

日历

逃逸

我想在之前的所有单词中查看搜索字符串,因此结果应为:

Ca lculator

ca lendar

ES CA PE

我尝试使用以下代码:

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

但显然这样我放松了原来的情况!

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

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/

Answer 2

ES6版本

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