应使用DOMParser解析HTML字符串，再遍历匹配元素调用removeAttribute彻底移除data-ccp-props等属性，避免正则替换导致的截断、注释误删及script污染问题。
怎么用 DOMParser + removeAttribute 清理 data-ccp-props 等 Office 垃圾属性
富文本编辑器里粘贴 Word 内容后出现 data-ccp-props、data-ccp-parastyle、data-contrast 这类属性，不是 bug，是 Microsoft Office 的“格式锚点”。它们不渲染，但会干扰 SSR、SEO、DOM 遍历，甚至让某些编辑器（如 tiptap）解析失败。
别用正则匹配 data-ccp-.*?——属性值里可能含换行或引号，容易截断标签；也别只删 data-ccp-props 就完事，Office 还会塞 xml:lang、class="SCXW251995521" 这种哈希类。
- 先用
DOMParser解析字符串，确保结构安全：避免脚本执行，也绕过浏览器对非法 HTML 的自动修正 - 查所有带目标属性的元素：
doc.querySelectorAll('[data-ccp-props], [data-ccp-parastyle], [data-contrast], [xml\:lang]') - 遍历时用
for...of，不用forEach——DOM 变更时 NodeList 可能动态更新，导致漏删 - 对每个元素调用
el.removeAttribute('data-ccp-props')等，而不是setAttribute('data-ccp-props', '')：空属性仍存在，CSS 选择器[data-ccp-props]还能命中
为什么不能跳过 DOMParser 直接字符串替换
直接对 HTML 字符串做 .replace(/data-ccp-props="[^"]*"/g, '') 看似快，但实际踩坑率极高：
- Office 复制的 HTML 里常有换行或转义引号，比如
data-ccp-props=""{"335551550":"1"}"，正则会提前终止匹配，把后面标签内容吞掉 - 属性可能出现在注释里：
，正则无法识别，反而污染后续解析 - script 标签内也可能含类似字符串：
<script>console.log('data-ccp-props="x"')</script>，正则一并删掉就引入语法错误 - 更隐蔽的是自闭合标签干扰，比如
/>匹配不稳定
清理 style 属性时，removeAttribute("style") 和 setAttribute("style", "") 的区别
很多同学以为设空字符串就等于“清空”，但浏览器和编辑器逻辑不这么看：
-
el.setAttribute('style', '')会在 DOM 上留下一个空style属性，el.hasAttribute('style')返回true，CSS 选择器[style]依然能选中它 - 像 tiptap 这类编辑器内部会监听
[style]来触发样式面板激活，空属性照样触发，用户看到“已设置样式”但实际没内容 -
el.removeAttribute('style')彻底移除该属性，语义干净，且对无style属性的元素调用也完全安全，无副作用 - 批量处理时，建议统一走
removeAttribute，哪怕面对或这类边缘情况
要不要连 class 属性一起删？得看场景
class 不像 data-ccp-* 那样是纯垃圾，但它在富文本清洗中是个灰色地带：
- Word 复制来的
class="MsoNormal"、class="SCXW251995521"必须删——这些是 Office 私有类，无 CSS 定义，只占体积 - 编辑器自己加的语义类（如
class="hljs-js"用于代码高亮）要保留，否则样式丢失 - 如果项目用了 Tailwind 或 Bootstrap 工具类，且确认这些类不会被用户误粘贴污染，可白名单保留：
['text-red-500', 'font-bold', 'max-w-2xl'] - 最稳妥做法：先删所有
class，再按需用白名单策略重加——比事后从一堆哈希类里捞出有效类成本低得多
真正容易被忽略的点是：清理必须发生在 DOM 节点上，而不是字符串。对 innerHTML 字符串调用 replace 或 removeAttribute 都无效；必须先 parse 成 Document 或 Element，再操作节点本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
