Question

我正在尝试在html页面中搜索字符串，我有一个包含1000个名字的对象，我需要找到这些名称是否存在于html文档中。如果它们确实存在，那么我需要将它们包裹在一个范围内，然后应用一个类。

我一直在使用这个jQuery Highlight Plugin，但扫描并突出显示整个页面需要大约17秒，这显然取决于页面上有多少不同的名称。

我尝试了一些不同的插件，但没有发现任何更快的速度，有没有办法在vanilla JS中做得更快？它只需要在Chrome中运行。

任何帮助都会非常感激。

由于

编辑：包含名称的对象的结构：

var PEOPLE = { "fred" : { loaded : false, elements : [] }, "dave" : { loaded : false, elements : [] }, "bob" : { loaded : false, elements : [] } }

Answer 1

普通的javascript。

基本上我遍历你的对象并提取所有相关的名字。一旦我有了这个，我将数组传递给highlightString函数，在那里我连接你想要与管道字符匹配的所有字符串，并创建一个全局运行并忽略大小写的正则表达式。这导致被搜索的div仅被搜索一次。这应该会带来相当大的加速。

var PEOPLE = {
  "fred" : {
    loaded : false,
    elements : []
  },
  "dave" : {
    loaded : false,
    elements : []
  },
  "bob" : {
    loaded : false,
    elements : []
  }
},
name,
search = [];

for (name in PEOPLE) {
  search.push(name);
}    

function highlightStrings(input, toMatch) {
  var reg = new RegExp('(' + toMatch.join('|') + ')', "gi");
  input.innerHTML = input.innerHTML.replace(reg, '<span class="myHighLight">$1</span>');  
}

highlightStrings(document.getElementById("test"), search);

.myHighLight {background-color:yellow;}

<div id="test">
  test1 test2 fred test4 test5 test6 test7 test8 dave test10 test11 test12 bob test14 test15
</div>

Answer 2

试试这个。

jQuery.expr[':'].contains = function(a, i, m) {
        return jQuery(a).text().toUpperCase()
        .indexOf(m[3].toUpperCase()) >= 0;
    }; // this is just for ignore case

    $("#id_of_Input_Tag").keyup(function() {
        $(".UserItem a").hide(); // hide all content 
        var rows = $(".UserItem").find("a");
        var data = this.value.split("~");
        $.each( data, function(i, v) {
            rows.filter(":contains('" + v + "')").show(); // this will only show the maching content.
            if(v == '' ){
                $(".UserItem a").show(); // when input is empty then show all 

            }

        });

    });

什么是在html文档中突出显示不同字符串的最快方法？

2 个答案: