JavaScript需遍历文本节点，用正则匹配术语库（如{"DOM":"Document Object Model"}）并以带title的span替换，避免操作innerHTML破坏状态，异步加载术语库防阻塞，且须跳过script/style/textarea节点。
HTML 本身不提供术语翻译或高亮功能，必须靠 JavaScript 配合预定义的术语库实现。直接写 <span class="term">DOM</span> 手动加标签只能应付静态页面，真要“匹配+高亮+提示”，得走 DOM 遍历 + 正则匹配 + title 或 data-tooltip 注入的路子。
怎么用 JavaScript 自动匹配并高亮 HTML 中的专业词汇
核心是遍历文本节点，对每个文本内容做术语词典的精确/模糊匹配，再用 document.createElement('mark') 或带 title 的 span 替换原内容。注意不能直接操作 innerHTML，否则会清空事件监听器、破坏表单状态。
- 优先用
TreeWalker或递归Node.childNodes遍历，过滤出Node.TEXT_NODE - 术语库建议用对象字面量：
{ "DOM": "Document Object Model", "API": "Application Programming Interface" }，键为原文，值为译文 - 匹配时加词边界（
\bDOM\b），避免把DOMinate也标中；若需支持大小写不敏感，正则加i标志 - 替换前先
split()再逐段重建节点，保留原始结构
为什么 mark 标签不适合做术语提示，而要用 span + title
mark 只负责视觉高亮，没有语义化提示能力；鼠标悬停看不到译文。真正可用的是 span 套一层，加上 title 属性——浏览器原生支持 hover 显示，无需额外 CSS 或 JS。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<span title="Document Object Model">DOM</span>是最轻量、兼容性最好的方案（IE6+ 支持） - 如果需要更丰富的提示（比如带 HTML、分段释义），就得用
data-tooltip+ 自定义浮层，但必须监听mouseenter并手动创建div插入body - 避免给
mark加title：部分浏览器（如旧版 Safari）不渲染mark[title]的提示
术语库 JSON 怎么加载才不影响首屏渲染
术语库体积稍大（比如 500+ 条），同步 fetch 或内联在 HTML 里都会阻塞解析。得用 async 脚本 + DOMContentLoaded 后加载，或干脆做成按需加载。
立即学习“前端免费学习笔记（深入）”；
- 把术语 JSON 放独立文件，用
fetch('/glossary.json').then(r => r.json())异步获取 - 首次匹配前先检查
window.glossary是否已存在，有就跳过请求（方便服务端提前注入） - 匹配逻辑封装成函数，等术语库 ready 后再执行，避免空跑
- 别在
head里放script src同步加载术语库——它不是关键资源
术语匹配看似简单，实际卡点常在正则边界处理、文本节点拆分逻辑、以及术语库加载时机。最容易被忽略的是：没排除 script、style、textarea 这些节点的内容，结果把代码字符串里的 API 也标红了。
