动态高亮错误提示的核心是安全操作文本节点而非innerHTML：须用textContent提取纯文本，createTreeWalker遍历TEXT_NODE，正则元字符转义，replaceChild插入mark，并normalize合并节点。
直接用 innerHTML.replace() 往页面里塞 <mark></mark> 或 <span class="error"></span>，90% 情况下会把 DOM 撕开、触发 XSS、让中文词断在中间，甚至让 <script></script> 标签意外执行。动态高亮错误提示，核心不是“怎么标红”，而是“怎么安全地只碰文本、不碰结构”。
为什么不能对 innerHTML 做正则替换
浏览器把 innerHTML 当纯字符串处理，但里面混着标签、属性、事件监听器。你搜 "error"，可能把 <div class="error-message"> 里的 <code>error 也包进去；搜 "." 或 "+"，正则直接报错中断；更危险的是，用户输入含 <script>alert(1)</script>，innerHTML 一赋值就执行。
- DOM 解析失败：替换后出现
<p><mark>abc</mark></p>看似正常，但若关键词含"，会生成非法嵌套如 <code>p> - 中文无空格时边界错乱：
"用户名错误"被拆成"用户<mark>名错</mark>误"，语义全毁 -
innerText会吞掉display: none内容，但保留换行缩进，导致高亮位置偏移；textContent才是唯一能安全提取纯文本的 API
必须只操作文本节点（Node.TEXT_NODE）
真实项目中，高亮动作必须限定在人类可读的纯文本片段上，跳过所有元素、注释、脚本节点。这是避免 DOM 撕裂和 XSS 的底线。
立即学习“前端免费学习笔记（深入）”；
- 用
document.createTreeWalker(element, NodeFilter.SHOW_TEXT)遍历，比querySelectorAll('*')+childNodes更可靠 - 循环中加过滤：
if (!node.textContent.trim()) continue，跳过空白文本节点（比如换行、缩进产生的空格） - 关键词含正则元字符（
.、?、[等）时，必须先转义：keyword.replace(/[.*+?^${}()|[]\]/g, '\$&') - 匹配后创建新节点：
const mark = document.createElement('mark');，设mark.textContent = match，再用node.parentNode.replaceChild(mark, node) - 每次替换后调用
node.parentNode.normalize()，合并相邻文本节点，防止下次搜索重复高亮
错误提示高亮要区分场景和来源
表单验证错误、接口返回错误、运行时 JS 错误，三者高亮方式完全不同——混用会导致样式冲突、语义丢失、可访问性失效。
- 表单原生错误：靠
input.reportValidity()触发气泡提示，配合:invalidCSS 伪类控制样式；手动高亮需调用setCustomValidity("xxx")并更新.error-message容器的textContent - 接口错误消息：后端返回的
message字段必须 HTML 转义后再写入提示容器，严禁拼进innerHTML；推荐用document.createElement('span').textContent = msg+container.appendChild(span) - JS 运行时错误：用
window.onerror捕获，提取error.message后走同上路径；若要高亮错误堆栈中的某行代码，必须先解析堆栈字符串，再对对应行号的 DOM 文本节点单独操作
mark 标签不是“加个黄底”那么简单
<mark></mark> 在 Windows 高对比度模式、Outlook 邮件、CSS 重置环境下默认样式完全不可见。不写显式 CSS 就上线，等于放弃可访问性。
- 必须同时声明
background-color和color，否则深色主题下文字变黑底黑字 - 禁用
background: none—— 它不清除background-image，应写background-color: transparent - 加
padding和border-radius是刚需，原生mark紧贴文字边缘生硬，易误读 - 多关键词高亮时按长度降序处理，否则
"JavaScript"和"Script"会嵌套错乱：<mark>Java<mark>Script</mark></mark>
真正难的不是写出高亮逻辑，而是判断哪一段 DOM 是“可安全操作的文本”，以及如何在用户输入任意符号、中文无空格、服务端返回恶意内容的前提下，保证页面不崩、提示不丢、屏幕阅读器能读出来。这些边界条件，往往在上线后第一周才暴露。
