mark标签必须插在最终匹配到的数据文本节点内部，即筛选完成后遍历符合条件的DOM元素内文本节点，用TreeWalker精准高亮关键词，而非拼接innerHTML或误放于按钮/表头中。
多条件筛选时，mark 标签该插在哪一层？
不是插在筛选按钮上，也不是插在表格表头里——mark 必须出现在最终匹配到的**数据文本节点内部**。比如用户选了「品牌：Nike」+「价格：100-500」，高亮的是商品名里出现的 “Nike”，或价格单元格中 “100-500” 这串字符，而不是按钮文字本身。
常见错误是把筛选条件直接套 <mark>Nike</mark> 写进按钮 HTML 里，这属于语义错位：mark 表示“当前上下文中的匹配结果”，不是“我点了这个选项”。它只对搜索命中、内容片段匹配负责。
- 筛选逻辑跑完后，拿到所有符合条件的
<tr> 或 <code><div data-category> 元素 <li>再遍历这些元素内的文本节点（用 <code>document.createTreeWalker(element, NodeFilter.SHOW_TEXT)） - 仅对其中包含当前关键词的部分做高亮，其他文本保持原样
- 正则未转义元字符：如果某个关键词是
shoes[2024]，[会让new RegExp()直接报错 - 匹配重叠/截断：先标 “running”，再标 “run” 就可能把
<mark>running</mark>变成<mark><mark>run</mark>ning</mark>，DOM 结构嵌套错乱 - HTML 上下文污染：原文是
<a href="nike-running.html">Nike Running</a>，替换后变成<a href="<mark>nike</mark>-<mark>running</mark>.html">...</a>，链接失效
innerHTML.replace() 在多条件场景下为什么必崩？
多条件意味着关键词不止一个，比如用户同时搜 “Nike” 和 “running”，若还用 element.innerHTML = element.innerHTML.replace(/Nike|running/gi, '<mark>$</mark>')，会立刻触发三类问题：
正确做法是：先收集所有关键词 → 按长度从长到短排序 → 对每个文本节点逐个安全匹配并插入 mark 元素，不拼字符串。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
样式写不全，mark 在暗色模式或 Outlook 里就等于没写
浏览器默认的黄色背景（#ff0）在真实环境中几乎不可见：Windows 高对比度模式下被强制清空；Safari 阅读模式剥离 UA 样式；Outlook 等邮件客户端压根不认；深色主题下与背景对比度低于 WCAG AA 要求。
必须显式声明至少三项：
mark {
background-color: #ffeb3b;
color: #212121;
padding: 0.1em 0.3em;
}
@media (prefers-color-scheme: dark) {
mark {
background-color: #ffca28;
color: #121212;
}
}
别省略 color —— 某些系统会继承父级深色文字，导致黄底+黄字；也别依赖 border-radius 做视觉区分，它不能解决可访问性问题。
中文关键词高亮要不要加 \b 单词边界？
不要。中文没有空格分隔，\b 在中文环境基本无效，强行加反而导致匹配失败。但要注意两个实际坑点：
- 全角/半角不一致：用户搜 “JavaScript”，页面里是 “javascript” 或 “ＪａｖａＳｃｒｉｐｔ”（全角），必须统一转小写 + 清洗空格（
.replace(/[\s\uFEFF\xA0]+/g, ' ')）再比对 - 标点干扰：用户搜 “iPhone 15”，页面里是 “iPhone15”（无空格），需支持模糊容错，不能只靠严格
=== - 多关键词共存时，避免短词覆盖长词：先处理 “iPhone 15 Pro”，再处理 “iPhone”，否则 “Pro” 可能被漏掉
最易被忽略的是：高亮操作必须在筛选完成、DOM 已稳定渲染之后再执行——如果边 filter 边高亮，或在 requestAnimationFrame 外直接操作，容易因节点未挂载而静默失败。
