如何用原生 JavaScript 实现 HTML 中超链接的精准过滤与内容净化-html教程-PHP中文网

如何用原生 JavaScript 实现 HTML 中超链接的精准过滤与内容净化

本文介绍一种不依赖 jQuery 的纯 JavaScript 方案，用于实时过滤 HTML 页面中的超链接：仅保留 a 标签中文本内容严格以搜索关键词开头的链接，并自动隐藏所有其他元素（包括非匹配链接、图片、文本节点等），最终呈现简洁的单列匹配链接列表。

本文介绍一种不依赖 jquery 的纯 javascript 方案，用于实时过滤 html 页面中的超链接：仅保留 `a` 标签中文本内容**严格以搜索关键词开头**的链接，并自动隐藏所有其他元素（包括非匹配链接、图片、文本节点等），最终呈现简洁的单列匹配链接列表。

在实际项目中，尤其是基于动态渲染的树形结构（如 .treeview 容器），我们常需对已生成的 DOM 进行“二次筛选”——而非重构 HTML 或重写数据逻辑。此时，核心需求有三点：

精准匹配：仅保留标签内文本以用户输入关键词开头（而非模糊包含）的链接；
彻底净化：隐藏所有非匹配元素，同时移除同级的其他标签（如、纯文本、空节点等）；
零依赖 & 可维护：使用原生 DOM API，避免引入 jQuery，适配现代浏览器，代码清晰易调试。

以下为完整实现方案：

Wechat HTML Publisher

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

下载

✅ 核心逻辑说明

使用 DOMContentLoaded 确保 DOM 加载完成后再绑定事件；
监听 input 事件（比 keyup 更健壮，支持粘贴、语音输入等场景）；
当输入为空时，恢复所有子元素可见性；
当有输入时：
- 先隐藏 .treeview 下所有直接子元素；
- 再遍历所有标签，用正则 new RegExp("^" + typed_txt, 'i') 判断其 textContent 是否不区分大小写地以关键词开头；
- 对匹配的移除 .hide 类，并确保其内部子元素（如图标）也被隐藏（避免干扰视觉）；
配合 CSS .hide { display: none; } 实现高效显隐控制。

? 完整可运行代码

<style>
.column {
  display: flex;
  flex-flow: column;
}
.hide {
  display: none;
}
</style><input type="text" id="search" placeholder="Search links (starts with)..."><div class="treeview column">
  <a>@@##@@Documentation</a>
  @@##@@
  <a>@@##@@Download</a>
  <a>@@##@@API Reference</a>
  <a>@@##@@Dashboard</a>
  <span>Other content</span>
</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> 标签（文本内容严格以关键词开头）
    const regex = new RegExp(`^${typed_txt}`, 'i');
    document.querySelectorAll(".treeview a").forEach($anchor => {
      if (regex.test($anchor.textContent)) {
        $anchor.classList.remove("hide");
        // 可选：隐藏该链接内的子元素（如图标），仅保留链接语义
        $anchor.children.forEach(child => child.classList.add("hide"));
      }
    });
  });
});
</script>

⚠️ 注意事项与优化建议

安全性提醒：示例中未对用户输入做转义。若关键词含正则特殊字符（如 .、*、$），需先转义：

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[]\]/g, '\$&');
}
const safePattern = escapeRegExp(typed_txt);
const regex = new RegExp(`^${safePattern}`, 'i');