Question

我正在尝试使用jQuery构建“简单”突出显示功能。由于某种原因，这使我的HTML重复了，我不确定为什么。我要做的就是在搜索栏中键入搜索文本，并在键入时突出显示标签中的文本。

有什么想法吗？绝望...

以下是HTML和JS

Invoke-Command

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);
});

Answer 1

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

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

类似地，如果我这样做： var content = $('p').text();-content等于这个"some text is hereother kindseven more"，它是来自每一个 标记的文本。不好！

尝试一下：

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代码：

[constant_score] query does not support [query]

HTML代码：

 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); 
});

CSS：

<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>

JSFiddle：

jQuery的Javascript高亮功能不起作用

2 个答案: