jQuery的Javascript高亮功能不起作用

Question

我正在嘗試使用jQuery構建“簡單”突出顯示功能。 由於某種原因，這使我的HTML重復了，我不確定為什么。 我要做的就是在搜索欄中鍵入搜索文本，並在鍵入時突出顯示標簽中的文本。

有什么想法嗎？ 絕望...

這是HTML和JS

 function hiLite(searchWords) { if (searchWords) { var content = $("p").text(); var regExp = new RegExp(searchWords, "ig"); var matches = content.match(regExp); if (matches) { $("p").html(content.replace(regExp, function(match) { return "<span class='highlight'>" + match + "</span>"; })); } else { $(".highlight").removeClass("highlight"); } } else { $(".highlight").removeClass("highlight"); } }; $("#searchBar").keyup(function() { var userInput = $(this).val().toLowerCase(); hiLite(userInput); }); 

 <!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="photo_filter.css" type="text/css"> </head> <body> <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> </body> </html> 

Answer 1

最大的問題是，當您確實需要分別評估每個<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);
});

Answer 2

解決方案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 ：