本文介绍一种不依赖 jQuery 的纯 JavaScript 方案，用于实时过滤 HTML 页面中的超链接：仅保留 a 标签中文本内容严格以搜索关键词开头的链接，并自动隐藏所有其他元素（包括非匹配链接、图片、文本节点等），最终呈现简洁的单列匹配链接列表。
本文介绍一种不依赖 jquery 的纯 javascript 方案，用于实时过滤 html 页面中的超链接：仅保留 `a` 标签中文本内容**严格以搜索关键词开头**的链接，并自动隐藏所有其他元素（包括非匹配链接、图片、文本节点等），最终呈现简洁的单列匹配链接列表。
在实际项目中，尤其是基于动态渲染的树形结构（如 .treeview 容器），我们常需对已生成的 DOM 进行“二次筛选”——而非重构 HTML 或重写数据逻辑。此时，核心需求有三点：
- 精准匹配：仅保留 <a> 标签内文本以用户输入关键词开头（而非模糊包含）的链接；
- 彻底净化：隐藏所有非匹配 <a> 元素，同时移除同级的其他标签（如 <img>、纯文本、空节点等）；
- 零依赖 & 可维护：使用原生 DOM API，避免引入 jQuery，适配现代浏览器，代码清晰易调试。
以下为完整实现方案：
✅ 核心逻辑说明
- 使用 DOMContentLoaded 确保 DOM 加载完成后再绑定事件；
- 监听 input 事件（比 keyup 更健壮，支持粘贴、语音输入等场景）；
- 当输入为空时，恢复所有子元素可见性；
- 当有输入时：
- 先隐藏 .treeview 下所有直接子元素；
- 再遍历所有 <a> 标签，用正则 new RegExp("^" + typed_txt, 'i') 判断其 textContent 是否不区分大小写地以关键词开头；
- 对匹配的 <a> 移除 .hide 类，并确保其内部子元素（如图标 <img>）也被隐藏（避免干扰视觉）；
- 配合 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><img src="icon.png" alt="icon">Documentation</a>
<img src="spacer.png" alt="spacer">
<a><img src="icon.png" alt="icon">Download</a>
<a><img src="icon.png" alt="icon">API Reference</a>
<a><img src="icon.png" alt="icon">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'); - 性能考量：对于超大列表（>500 条链接），可添加防抖（debounce）避免高频重绘；
- 无障碍支持：建议为 <input> 添加 aria-label，并确保隐藏后仍可通过屏幕阅读器感知状态变化；
- 扩展性：如需支持“包含”或“结尾匹配”，只需修改正则（如 .*${safePattern} 或 ${safePattern}$）。
该方案轻量、可靠、无需框架，完美适配已有 HTML 结构，是动态内容环境下实现链接精准过滤的理想实践。
