基于输入术语的文本突出显示异常

Question

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

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

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

---

这是我的代码 sn-p：

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

使用 mark.js 轻松突出显示

了解 mark.js

mark.js 是用 JavaScript 编写的文本荧光笔。它可用于动态标记搜索词或自定义正则表达式，并为您提供内置选项，如变音符号支持、单独的单词搜索、自定义同义词、iframe 支持、自定义过滤器、准确性定义、自定义元素、自定义类名等。

看多么简单，你不需要超过十行，框架已经准备好了，一切都为你做，可以自定义你的代码，只需进入官方页面查看文档和示例。失败的机会要低得多，而且你已经第一次就做对了。只需放置依赖项即可轻松使用。

$(function() {
  var $input = $("#search"), $context = $("p");  
  $input.on("input", function() {
    var term = $(this).val();
    $context.show().unmark();
    if (term) {
      $context.mark(term);
    }
  });
});

mark {
    color: black;
    background: greenyellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js">
</script>
<input id="search" type="text" />
<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>

为什么使用自制突出显示功能是个坏主意：

• https://stackoverflow.com/a/37364325/5626568

Answer 2

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

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

请看下面的片段：

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。