使用 domparser 解析 html 并操作 classlist，可精准替换 class 属性中的目标类名，避免误改文本内容、注释或属性名中的相似字符串。
使用 domparser 解析 html 并操作 classlist，可精准替换 class 属性中的目标类名，避免误改文本内容、注释或属性名中的相似字符串。
在前端开发中，直接对 HTML 字符串使用正则表达式替换类名（如 `/\bclass-to-replace\b/g`）看似简洁，但存在严重风险：它无法区分上下文，可能错误替换 `class-to-replace
` 中的文本、`` 的 name 值，甚至注释或 script 内容中的匹配项，导致 HTML 语义破坏或逻辑异常。更可靠的方式是借助浏览器原生的 DOMParser——将 HTML 字符串解析为真实的 DOM 树，再通过标准 DOM API 精准定位和修改。以下是推荐实现：
const replaceClassInHtml = (html, oldClass, newClass) => {
const doc = new DOMParser().parseFromString(html, 'text/html');
// 使用 CSS 选择器 .oldClass 匹配所有拥有该类的元素
doc.querySelectorAll(`.${CSS.escape(oldClass)}`).forEach(el => {
el.classList.replace(oldClass, newClass);
});
return doc.body.innerHTML;
};
// 示例调用
const htmlString = '<di class="class-to-replace">\n<div class="row">\n <p>class-to-replace</p></div>\n</di>';
console.log(replaceClassInHtml(htmlString, 'class-to-replace', 'new-class'));
// 输出: '<di class="new-class">\n<div class="row">\n <p>class-to-replace</p></div>\n</di>'✅ 关键优势：
- ✅ 语义安全：仅作用于 class 属性值中真正作为 CSS 类存在的部分；
- ✅ 自动处理多类场景：如 class="a class-to-replace b" 会被正确更新为 class="a new-class b"，无需手动解析空格分隔；
- ✅ 支持转义类名：使用 CSS.escape() 可安全处理含特殊字符（如 ., #, [）的类名，防止选择器语法错误；
- ✅ 兼容性良好：DOMParser 和 classList 在现代浏览器（包括 IE10+）中广泛支持。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 若输入 HTML 不包含 <body>（如纯片段），doc.body.innerHTML 仍能正常提取；但若需保留 <head> 或完整文档结构，应改用 doc.documentElement.innerHTML 并注意命名空间；
- 服务端 Node.js 环境中无 DOMParser，此时建议使用 jsdom 库模拟；
- 避免在循环中反复调用 replaceClassInHtml 处理大量 HTML——可批量操作后一次性序列化，提升性能。
总之，永远优先用 DOM API 处理 HTML 结构问题，而非正则。这不仅是最佳实践，更是保障 HTML 合法性与可维护性的关键防线。
