纯 JavaScript 实现 HTML 超链接精准过滤与结果精简展示-html教程-PHP中文网

本文介绍如何使用原生 JavaScript（无需 jQuery）动态过滤 HTML 页面中的超链接，仅保留 textContent 以用户输入关键词开头的元素，并彻底隐藏其他所有非匹配元素，最终呈现干净、单行排列的匹配链接列表。

本文介绍如何使用原生 javascript（无需 jquery）动态过滤 html 页面中的超链接，仅保留 `textcontent` 以用户输入关键词开头的 `` 元素，并彻底隐藏其他所有非匹配元素，最终呈现干净、单行排列的匹配链接列表。

在实际项目中，尤其是面对动态生成的 HTML 结构（如企业内部文档树、CMS 输出或第三方组件嵌入），我们常需在不修改原始 DOM 结构的前提下，实现“关键词驱动的链接聚焦显示”。此时，jQuery 的 .filter() 仅做显隐切换，无法满足“完全移除无关节点”的需求；而直接操作 innerHTML 或 removeChild() 又易破坏事件绑定或引发重排性能问题。更稳健的做法是：统一隐藏全部子元素，再针对性显示匹配链接。

以下是一个轻量、兼容性好（支持 IE11+）、无外部依赖的解决方案：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

✅ 核心逻辑说明

监听 input 事件（比 keyup 更实时，支持粘贴/语音输入）；
获取 .treeview 容器及其全部直系子元素；
若搜索框为空，清除所有 .hide 类以恢复原始视图；
否则：先为所有子元素添加 .hide 类；再遍历所有标签，仅对 textContent 严格以关键词开头（区分大小写不敏感）的链接移除 .hide 类；
额外处理：若内含图片等子元素，确保仅链接本身可见，其子节点不干扰匹配逻辑（代码中已通过 forEach($child => $child.classList.add("hide")) 实现）。

? 完整可运行代码

<style>
.column {
  display: flex;
  flex-flow: column;
}
.hide {
  display: none;
}
/* 可选：增强可读性 */
.treeview a {
  margin: 4px 0;
  padding: 2px 6px;
  text-decoration: none;
  color: #1a73e8;
}
.treeview a:hover {
  text-decoration: underline;
}
</style><input type="text" id="search" placeholder="Search links by start-of-text..."><div class="treeview column">
  <a>@@##@@Documentation</a>
  @@##@@
  <a>@@##@@API Reference</a>
  <a>@@##@@Tutorial Guide</a>
  <a>@@##@@FAQ Section</a>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
  const $input = document.querySelector("#search");
  const $treeview = document.querySelector(".treeview");

  $input.addEventListener("input", (e) => {
    const typed_txt = e.target.value.trim();

    // 清空搜索时恢复全部内容
    if (typed_txt === "") {
      $treeview.querySelectorAll("*").forEach(el => el.classList.remove("hide"));
      return;
    }

    // 隐藏所有直系子元素
    $treeview.children.forEach(child => child.classList.add("hide"));

    // 查找匹配的 <a> 标签（textContent 严格以 typed_txt 开头）
    const regex = new RegExp(`^${typed_txt}`, 'i');
    $treeview.querySelectorAll("a").forEach(anchor => {
      if (regex.test(anchor.textContent)) {
        anchor.classList.remove("hide");
        // 确保 anchor 内部子元素（如 img）不意外显示
        anchor.children.forEach(child => child.classList.add("hide"));
      }
    });
  });
});
</script>

⚠️ 注意事项与最佳实践

正则安全处理：当前示例未对用户输入做转义。若关键词含正则元字符（如 .、*、(），需先调用 typed_txt.replace(/[.*+?^${}()|[]\]/g, '\$&') 防止语法错误；
性能优化：对于超大链接列表（>500 条），建议添加防抖（debounce）——例如使用 setTimeout 延迟执行过滤，避免高频重绘；
无障碍支持：添加 aria-live="polite" 到 .treeview 容器，配合屏幕阅读器提示结果数量变化；
样式隔离：.hide 使用 display: none 是最可靠隐藏方式，避免 visibility: hidden 或 opacity: 0 导致占位或交互残留。

该方案完全规避了 DOM 重构风险，适配动态 HTML 场景，且代码简洁、语义清晰，可直接集成至现有项目中作为可复用的搜索模块。