Question

I have created a highlight feature that will highlight anything contained in a <p> red using a user specified keyword. When the submit button is clicked Javascript/jQuery pull the keyword from the input field and compare it to any lines that conain it and then highlight those lines red. It works great… but its slow. Is there another way to do this that is faster when working with over 1000 lines of <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

Adding color, red means adding the style attribute to each p, I think this can be improved adding a class:

p.highlight {
   color:red;   
}

And replacing

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

by

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

This probably speeds a little bit the process