本文介绍一种避免 innerHTML 替换污染 HTML 标签的文本高亮方案：通过操作纯文本内容（innerText）并逐字符构建带标签的 HTML，确保仅替换可见字符，完全绕过原始 HTML 结构干扰。
本文介绍一种避免 `innerhtml` 替换污染 html 标签的文本高亮方案：通过操作纯文本内容（`innertext`）并逐字符构建带标签的 html，确保仅替换可见字符，完全绕过原始 html 结构干扰。
在 Web 开发中，使用 String.prototype.replaceAll() 配合 innerHTML 实现关键词高亮是一种常见做法，但极易引发严重副作用——当待替换字符（如 'a' 或 'e'）恰好出现在已有 HTML 标签内部（例如 e 中的 a 在 class 属性里），replaceAll 会无差别匹配所有字符串位置，导致 DOM 结构被意外篡改，最终渲染出错乱甚至不可解析的 HTML。
根本原因在于：replaceAll 是纯字符串操作，它对 HTML 毫无知觉，既不区分文本节点与标签，也不理解 DOM 层级结构。
✅ 正确解法是「源头隔离」：只基于纯文本（innerText）生成新 HTML，彻底回避对原始 innerHTML 的字符串替换。
上述答案提供的方案正是这一思想的简洁实现：
const strings = ['e', 'a'];
const pElement = document.querySelector('p');
function highlight(strings) {
const transformedArr = pElement.innerText.split('').map(char =>
strings.includes(char)
? `<span class="highlight">${char}</span>`
: char
);
pElement.innerHTML = transformedArr.join('');
}
highlight(strings);
该函数首先获取元素的纯文本内容（pElement.innerText），将其拆分为单字符数组；接着对每个字符判断是否需要高亮——若是，则包裹为 ...；否则保留原字符；最后将处理后的字符数组合并为字符串，并一次性赋值给 innerHTML。由于整个过程从未读取或修改原始 HTML 字符串，因此绝对规避了标签内字符被误替换的风险。
⚠️ 注意事项：
- 此方案适用于单字符高亮场景（如示例中的 'e'、'a'）。若需支持多字符关键词（如 'amet' 或 'Lorem'），需升级为基于正则的单词级匹配，并配合 textContent + document.createTextNode() / document.createElement() 构建 DOM 片段，避免跨词断裂或重叠匹配问题；
- innerText 会忽略隐藏元素内容且受 CSS 影响，如需严格按源 HTML 文本处理（含空格、换行、注释等），应改用 textContent；
- 频繁调用 innerHTML 赋值可能触发重排重绘，生产环境建议结合 DocumentFragment 或节流优化性能。
总结：高亮的本质不是“替换 HTML”，而是“重建 HTML”。坚持从语义化文本出发、生成结构化标记，是保障 DOM 健壮性的关键设计原则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
