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++;
    }
});

Demo here

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

Answer 1

Here是我使用this插件提出的。它很简单：

$('#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>");
    ...

测试此代码 here 。

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

2 个答案: