HTML中精确替换代码片段有五种方法：一、JavaScript replace()动态修改innerHTML；二、DOM遍历逐节点替换；三、正则预处理静态HTML；四、用Cheerio等解析器安全操作；五、MutationObserver监听动态内容并替换。
如果您需要在HTML文档中精确替换某个特定的代码片段，则可能是由于原始HTML中存在需要更新、修正或定制化的静态内容。以下是实现此目标的多种方法：
一、使用JavaScript的replace()方法
该方法适用于在浏览器环境中动态修改已加载的HTML字符串或DOM元素的innerHTML内容，通过正则表达式或字面量匹配目标片段并执行单次或全局替换。
1、获取目标HTML字符串，例如通过document.body.innerHTML或fetch获取的响应文本。
2、定义需被替换的原始片段，如<div class="old">旧内容</div>，并确保转义特殊字符以避免正则误匹配。
立即学习“前端免费学习笔记（深入）”；
3、使用String.prototype.replace()，若需全局替换则配合正则表达式/g标志，例如：htmlStr.replace(/<div class="old">[^]*?<\/div>/g, '<div class="new">新内容</div>')。
4、将替换后的新字符串重新赋值给对应DOM节点的innerHTML属性。
二、使用DOM操作逐节点遍历替换
该方法规避了正则解析HTML的风险，适用于结构复杂、嵌套层级深或含动态属性的片段，通过深度优先遍历定位并替换匹配的节点。
1、调用document.querySelectorAll('*')获取全部元素节点，或限定范围如document.getElementById('container').children。
2、对每个节点的outerHTML属性进行全等比较，判断是否完全等于待替换的目标HTML字符串。
3、当匹配成功时，创建新元素节点，可使用document.createElement()与Element.innerHTML组合构造替换内容。
4、调用parentNode.replaceChild(newNode, oldNode)完成原位替换。
三、使用正则表达式预处理HTML字符串（服务端或构建阶段）
该方法适用于静态HTML文件批量处理场景，如构建脚本、CI/CD流程或本地工具链，在HTML未进入浏览器前完成文本级替换。
1、读取HTML文件为纯文本字符串，确保编码为UTF-8且无BOM干扰。
2、编写严格锚定的正则模式，例如/(?]*>)\s*[\s\S]*?\s*(?=)/，用于捕获特定标记区间。
3、调用String.replace()传入该正则与替换函数，函数内返回期望插入的HTML内容。
4、将处理后的字符串写回原文件或输出至新文件路径。
四、使用HTML解析器库（如Cheerio或jsdom）
该方法提供符合标准的HTML语法树操作能力，避免正则误匹配标签闭合、属性引号、注释及CDATA等边界情况，适合高可靠性要求的替换任务。
1、在Node.js环境中安装cheerio模块，const cheerio = require('cheerio')。
2、加载HTML字符串：const $ = cheerio.load(htmlStr, { xmlMode: false, decodeEntities: false })。
3、使用CSS选择器定位目标元素，例如$('div[data-replace-id="header"]')，或通过filter()方法遍历匹配outerHTML内容。
4、调用.replaceWith()方法注入新HTML字符串或新建的cheerio对象，例如elem.replaceWith('<header>新页眉</header>')。
五、使用MutationObserver监听并拦截动态插入内容
该方法适用于替换由第三方脚本、广告SDK或SPA框架异步注入的HTML片段，通过监听DOM变化实时捕获并重写目标节点。
1、创建MutationObserver实例，配置childList: true与subtree: true以监听整个文档树。
2、在回调函数中遍历mutations列表，对每个addedNodes检查其outerHTML是否包含目标片段特征字符串。
3、对匹配节点执行replaceWith()或直接修改其innerHTML，注意避免重复触发观察器造成循环。
4、调用observer.observe(document.body, config)启动监听，务必在替换完成后调用observer.disconnect()防止内存泄漏。
