如何在不显示 html 标记的情况下过滤和标记输入中的单词？

Question

我正在尝试过滤和标记网页中的单词，Sajeeb Ahamed 慷慨地帮助我编写了一段完全符合我想要的功能的代码，但是当我添加其他元素标签（例如列表项或标题标签）时，当我清除输入框显示 HTML 标记。

$(document).ready(function() {

  $("#myInput").on("keyup", function() {

    var value = $(this).val().toLowerCase();

    $("#myDIV>*").map(function() {

      var el = $(this);

      var content = el.html().replace(/(<span class="highlighted">)|(<\/span>)/g, "");

      el.html(content);

      var hasText = el.text().toLowerCase().indexOf(value) > -1;

      el.toggle(hasText);

      if (hasText) {

        // escape value for use in regex

        var textRegex = new RegExp(value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g");

        el.html(content.replace(textRegex, '<span class="highlighted">$&</span>'));

      }

    });

  });

});

.highlighted {

  background-color: yellow;

}

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

<input id="myInput" />

<!-- the new search -->

<div id="myDIV">

  <p>This is a test</p>

  <ul>

    <li>This is a list item</li>

    <li>This is a another list item</li>

  </ul>

  <a href="">This is a link</a>

</div>

这是代码，它只接受段落标签。有人知道为什么吗？

Answer 1

它适用于第一级（不深）具有 id 'myDIV' 的元素内的任何元素，因为您正在使用此选择器$("#myDIV>*")。确保您的标签符合此规则。更新新信息$(document).ready(function() {&nbsp; $("#myInput").on("keyup", function() {&nbsp; &nbsp; var value = $(this).val().toLowerCase();&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Remove all class="highlighted" inside #myDIV&nbsp;&nbsp; &nbsp; $("#myDIV").html($("#myDIV").html().replace(/(<span class="highlighted">)|(<\/span>)/g, ""))&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $("#myDIV *").map(function() {&nbsp; &nbsp; &nbsp; &nbsp; var el = $(this);&nbsp; &nbsp; &nbsp; &nbsp; // Only in deep children aplly your logic&nbsp; &nbsp; &nbsp; &nbsp; if (el.children().length == 0) {&nbsp; &nbsp; &nbsp; &nbsp; var content = el.html().replace(/(<span class="highlighted">)|(<\/span>)/g, "");&nbsp; &nbsp; &nbsp; &nbsp; el.html(content);&nbsp; &nbsp; &nbsp; &nbsp; var hasText = el.text().toLowerCase().indexOf(value) > -1;&nbsp; &nbsp; &nbsp; &nbsp; el.toggle(hasText);&nbsp; &nbsp; &nbsp; &nbsp; if (hasText) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // escape value for use in regex&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var textRegex = new RegExp(value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el.html(content.replace(textRegex, '<span class="highlighted">$&</span>'));&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; });});.highlighted {&nbsp; background-color: yellow;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input id="myInput" /><!-- the new search --><div id="myDIV">&nbsp; <p>This is a test</p>&nbsp; <ul>&nbsp; &nbsp; <li>This is a list item</li>&nbsp; &nbsp; <li>This is a another list item</li>&nbsp; </ul>&nbsp; <a href="">This is a link</a></div>您需要对深度儿童应用更改。并在开始时删除课程突出显示

Answer 2

最干净的方法，rest div并且start again. 所以在开始之前，我拿了snapshot of div和save it。每次数据change我reconstruct它。易于理解和扩展。建议： UI 应该是数据驱动的。不是 HTML/内容驱动的。您可以创建数据列表并根据每次更改进行构建。查看我的第二个例子不要改变状态/UI[React]$(document).ready(function () {&nbsp; const div = $("#myDIV").html();&nbsp; $("#myInput").on("keyup", function () {&nbsp; &nbsp; var value = $(this).val().toLowerCase();&nbsp; &nbsp; $("#myDIV").html(div); //Reset&nbsp; &nbsp; const p = $("#myDIV p");&nbsp; &nbsp; var hasText = p.text().toLowerCase().indexOf(value) > -1;&nbsp; &nbsp; hasText && highlight(p, value);&nbsp; &nbsp; $("#myDIV li").map(function () {&nbsp; &nbsp; &nbsp; var el = $(this);&nbsp; &nbsp; &nbsp; var hasText = el.text().toLowerCase().indexOf(value) > -1;&nbsp; &nbsp; &nbsp; if (hasText) {&nbsp; &nbsp; &nbsp; &nbsp; highlight(el, value);&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; el.remove();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; });});function highlight(elm, text) {&nbsp; elm.html(&nbsp; &nbsp; elm&nbsp; &nbsp; &nbsp; .html()&nbsp; &nbsp; &nbsp; .replace(new RegExp(`(${text})`), '<span class="highlighted">$1</span>')&nbsp; );}.highlighted {&nbsp; background-color: yellow;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input id="myInput" /><!-- the new search --><div id="myDIV">&nbsp; &nbsp; <p>This is a test</p>&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li>This is a list item</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>This is a another list item</li>&nbsp; &nbsp; </ul>&nbsp; &nbsp; <a href="">This is a link</a></div>使用数据驱动的方法。$(document).ready(function () {&nbsp; const list = ["This is a list item", "This is a another list item"];&nbsp; function buildUi(keyword) {&nbsp; &nbsp; $("#filter .list").html("")&nbsp; &nbsp; list.forEach((text) => {&nbsp; &nbsp; &nbsp; if (!keyword || text.toLowerCase().indexOf(keyword) !== -1) {&nbsp; &nbsp; &nbsp; &nbsp; text = text.replace(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new RegExp(`(${keyword})`),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<span class="highlighted">$1</span>'&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; const li = $(`<li>${text}</li>`);&nbsp; &nbsp; &nbsp; $("#filter .list").append(li);&nbsp; &nbsp; });&nbsp; }&nbsp; buildUi("");&nbsp; $("#myInput").on("keyup", function () {&nbsp; &nbsp; const keyword = $(this).val().toLowerCase()&nbsp; &nbsp; buildUi(keyword)&nbsp; });});.highlighted {&nbsp; background-color: yellow;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input id="myInput" /><!-- the new search --><div id="filter">&nbsp; &nbsp; <p>This is a test</p>&nbsp; &nbsp; <ul class="list">&nbsp; &nbsp; </ul>&nbsp; &nbsp; <a href="">This is a link</a></div>

Answer 3

大家好，我找到了我想要的东西，感谢这里各位大佬的帮助和大量的脑力劳动，这个脚本适用于本地网页搜索和过滤器，它必须与 jsquery mini 和 hilitor 一起运行。 js 文件。这对于外面的人来说应该是有价值的。祝各位编码愉快。<script src="../js/hilitor.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script>window.addEventListener("DOMContentLoaded", function(e) {&nbsp; &nbsp; var myHilitor2 = new Hilitor("playground");&nbsp; &nbsp; myHilitor2.setMatchType("left");&nbsp; &nbsp; document.getElementById("keywords").addEventListener("keyup", function(e) {&nbsp; &nbsp; &nbsp; myHilitor2.apply(this.value);&nbsp; &nbsp; }, false);&nbsp; }, false);$(document).ready(function(){&nbsp; $("#keywords").on("keyup", function() {&nbsp; &nbsp; var value = $(this).val().toLowerCase();&nbsp; &nbsp; $("#playground *").filter(function() {&nbsp; &nbsp; &nbsp; $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)&nbsp; &nbsp; });&nbsp; });});</script><label>Search And Filter</label><input id="keywords" type="text" placeholder="Search And Filter.." onKeyDown="if(event.keyCode === 32) return false;"><div id="playground" >&nbsp;<ul>&nbsp;<li>Hey diddle diddle,</li><li>The cat and the fiddle,</li><li>The cow jumped over the moon.</li><li>The little dog laughed to see such sport,</li><li>And the dish ran away with the spoon.</li>&nbsp;</ul></div>