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

Whats the fastest way to highlight different strings in an html document?

本文关键字：字符串 是什么 方法 文档 html 显示      更新时间：2023-09-26

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

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

我已经尝试了几个不同的插件，但没有找到更快的插件，有没有办法在更快的香草 JS 中做到这一点？它只需要在Chrome中工作。

任何帮助将不胜感激。

谢谢

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

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

Plain 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>

试试这个。 

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 
            }
        });
    });
相关文章：