DOMParser 替换 HTML 字符串中的元素最安全：先用 new DOMParser().parseFromString(htmlStr, "text/html") 解析，再通过 querySelector 定位目标元素，用 replaceWith() 替换，最后导出 doc.body.innerHTML；它保持语义、不毁事件、不触 XSS，远优于 innerHTML.replace()。
用 DOMParser 替换 HTML 字符串中的元素
DOMParser 是浏览器原生支持的解析器，比正则安全、比 innerHTML.replace() 可控。它适合在 JS 运行时动态处理一段 HTML 字符串（比如从 API 拿到的模板片段），再精准替换其中某个元素。
常见错误现象：直接 innerHTML = htmlStr.replace(...) 会销毁事件、重置表单、触发 XSS；而 DOMParser 能保持结构语义，只改你指定的部分。
- 必须用
new DOMParser().parseFromString(htmlStr, "text/html")，不能省略 MIME 类型，否则某些标签（如svg）解析失败 - 替换后要用
document.adoptNode()或importNode()才能挂载到当前文档，否则报错Failed to execute 'appendChild' on 'Node' - 若原字符串含
DOMParser会自动解码，但输出时不会还原——如需保留原始编码，得手动转义 - 示例：把
<div data-role="placeholder"></div>替换为<p>已加载</p>
const parser = new DOMParser();
const doc = parser.parseFromString(htmlStr, "text/html");
const placeholder = doc.querySelector('[data-role="placeholder"]');
if (placeholder) {
const newP = doc.createElement('p');
newP.textContent = '已加载';
placeholder.replaceWith(newP);
}
// 导出为字符串
const resultHtml = doc.body.innerHTML;
用 BeautifulSoup 替换 HTML 文件中的文本节点
服务端或构建阶段批量处理静态 HTML 文件时，BeautifulSoup 是最稳的选择。它只动 text 节点，天然跳过 <script>、<style>、属性值和注释，不会破坏结构。
容易踩的坑：默认 find_all(string=True) 会匹配 <script> 里的字符串；不加判断就替换，可能把 JS 代码里的字面量也改了。
立即学习“前端免费学习笔记（深入）”；
- 安装命令：
pip install beautifulsoup4 - 排除脚本和样式内容：
if text.parent.name not in ["script", "style"] - 大小写替换要用
re.sub(re.escape("旧文本"), "新文本", str(text), flags=re.IGNORECASE)，别用str.lower()全局转换 - 写回文件前务必用
str(soup)，别用soup.prettify()——后者会重排缩进，可能影响某些依赖空格的 CSS 选择器
用 template 标签 + cloneNode 安全替换模板中的变量
编辑器类场景（比如低代码平台预览模板）必须避免 innerHTML += 或字符串拼接。原生 <template> 是唯一能保事件、保状态、保命名空间的容器。
为什么不用 template.innerHTML？它会丢失 <slot>、<svg> 子节点的命名空间，克隆后渲染异常；cloneNode(true) 才是正确起点。
- 变量替换必须限定在文本节点内：
node.nodeType === Node.TEXT_NODE - 用户输入内容必须转义：
value.replace(/&/g, '&').replace(/, '<')，否则{{ user.input }}含<script>就执行了 - 不要遍历
element.childNodes后直接replaceChild，有些文本节点是空白符，删掉会破坏布局——先filter(node => node.nodeType === Node.TEXT_NODE && node.textContent.trim()) - 嵌套逻辑（如
{% if %}）不能靠正则一次扫完，得用栈匹配指令块，否则{% if a %}{% if b %}{% endif %}{% endif %}会配错层
为什么 replace() + innerHTML 不该用于真实替换
document.body.innerHTML = document.body.innerHTML.replace(...) 看似简单，实则是“表面快、实际崩”的典型。它不是替换元素，而是整页重建。
性能上：触发完整 DOM 重排 + 重绘 + 事件监听器全部丢失；兼容性上：IE11 不支持部分正则语法；安全上：没过滤就插入用户数据，等于开后门。
- 表单控件（
<input>、<textarea>）值清空，光标位置丢失 - 第三方组件（如地图、视频播放器）实例被销毁，无法恢复
- 已绑定的
addEventListener全部失效，且无任何警告 - 如果原 HTML 含
onload、onclick内联事件，替换后这些脚本会重新执行一次——可能重复发请求或弹窗
真正需要替换元素时，优先走 DOM 方法（replaceChild、remove + appendChild）或解析器（DOMParser、BeautifulSoup）。字符串级替换只适用于纯文本、无交互、可丢状态的调试场景。
