javascript - 我怎样才能使这个功能在 Javascript 中更快？

Question

我创建了一个突出显示功能，可以突出显示 <p> 中包含的所有内容红色使用用户指定的关键字。单击提交按钮时，Javascript/jQuery 从输入字段中提取关键字并将其与包含它的任何行进行比较，然后将这些行突出显示为红色。它工作得很好......但它很慢。在处理超过 1000 行 <p> 时，还有另一种方法可以更快地执行此操作吗？ ？

HTML

Keyword:&nbsp;<input type="text" id="highlight_box" class="text_box" value="--Text--" /> &nbsp;
<input type="button" id="highlight" value="Highlight" />

<!--Print area for the Access log-->
<div id="access_content" class="tabbed-content">
<ul id="access-keywords-row" class="keywords-row">
    <!--When a user submits a keyword it is placed as a tag here so it can be deleted later-->
</ul><br /><br />
<div id="access_log_print" class="print-area">
    <p>Some Content</p>
    <p>Some more content</p>
    <!--Most of the time this could contain 1000's of lines-->
</div>
</div>

JavaScript

//add highlight and tag
$("#highlight").click(
function(){
    var id = $("#highlight_box").val();
    if(id == "--Text--" || id == ""){
        alert("Please enter text before highlighting.");
    }else{
        $("#access-keywords-row").append("<li><img src=\"images/delete.png\" class=\"delete_filter\" value=\"" + id + "\" /> " + id + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>");
$("#access_log_print p:containsi(" + id + ")").css("color","red");        }
});

//remove highlight and tag
$(".keywords-row").on("click", ".delete_filter", 
    function() {
        var val = $(this).val();             

        //remove element from HTML
        $(this).parent().remove();
        $("#access_log_print p:containsi(" + val + ")").css("color","black");

    });

Answer 1

加颜色，红色的意思是给每个p加style属性，我觉得加个类可以改善:

p.highlight {
   color:red;   
}

并替换

$("#access_log_print p:contains(" + id + ")").css("color","red");

通过

$("#access_log_print p:contains(" + id + ")").addClass('highlight');

这可能会稍微加快这个过程