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

Question

我正在尝试在 html 页面中搜索字符串，我有一个包含 1000 个名称的对象，我需要查找这些名称是否存在于 html 文档中。如果它们确实存在，那么我需要将它们包装在跨度或其他东西中并应用一个类。

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

我尝试了一些不同的插件，但没有找到更快的插件，有没有一种方法可以在 vanilla JS 中更快地做到这一点？它只需要在 Chrome 中工作。

任何帮助将不胜感激。

谢谢

编辑:保存名称的对象的结构:

var 人 = { “弗雷德”:{ 已加载:假， 元素:[] }, “戴夫”:{ 已加载:假， 元素:[] }, “鲍勃”:{ 已加载:假， 元素:[] } }

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>