包裹的文本内容
" />
本文介绍如何遍历 dom 中的纯文本节点（text nodes），仅对未被 `` 等标签包裹的原始文本中的目标字符串（如 `target`）进行安全替换，并将其包装为带指定 class 的 ``，避免重复处理已标记的内容。
在实际前端开发中，常需对页面中特定关键词做高亮或语义化标记（例如添加 class="target-class"），但必须谨慎避开已被 HTML 标签包裹的内容——否则会导致嵌套错误、重复包装或破坏原有结构。核心难点在于：element.children 仅返回元素节点（Element Nodes），而忽略纯文本节点（Text Nodes）；若直接操作 innerHTML，又极易污染已有 HTML 结构（如误改 <span>contains TARGET</span> 中的 TARGET）。
正确解法是使用 element.childNodes —— 它包含所有子节点类型（元素、文本、注释等），再通过 node.nodeType === Node.TEXT_NODE 精准筛选出纯文本片段。随后利用 document.createRange().createContextualFragment() 安全解析并替换文本中的匹配项，最后用 node.replaceWith(...) 原位更新。
以下为可直接运行的完整示例：
function replaceTargetInTextNodes(container: HTMLElement, target = 'TARGET', className = 'target-class') {
const reg = new RegExp(`\b${target}\b`, 'g'); // 使用 确保单词边界匹配
for (const node of container.childNodes) {
if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
const replacedHtml = node.textContent.replace(reg, `<span class="${className}">$&</span>`);
if (replacedHtml !== node.textContent) {
const fragment = document.createRange().createContextualFragment(replacedHtml);
node.replaceWith(fragment);
}
}
}
}
// 调用示例
const container = document.querySelector('#a') as HTMLElement;
replaceTargetInTextNodes(container);✅ 关键优势说明：
立即学习“前端免费学习笔记（深入）”；
- ✅ 不干扰已有 HTML：只处理 TEXT_NODE，跳过 <span>、<div> 等元素节点，天然规避对 <span>contains TARGET</span> 的误操作；
- ✅ 保留原始结构：使用 createContextualFragment 解析 HTML 片段，确保生成的 <span> 是合法 DOM 节点，而非字符串拼接；
- ✅ 精准匹配：正则中加入 边界符，防止 TARGETED 或 INTARGET 被误匹配；
- ✅ 性能友好：仅遍历一级 childNodes，无需递归或深度 DOM 查询。
⚠️ 注意事项：
- 若容器内存在 <script> 或 <style> 标签，其内部文本也属于 TEXT_NODE，需按需过滤（可通过 node.parentElement?.tagName 判断父元素类型）；
- replaceWith() 在旧版 Safari 中需 Polyfill，生产环境建议配合 @ungap/append 或检测兼容性；
- 如需支持多关键词（如 Set<string>），可将 target 改为动态正则：new RegExp((${Array.from(targets).join('|')}), 'g')；
- 切勿在 innerHTML 上直接 .replace() 后赋值——这会销毁所有事件监听器、破坏 React/Vue 等框架的虚拟 DOM 关系。
综上，面向文本内容的精细化 DOM 操作，应优先选择 childNodes + TEXT_NODE 模式，而非依赖 innerHTML 字符串处理或 children 元素遍历。这是实现语义化、可维护、零副作用文本增强的关键实践。
