javascript - 键入时搜索 - 突出显示匹配项

Question

我正在使用以下函数来过滤元素并仅显示包含字符串的元素 - 在您键入时进行搜索。

var filter = $(this).val();
var count = 0;    
$(SearchableElements).each(function() {
    if ($(this).text().search(new RegExp(filter, "i")) < 0) {
        // hide
    } else {
        // show matches
        count++;
    }
});​

演示在这里

你能想到在文本中突出显示匹配项的任何方法吗？wrap有吗span？或者 jQuery 需要处理很多工作（查找、删除之前包装、包装新匹配）？

Answer 1

这是我使用这个插件想出的东西。它很简单：

$('#searchable').highlight(filter);

编辑：更新链接，修复了一些问题。

Answer 2

首先，您需要定义escapreRegExp函数以确保您的搜索字符串不是正则表达式模式：

function escapeRegExp(str) {
  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}

然后你需要修改你的脚本如下：

$(SearchableElements).each(function(){
  this.innerHTML = this.innerHTML.replace(
    /<span\s[^>]*?class=['"]highlight['"].*?>(.*?)<\/span>/g, "$1");
  if ($(this).text().search(new RegExp(filter, "i")) < 0) {
  ... 
  } else {
    var re = new RegExp("(" + escapeRegExp(filter) + ")(?![^<]*>)", "gi");
    this.innerHTML = this.innerHTML.replace(re, 
       "<span class='highlight' style='background-color: #FFFF00'>$1</span>");
    ...

在此处测试此代码。