index.html中的文本高亮搜索功能：HTML前端文本处理技巧-html教程-PHP中文网

不能直接用 innerhtml.replace() 做高亮，因其将 html 当纯字符串处理，导致标签误匹配、正则报错、dom 结构非法、表单值丢失、xss 漏洞等必然问题；安全做法是仅遍历并替换文本节点（node.text_node），配合 treewalker、正则转义、mark 元素动态插入及 normalize 处理。

index.html中的文本高亮搜索功能：html前端文本处理技巧

直接用 innerHTML.replace() 做高亮，页面大概率会崩——表单值清空、事件监听器丢失、XSS 漏洞、DOM 结构非法，不是“可能”，是“必然”。

为什么不能对 `innerHTML` 做正则替换

浏览器把 innerHTML 当纯字符串处理，但里面混着标签和文本。搜 a，可能把 <a href="...>%20%E9%87%8C%E7%9A%84%20a%20%E4%B9%9F%E5%8C%85%E8%BF%9B%E5%8E%BB%EF%BC%9B%E6%90%9C%20[%20%E6%88%96%20.%EF%BC%8C%E6%AD%A3%E5%88%99%E7%9B%B4%E6%8E%A5%E6%8A%A5%20Invalid%20regular%20expression%EF%BC%9B%E6%9B%B4%E7%B3%9F%E7%9A%84%E6%98%AF%EF%BC%8C<p>abc</p>%20%E5%8F%98%E6%88%90%20<p><mark>abc</mark></p>%20%E7%9C%8B%E4%BC%BC%E6%AD%A3%E5%B8%B8%EF%BC%8C%E4%BD%86%E4%B8%80%E6%97%A6%E6%90%9C%20p%EF%BC%8C%E5%B0%B1%E5%8F%98%E6%88%90%20p>abc<mark>p</mark>>%EF%BC%8CDOM%20%E9%9D%9E%E6%B3%95%EF%BC%8C%E9%A1%B5%E9%9D%A2%E7%99%BD%E5%B1%8F%E3%80%82

%0A

%E8%BF%99%E4%BA%9B%E4%B8%8D%E6%98%AF%E8%BE%B9%E7%BC%98%E6%83%85%E5%86%B5%EF%BC%9A%E7%94%A8%E6%88%B7%E8%BE%93%E5%85%A5%E5%B8%A6%E7%AC%A6%E5%8F%B7%E3%80%81%E4%B8%AD%E6%96%87%E6%97%A0%E7%A9%BA%E6%A0%BC%E5%88%86%E9%9A%94%E3%80%81%E5%8A%A8%E6%80%81%E5%86%85%E5%AE%B9%E5%90%AB%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC%E5%99%A8%E2%80%94%E2%80%94%E5%85%A8%E9%83%BD%E4%BC%9A%E5%87%BA%E4%BA%8B%E3%80%82

ColaOS

一款AI工具，主要用于首个有灵魂的智能体操作系统，适合需要提升相关任务效率的用户。

下载

%0A

%E8%A1%A8%E5%8D%95%E6%8E%A7%E4%BB%B6%EF%BC%88%E5%A6%82%20<input%20value="></a>）高亮后变纯文本，值彻底丢失
<script></script> 或 <textarea></textarea> 内容被误匹配，执行脚本或污染结构
原始文本跨多个元素（比如 <strong>React</strong> Native），正则切碎 DOM，导致 Range.surroundContents() 报 InvalidNodeTypeError

必须只操作 `Node.TEXT_NODE` 节点

安全做法是遍历并仅替换文本节点（nodeType === 3），跳过所有元素、注释、脚本、样式和 textarea 节点。

用 document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false) 创建遍历器，它天然过滤非文本节点
循环中加判断：if (!node.textContent.trim() || node.parentElement?.tagName === 'SCRIPT' || node.parentElement?.tagName === 'STYLE' || node.parentElement?.tagName === 'TEXTAREA') continue
对每个有效节点，用 node.nodeValue 做正则匹配，构造 new RegExp(escapedKeyword, 'gi')（注意先转义正则元字符）
匹配后用 document.createElement('mark') 包裹，再调用 node.parentNode.replaceChild(markEl, node) 替换，不拼 HTML 字符串
每次替换后立即执行 node.parentNode.normalize()，合并相邻文本节点，防止重复高亮

`mark` 标签的坑比你想象的多

mark 是唯一语义正确、可访问、且被搜索引擎识别的高亮方式，但它不是“写了就完事”。

IE 完全不识别 mark；旧版 Safari 渲染背景色不一致，且子元素（如 <strong></strong>）的 color 可能被父级 mark 覆盖
暗色模式下默认黄色背景不可读，必须写 @media (prefers-color-scheme: dark) { mark { background-color: #ffcc00; color: #111; } }
mark 是内联元素，若父容器有 white-space: pre-line 或 line-height 异常，会导致高亮块宽度突变、文字被截断、相邻 mark 间出现多余间隙
中文搜索要防“服务”匹配到“服务器”，不能依赖（对中文无效），得用 Unicode 边界模拟：/(?

关键词转义必须做两层

用户输入的搜索词既是 HTML 内容，又是正则模式，必须双重转义。

HTML 转义：防止 XSS，keyword.replace(/[&"'`=/]/g, c => `${c.charCodeAt(0)};`)
正则转义：防止 .、*、[ 等破坏匹配逻辑，keyword.replace(/[.*+?^${}()|[]\]/g, '\$&')
别用 String.prototype.replace() 的字符串替换形式（如 '<mark>$&</mark>'），容易被误解析；优先用函数回调：str.replace(regex, (match) => `<mark>${match}</mark>`)
多词搜索时，按长度从长到短排序关键词，避免短词截断长词（如先匹配 JavaScript，再匹配 Script）

最易被忽略的点：高亮后滚动定位如果对每个 mark 都调用 scrollIntoView()，低配设备上会卡顿；应只处理第一个可见匹配项，并加防抖。还有，手动选中文本后触发高亮，getSelection() 会失效——因为 replaceChild 破坏了原始节点引用，得用 cloneRange() 提前保存锚点。