内的纯文本内容
" />
本文介绍一种基于 DOM childNodes 和 TEXT_NODE 类型遍历的可靠方案，用于仅对非嵌套在 <span> 等标签内的纯文本中的目标关键词（如 TARGET）进行安全、无副作用的高亮替换，避免重复包装或破坏已有结构。
本文介绍一种基于 dom `childnodes` 和 `text_node` 类型遍历的可靠方案，用于仅对非嵌套在 `` 等标签内的纯文本中的目标关键词（如 `target`）进行安全、无副作用的高亮替换，避免重复包装或破坏已有结构。
在前端开发中，常需对页面中特定关键词进行动态标记（如高亮、添加 class），但必须谨慎处理 DOM 结构：若直接操作 innerHTML，极易误改已存在语义标签（如 <span class="target-class">）的内容，导致重复嵌套、HTML 转义异常或事件丢失；而仅遍历 element.children 又会完全忽略文本节点（Text Nodes），造成漏替换。
根本原因在于：children 仅返回元素节点（Element Nodes），不包含纯文本、注释等节点；而真正的“可编辑文本片段”实际以 Text 类型节点形式存在于 childNodes 中。
✅ 正确做法是遍历 element.childNodes，筛选出 nodeType === Node.TEXT_NODE 的节点，并对其 textContent 进行正则替换，再用 replaceWith() 安全注入新结构：
function replaceTargetInTextNodes(container: HTMLElement, target: string, className: string = 'target-class') {
const reg = new RegExp(`\b${target}\b`, 'g');
for (const node of container.childNodes) {
if (node.nodeType === Node.TEXT_NODE) {
const text = node.textContent || '';
if (!reg.test(text)) continue;
// 创建安全的 HTML 片段（自动转义，防 XSS）
const fragment = document.createRange().createContextualFragment(
text.replace(reg, `<span class="${className}">$&</span>`)
);
node.replaceWith(fragment);
}
}
}
// 使用示例
const el = document.querySelector('#a')!;
replaceTargetInTextNodes(el, 'TARGET', 'target-class');? 关键要点说明：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- childNodes 包含所有子节点：元素节点、文本节点、注释节点等；children 仅含元素节点。
- Node.TEXT_NODE（值为 3）是判断纯文本的唯一可靠依据，不可依赖 node.nodeName === '#text'（兼容性差）。
- document.createRange().createContextualFragment() 是现代推荐方式：它在当前上下文解析 HTML 字符串，自动处理转义，且生成的节点可直接插入 DOM，比 innerHTML 更安全、更语义化。
- 正则使用 单词边界确保精确匹配（如 "TARGET" 不会匹配 "TARGETED"），g 标志支持全局替换。
- 该方法天然跳过已有 <span> 内容——因为那些 TARGET 已属于元素节点的子文本节点，而本逻辑只处理容器 #a 直接子级的文本节点，完全不影响嵌套结构。
⚠️ 注意事项：
- 若需支持多关键词（如 Set<string>），建议将 target 改为正则字符串并预编译（注意特殊字符转义）；
- 避免在 replaceWith() 后继续遍历同一 childNodes 列表——因 DOM 已变更，应使用 for...of（基于快照）而非 for (let i = 0; i < length; i++)；
- 如需保留原始空白结构（如换行、缩进），textContent 会自动归一化空白，若需严格保留，可改用 nodeValue 并手动处理 ；
- 不建议在 visitChildren 递归中混用 innerHTML 和 childNodes 操作，易引发 DOM 树不一致；本文方案聚焦于单层容器的文本精细化处理，与现有递归逻辑解耦更清晰。
通过此方法，原始 HTML：
<div id="a"> Here is some text <span>Here is some more span text</span> More Text... <span>contains TARGET</span> Another Line with the TARGET </div>
将被精准转换为：
<div id="a"> Here is some text <span>Here is some more span text</span> More Text... <span>contains TARGET</span> Another Line with the <span class="target-class">TARGET</span> </div>
——既达成目标，又零污染、零风险。
