本文介绍一种安全、可靠的文本高亮方案：通过操作纯文本（innertext）而非 innerhtml，避免在替换过程中误改 html 标签内的字符，从而杜绝标签被破坏的风险。
本文介绍一种安全、可靠的文本高亮方案：通过操作纯文本（innertext）而非 innerhtml，避免在替换过程中误改 html 标签内的字符，从而杜绝标签被破坏的风险。
在前端开发中，直接对 innerHTML 进行字符串替换（如 replaceAll）极易引发严重问题——当待匹配字符（如 'a' 或 'e'）恰好出现在已插入的 <span class="highlight"> 标签内部时，HTML 结构会被意外篡改，导致标签闭合错乱、样式失效甚至 DOM 解析错误。原始代码的问题根源正是混淆了「渲染后可见文本」与「底层 HTML 字符串」的边界。
✅ 正确思路是：只处理纯文本内容，再构建新 HTML
即先提取 element.innerText（不含任何标签的干净文本），逐字符或逐词判断是否需高亮，然后为每个匹配项生成带 <span> 的 HTML 片段，最后将所有片段拼接并一次性赋值给 innerHTML。这样完全规避了对已有 HTML 标签的干扰。
以下为优化后的实现示例（支持单字符及多字符匹配）：
const strings = ['e', 'a', 'am'];
const pElement = document.querySelector('p');
function highlight(strings) {
const text = pElement.innerText;
let result = '';
// 从左到右扫描文本，优先匹配更长的字符串（避免短词覆盖长词）
let i = 0;
while (i < text.length) {
let matched = false;
// 按长度降序尝试匹配，确保 'am' 在 'a' 之前被识别
const sortedStrings = [...strings].sort((a, b) => b.length - a.length);
for (const str of sortedStrings) {
if (text.startsWith(str, i)) {
result += `<span class="highlight">${str}</span>`;
i += str.length;
matched = true;
break;
}
}
if (!matched) {
result += text[i];
i++;
}
}
pElement.innerHTML = result;
}
highlight(strings);? 关键注意事项：
- 永远不要对 innerHTML 做全局字符串替换——它会无差别修改所有出现位置，包括标签属性和闭合符号；
- 使用 innerText 获取语义化文本，它是浏览器解析后的真实可见内容；
- 若需支持多字符关键词（如 'am'），务必按长度倒序匹配，否则 'a' 可能提前截断 'am'；
- 此方法天然防 XSS：因输入源为 innerText（已自动转义），输出的 HTML 仅由可控模板生成，不引入外部未过滤内容。
该方案简洁、健壮且可扩展，适用于高亮搜索关键词、语法标记等场景，是处理「文本增强渲染」问题的标准实践。
立即学习“前端免费学习笔记（深入）”；
