javascript - 基于输入术语的文本突出显示行为异常

Question

这是输入搜索词之前的文本格式。

输入术语后，它会丢失初始格式(返回纯文本)并按找到的连续字符数复制 p 文本(实际上我知道为什么会这样，但又不知道如何避免它):

我想要的是保留我最初的 html 格式，以及那些突出显示的单词，当然还要避免文本重复。

---

这是我的代码片段:

function searchHighlight(searchText) {
  if (searchText) {
    var content = $("p").text();
    // i for case insensitive, g search all matches
    var searchExpression = new RegExp(searchText, "ig"); 
    var matches = content.match(searchExpression);
    if (matches) {
      $("p").html(content.replace(searchExpression, function(match) {
        return "<span class='highlight'>" + match + "</span>";
      }));
    } else {
      $(".highlight").removeClass("highlight");
    }
  } else {
    $(".highlight").removeClass("highlight");
  }
}

$("#search").keyup(function() {
  // Return the value inside the text box
  searchHighlight($(this).val()); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>


<p>
  <span>jQuery selektori</span> omogućavaju selektovanje i upravljanje HTML elementima.
  Selektori traže HTML elemente na osnovu njihovih identi೰katora, klasa, atributa, 
  vrednosti atributa i dr. Bazirani su na CSS selektorima, ali postoje još neki. 
  Svi selektori u <span>jQuery-ju</span> počinju sa znakom dolara i zagradama: $() .
</p>
<p id="paragraph">
  <span>Selektor $("*
        ")</span> selektuje sve elemente.
  <span>– Selektor $(this)</span> selektuje element na koji se odnosi funkcija koja ga obuhvata.
  <span>– Selektor $("p.intro")</span> selektuje sve p elemente sa atributom class="intro" . 
  Uvod u Veb i Internet Tehnologije 133
  <span>– Selektor $("p:first")</span> selektuje prvi p element.
  <span>– Selektor $("ul li:first")</span> selektuje prvi li element prvog ul elementa.
  <span>– Selektor $("ul li:first child")</span> selektuje prvi li element svakog ul elementa.
  <span>– Selektor $("[href]")</span> selektuje sve elemente koje imaju postavljen atribut 
  href . – Selektor $("a[target='_blank']") selektuje sve elemente a sa atributom target="_blank" 
  . – Selektor $("a[target!='_blank']") selektuje sve elemente a koji
  nemaju atribut target="_blank" . – Selektor

</p>

Answer 1

当您调用searchHighlight函数时，您将获取p的内容，这将为您提供所有p。另外，当您说 .text() 时，它会给您纯文本。这就是为什么它删除了初始格式。

如果您在所有 p 上运行循环并使用 .html() 而不是 .text() 并且如果您解开在获取html内容之前在start中突出显示的内容，您将能够实现它。

请参阅下面的片段:

function searchHighlight(searchText) {
          if (searchText) {
          
              $("p").each(function() { 
                 $(this).find(".highlight").contents().unwrap();
                var content = $(this).html();
                
                var searchExpression = new RegExp(searchText + '(?=[^<>]*(<|$))', "ig"); // i for case insensitive, g search all matches
                var matches = content.match(searchExpression);
                if (matches) {
                  $(this).html(content.replace(searchExpression, function (match) {
                      return "<span class='highlight'>" + match + "</span>";
                  }));
                }
              });
          }else{
            $(".highlight").contents().unwrap();
            $(".highlight").remove();
          }
      }
$("#search").keyup(function () {
  searchHighlight($(this).val()); // Return the value inside the text box
});

p > span {
  color: red;
}

p#paragraph > span{
  color: orange;
}

span.highlight {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search">

<p>
    <span>jQuery selektori</span> omogućavaju selektovanje i upravljanje HTML elementima. Selektori
    traže
    HTML elemente na osnovu njihovih identi೰katora, klasa, atributa,
    vrednosti atributa i dr. Bazirani su na CSS selektorima, ali postoje još neki. Svi
    selektori u <span>jQuery-ju</span> počinju sa znakom dolara i zagradama: $() .
</p>
<p id="paragraph">
    <span>Selektor $("*
        ")</span> selektuje sve elemente.
    <span>– Selektor $(this)</span> selektuje element na koji se odnosi funkcija koja ga obuhvata.
    <span>– Selektor $("p.intro")</span> selektuje sve p elemente sa atributom class="intro" .
    Uvod u Veb i Internet Tehnologije 133
    <span>– Selektor $("p:first")</span> selektuje prvi p element.
    <span>– Selektor $("ul li:first")</span> selektuje prvi li element prvog ul elementa.
    <span>– Selektor $("ul li:first child")</span> selektuje prvi li element svakog ul
    elementa.
    <span>– Selektor $("[href]")</span> selektuje sve elemente koje imaju postavljen atribut href . –
    Selektor $("a[target='_blank']") selektuje sve elemente a sa atributom target="_blank" . – Selektor
    $("a[target!='_blank']") selektuje sve elemente a koji nemaju atribut target="_blank" . – Selektor

</p>

总会有一些漏洞。

我保留Older jsFiddle 。这是new jsFiddle .