mark标签需手动高亮关键词，应使用document.createTreeWalker遍历纯文本节点并用DOM方法替换，避免innerHTML操作；RegExp.escape需手动实现元字符转义；多关键词按长度降序处理；中文搜索需用正向断言防止误匹配。
mark 标签不会自动高亮页面中已有的关键词——你得自己找、切、包、换。
用 document.createTreeWalker 遍历文本节点，别碰 innerHTML
直接对 innerHTML 做 replace() 是最常见也最危险的做法：会清空事件监听器、重置表单值、破坏嵌套结构，甚至把 <img src="logo.png" alt="HTML关键词动态高亮怎么弄？快速制作流程" > 搞成 <img src="<mark>logo</mark>.png" alt="HTML关键词动态高亮怎么弄？快速制作流程" >。正确路径是只操作纯文本节点：
- 用
document.createTreeWalker(element, NodeFilter.SHOW_TEXT)获取所有文本节点 - 跳过空节点和全空白节点（
node.nodeValue.trim() === ''） - 对每个
node.textContent执行匹配，不走字符串拼接，而是用 DOM 方法组装 - 匹配成功后，用
node.replaceWith(...)替换整个文本节点，不是改innerHTML
RegExp.escape 必须手动补，关键词含 . * [ 会直接报错
浏览器没原生 RegExp.escape，不处理就炸：
- 用户搜
cat[0]→new RegExp('cat[0]')报SyntaxError: Invalid regular expression - 用户搜
5.99→ 点号被当通配符，匹配任意字符 - 修复方式：用
keyword.replace(/[.*+?^${}()|[]\]/g, '\$&')转义元字符 - 如果还要支持多关键词，记得按长度从长到短排序，避免短词截断长词（如先匹配
JavaScript，再匹配Script）
中文搜索要加 Unicode 边界，否则“服务”会把“服务器”也高亮
英文可用 \b，但中文没有天然词边界，/服务/gi 会命中“微服务”“服务器”“服务端”，影响可读性：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
- 简单有效方案：用正向断言限定上下文，比如
/(? -
\u4e00-\u9fa5覆盖常用汉字，\s匹配空格换行，^/$处理开头结尾 - 注意：IE 不支持
?，若需兼容，改用 <code>matchAll+ 手动比对索引位置 - 不建议用分词库——轻量级高亮场景下，这个正则已足够稳
mark 样式必须显式写死，别信浏览器默认黄色
默认背景在很多环境里根本不可见：
- Safari 阅读模式剥离 UA 样式，
mark变透明 - Windows 高对比度模式强制重置未声明的
background-color - 深色主题下
#ff0和深灰背景对比度低于 WCAG AA（要求 ≥4.5:1） - 邮件客户端（Outlook）完全忽略 UA 默认值
- 至少写明：
mark { background-color: #ffeb3b; color: #212121; }
真正容易被忽略的是：高亮逻辑一旦触发，就得同步清理旧 mark；否则 AJAX 多次返回、用户反复搜索，mark 会无限嵌套，最终 DOM 结构崩坏。
