如何在不显示 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() {

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

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

    

    // Remove all class="highlighted" inside #myDIV 

    $("#myDIV").html($("#myDIV").html().replace(/(<span class="highlighted">)|(<\/span>)/g, ""))

    

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

        var el = $(this);

        // Only in deep children aplly your logic

        if (el.children().length == 0) {

        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 2

最干净的方法，rest div并且start again. 所以在开始之前，我拿了snapshot of div和save it。每次数据change我reconstruct它。易于理解和扩展。

建议： UI 应该是数据驱动的。不是 HTML/内容驱动的。您可以创建数据列表并根据每次更改进行构建。

查看我的第二个例子

不要改变状态/UI[React]

$(document).ready(function () {

  const div = $("#myDIV").html();

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

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

    $("#myDIV").html(div); //Reset

    const p = $("#myDIV p");

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

    hasText && highlight(p, value);

    $("#myDIV li").map(function () {

      var el = $(this);

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

      if (hasText) {

        highlight(el, value);

      } else {

        el.remove();

      }

    });

  });

});

function highlight(elm, text) {

  elm.html(

    elm

      .html()

      .replace(new RegExp(`(${text})`), '<span class="highlighted">$1</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>

使用数据驱动的方法。

$(document).ready(function () {

  const list = ["This is a list item", "This is a another list item"];

  function buildUi(keyword) {

    $("#filter .list").html("")

    list.forEach((text) => {

      if (!keyword || text.toLowerCase().indexOf(keyword) !== -1) {

        text = text.replace(

          new RegExp(`(${keyword})`),

          '<span class="highlighted">$1</span>'

        );

      } else {

        return;

      }

      const li = $(`<li>${text}</li>`);

      $("#filter .list").append(li);

    });

  }

  buildUi("");

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

    const keyword = $(this).val().toLowerCase()

    buildUi(keyword)

  });

});

.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="filter">

    <p>This is a test</p>

    <ul class="list">

    </ul>

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

    var myHilitor2 = new Hilitor("playground");

    myHilitor2.setMatchType("left");

    document.getElementById("keywords").addEventListener("keyup", function(e) {

      myHilitor2.apply(this.value);

    }, false);

  }, false);

$(document).ready(function(){

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

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

    $("#playground *").filter(function() {

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });

  });

});

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

<ul>

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

 </ul>

</div>