如何实现JavaScript过滤器：仅保留匹配关键词的HTML超链接并移除其余元素

核心思路是先预存所有目标链接的文本和跳转地址，当用户输入关键词时，清空容器内容，只重新渲染符合匹配条件的链接，这样就能彻底移除所有非匹配元素，同时保证每个链接单独一行。

原生JavaScript方案 #

无需依赖第三方库，直接用原生JS实现：

<input id="myInput" type="text" placeholder="Search..">
<div class="TreeView">
  <!-- 动态生成的内容会在这里 -->
</div>

<script>
// 存储所有链接的原始数据（文本+跳转地址）
let allLinks = [];

// 初始化链接数据，需放在动态生成链接的代码之后执行
function initLinkData() {
  allLinks = [];
  const links = document.querySelectorAll('.TreeView a');
  links.forEach(link => {
    allLinks.push({
      text: link.textContent.trim(),
      href: link.href
    });
  });
}

// 监听输入框的关键词输入
document.addEventListener('DOMContentLoaded', function() {
  // 如果链接是页面加载时就生成的，直接调用初始化
  initLinkData();

  const input = document.getElementById('myInput');
  input.addEventListener('keyup', function() {
    const keyword = this.value.toLowerCase();
    const container = document.querySelector('.TreeView');
    // 清空容器里的所有内容
    container.innerHTML = '';

    // 过滤并渲染匹配的链接
    allLinks.forEach(linkData => {
      if (linkData.text.toLowerCase().includes(keyword)) {
        const aTag = document.createElement('a');
        aTag.href = linkData.href;
        aTag.textContent = linkData.text;
        // 用div包裹实现单独一行，也可以把a设为block级元素
        const wrapper = document.createElement('div');
        wrapper.appendChild(aTag);
        container.appendChild(wrapper);
      }
    });
  });
});

// 示例：如果链接是动态生成的，生成后要执行初始化
// generateDynamicLinks(); 
// initLinkData();
</script>

jQuery方案 #

如果习惯用jQuery，逻辑和原生一致：

<input id="myInput" type="text" placeholder="Search..">
<div class="TreeView">
  <!-- 动态生成的内容会在这里 -->
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
let allLinks = [];

function initLinkData() {
  allLinks = [];
  $('.TreeView a').each(function() {
    allLinks.push({
      text: $(this).text().trim(),
      href: $(this).attr('href')
    });
  });
}

$(document).ready(function() {
  // 初始化链接数据
  initLinkData();

  $('#myInput').on('keyup', function() {
    const keyword = $(this).val().toLowerCase();
    const $container = $('.TreeView');
    // 清空容器
    $container.empty();

    // 过滤并渲染匹配项
    $.each(allLinks, function(index, linkData) {
      if (linkData.text.toLowerCase().includes(keyword)) {
        const $link = $('<a>').attr('href', linkData.href).text(linkData.text);
        $container.append($('<div>').append($link));
      }
    });
  });
});

// 示例：动态生成链接后要执行初始化
// generateDynamicLinks(); 
// initLinkData();
</script>

关键注意点 #

• 如果链接是动态生成的（比如通过接口请求或其他函数生成），一定要在生成链接的代码执行完成后，调用initLinkData()更新链接数据，否则会漏掉新生成的链接。
• 用div包裹链接或者设置a标签的display: block样式，都能实现“每个链接单独一行”的效果，按需选择即可。
• 这种方式会完全替换容器内的内容，所有非匹配元素（包括文本、其他标签等）都会被移除，只保留符合条件的链接。

内容的提问来源于stack exchange，提问作者TheDewd