本文介绍如何遍历 dom 元素的文本节点（text nodes），仅对纯文本内容中的指定关键词（如 `target`）进行安全包裹替换，自动跳过已位于 `` 等标签内的匹配项，避免重复包装或破坏现有结构。
在实际前端开发中，常见的需求是：仅对“裸露”的文本内容执行关键词高亮或语义化包装，而保留已有 HTML 标签内已处理过的文本不变。例如，将
中所有独立出现的 TARGET 替换为 TARGET，但不触碰 contains TARGET 内已存在的 TARGET。
关键在于：不能依赖 innerHTML 或 innerText 做全局正则替换——前者会污染 HTML 结构（如误改标签属性），后者丢失位置信息且无法区分文本来源；也不能仅遍历 children（即 HTMLElement 子元素），因为 children 会忽略纯文本节点（Text Nodes），导致“Here is some text”这类开头/中间/结尾的文本完全不可见。
✅ 正确做法是：遍历 element.childNodes，并筛选出 nodeType === Node.TEXT_NODE 的节点。每个文本节点可通过 node.textContent 获取原始纯文本，再用 replaceAll() + createContextualFragment() 安全注入新 DOM 片段：
function wrapTargetInTextNodes(container: HTMLElement, target: string, className: string = 'target-class') {
const reg = new RegExp(`\\b${RegExp.escape(target)}\\b`, 'g');
for (const node of container.childNodes) {
if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
const replacedHTML = node.textContent.replaceAll(reg, `$&`);
if (replacedHTML !== node.textContent) {
node.replaceWith(
document.createRange().createContextualFragment(replacedHTML)
);
}
}
}
}
// 使用示例
const el = document.querySelector('#a');
if (el) wrapTargetInTextNodes(el, 'TARGET', 'target-class');⚠️ 注意事项：
- Node.TEXT_NODE 包含换行、空格等空白符，建议用 node.textContent.trim() 判断是否为有效文本；
- createContextualFragment() 是安全插入 HTML 字符串的标准方式，比直接赋值 innerHTML 更可靠（不触发脚本执行、不破坏事件监听器）；
- 正则需转义 target 中的特殊字符（如 .、*），推荐封装 RegExp.escape()（ES2024 已提案，当前可手动实现）；
- 此方法不会递归处理子元素内部的文本节点——若需深度处理（如遍历整个 document.body），应结合 TreeWalker 或递归遍历 childNodes（注意跳过 SCRIPT/STYLE 等非渲染节点）；
- 若需支持大小写不敏感匹配，可改用 new RegExp(..., 'gi') 并配合 $& 捕获原大小写。
? 总结：DOM 文本处理的核心原则是「分层操作」——children 处理元素结构，childNodes 处理内容构成（含文本+注释+元素）。精准识别并操作 TEXT_NODE，是实现语义化文本增强、关键词高亮、无障碍标注等场景的底层基石。
