如何在Javascript中更快地使这个功能?

时间:2012-01-19 13:10:34

标签: javascript jquery html

我创建了一个突出显示功能,该功能将使用用户指定的关键字突出显示<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");

    });

4 个答案:

答案 0 :(得分:3)

添加颜色,红色意味着将样式属性添加到每个p,我认为可以改进添加类:

p.highlight {
   color:red;   
}

并替换

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

通过

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

这可能加快了一点过程

答案 1 :(得分:0)

尝试定义一个css类,例如:

.red{background-color:#f00;}

然后您只需"style=background-color:#f00;"

,而不是添加到每个.addClass("red");

只需更少的代码,但jQuery必须通过所有行,如果它很多,那么我想这取决于你的机器速度;)

答案 2 :(得分:0)

我使用jQuery的contains()方法编写了一个小解决方案。显然你可以投入一些字符串验证。

http://jsfiddle.net/W2CZB/

答案 3 :(得分:0)

以下解决方案可能会以空间为代价提高性能。它的工作原理是构建行的单词映射并直接访问以添加或删除高亮类。此解决方案还会计算过滤器命中该行的次数,以便在删除最后一个过滤器之前保持突出显示。我已经测试了几行,我不知道它将如何与1000s一起表现。你告诉我们:))

$(function(){

buildIndex();

$("#highlight").click(
function(){
    var id = $("#highlight_box").val();
    if(id == "--Text--" || id == ""){
        alert("Please enter text before highlighting.");
    }else{
        var filter = $("<li><img src=\"images/delete.png\" class=\"delete_filter\" value=\"" + id + "\" /> " + id + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>");
        filter.click(function(){
            $(this).remove();
            removeHighlight(id)
        });
        $("#access-keywords-row").append(filter);
        $.each(index[id], function(i,line){
            if (line.highlightCount)
              line.highlightCount++;
            else {
              line.addClass('highlight')
              line.highlightCount=1;
            }
        });
    }
});

function removeHighlight(id) {
    $.each(index[id], function(i,line){
        line.highlightCount--;
        if (line.highlightCount<1)
            line.removeClass('highlight')
    });
};
});

var index={};
function buildIndex(){
    $("#access_log_print p").each(function(i) {
        var line = $(this)
        var words = line.text().split(/\W+/);
        $.each(words, function(i,word){
            if (!index[word]) { index[word]=[]; }
            index[word].push(line);
        });
    });
}