问如何在不显示html标记的情况下从输入中筛选和标记单词？
EN

Stack Overflow用户

提问于 2020-04-04 05:17:49

回答 3查看 148关注 0票数 2

我正在尝试从网页中过滤和标记word，Sajeeb add慷慨地帮助我编写了一段完全符合我要求的代码，但是当我在清除输入框时添加和其他元素标记(如列表项或标题标记)时，它会显示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>

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

谢谢

javascript

jquery

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-04-04 05:27:18

它使用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>

你需要在深孩子身上应用改变。并删除开始时的类高亮显示。

票数 1

Stack Overflow用户

发布于 2020-04-04 14:47:48

最干净的方法是rest div和start again。所以在开始之前，我选择了snapshot of div和save it。每次数据change i reconstruct它。易于理解和缩放。

建议：用户界面应该是数据驱动的.不是HTML/内容驱动的。您可以创建一个数据列表，并对每个更改进行构造。

检查了我的第二个示例

不改变状态/UIReact

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

票数 1

Stack Overflow用户

发布于 2020-04-07 08:55:42

嗨，伙计们，我找到了我要找的东西，感谢这里的大人物们的帮助和大量的头部敲击，这个脚本适用于本地网页搜索和筛选，它必须与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>