jQuery的Javascript高亮功能不起作用
Javascript highlight function with jquery not working

最大的问题是，当您确实需要分别评估每个<p>标签时，您一次选择了所有<p>标签。

如果我有3个<p>标记，并且这样做： $('p').html('I am ap tag!!'); -然后每个<p>标签都会受到影响。

同样，如果我这样做： var content = $('p').text(); -然后， content等于"some text is hereother kindseven more" ，即每个 <p>标记中的文本。 这不好！

尝试这个：

function hiLite(searchWords) {
    if (searchWords) {
        $('p').each(function(index, single_p) {
            var text = $(single_p).text(); // .text() does not include html, does not include any former <spans>
            $(single_p).html(text); // reset <p> html to be only the text from previous line
            var regExp = new RegExp(searchWords, "ig");

            var new_text = text.replace(regExp, '<span class="highlight">' + searchWords + '</span>'); // create new text with HTML highlight
            $(single_p).html(new_text); // update DOM with our new HTML
        });
    }
};


$("#searchBar").keyup(function() {
    var userInput = $(this).val().toLowerCase();
    hiLite(userInput);
});

解决方案2：

添加了条件以根据搜索文本突出显示文本

JS代码：

 function hiLite(searchWords){

        if(searchWords){
        var content = $("p").text();
        var regExp = new RegExp(searchWords, "ig");
        var matches = content.match(regExp);

       if(matches){
                        $('#results p').each(function() {
                        var test = '<span class="highlight">'+searchWords+'</span>';
                        var text = $(this).text();
                        $(this).html(text.replace(regExp, test)); 
                    });
            }

        } 
    };


$("#searchBar").keyup(function(){
 var userInput = $(this).val().toLowerCase();
 hiLite(userInput); 
});

HTML代码：

<div class="search">Search:     
<input type="text" id="searchBar">    
</div>

<div id="results">

    <p>some text is here</p>
    <p>other kinds</p>
    <p>even more</p>

</div>

CSS：

.highlight{
  color:red
}

JSFiddle ：