Javascript 过滤 HTML 超链接？

Question

我正在尝试在用于工作项目的 HTML 页面中实现一个简单的 javascript 过滤器。它应该允许用户在输入字段中输入关键字，然后除了名称与关键字匹配的超链接之外的所有内容都将被删除。

我找到了一个 jquery 示例，但是它没有按我需要的方式工作。

它成功地过滤掉了不匹配的超链接，但我也希望删除所有其他元素。我只想要一个匹配链接列表，每行一个。

这是我添加了搜索过滤器代码的 HTML 代码：https://jsfiddle.net/0gydcwm6/

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".TreeView a").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

<input id="myInput" type="text" placeholder="Search..">

编辑：我无法重构 HTML，因为它在运行时动态地拉入 HTML。但是，我仍然可以在创建链接列表的调用周围添加代码。我正在尝试解决已经存在的问题。另外，我不太熟悉 Javascript，所以我现在只是即兴发挥。另外，我并没有与这个 jquery 代码结婚——我只是想找到一些有用的东西。

Answer 1

document.addEventListener("DOMContentLoaded", () => {

const $input = document.querySelector("#search");
$input.addEventListener("input", (e) => {
 
  const $treeview = document.querySelector(".treeview");
  const typed_txt = e.target.value || '';
  if (typed_txt === ''){
    document.querySelectorAll(".treeview img").forEach(($img) => $img.classList.remove("hide"));
    return;
  }
    
  [...$treeview.children].forEach(($child) => $child.classList.add("hide"));
  [...document.querySelectorAll(".treeview a")].forEach(($anchor) => {
    const match = $anchor.textContent.match(new RegExp("^" + typed_txt, 'i'));
    if (match) $anchor.classList.remove("hide");
    if ($anchor.children)
      [...$anchor.children].forEach(($child) => $child.classList.add("hide"));
  });
 
});


});

.column {
  display: flex;
  flex-flow: column;
}

.hide {
  display: none;
}

<input type="text" id="search">

<div class="treeview column">
  <a><img src="example.png">TEXT</a>
  <img src="example.png">
  <a><img src="example.png">TEXTING</a>
  <a><img src="example.png">TEXTED</a>
  <a><img src="example.png">TEXTS</a>
</div>