最可靠的方法是直接用 removeAttribute() 或正则批量清除 data-* 属性，因为 dataset 是只读代理，修改它不会影响真实 DOM 属性；需用 querySelectorAll 精准匹配后调用 removeAttribute，或服务端用正则替换 HTML 字符串。
直接用 removeAttribute() 或正则批量清除最可靠，别依赖 dataset——它不参与 DOM 属性的增删，只做驼峰映射。
为什么 dataset.removeXXX 不起作用
dataset 是只读代理对象，不是真实属性操作接口。写 delete el.dataset.userId 或 el.dataset.userId = undefined 都不会从 HTML 中删除 data-user-id 属性。
-
dataset的修改仅影响内存映射，el.outerHTML里依然能看到原属性 - 首次读取后，
dataset可能缓存旧值，导致getAttribute()和dataset.xxx返回不一致 - 真正删属性必须调用
el.removeAttribute('data-user-id')
批量清除指定 data-* 属性（如 data-ccp-props、data-uw-styling-context）
适用于富文本粘贴后清洗、CMS 导入前净化等场景，推荐在 DOM 解析后统一处理：
const container = document.getElementById('content');
container.querySelectorAll('[data-ccp-props], [data-ccp-parastyle], [data-contrast], [data-uw-styling-context]').forEach(el => {
el.removeAttribute('data-ccp-props');
el.removeAttribute('data-ccp-parastyle');
el.removeAttribute('data-contrast');
el.removeAttribute('data-uw-styling-context');
});
- 用
querySelectorAll精准匹配带特定data-*属性的元素，比遍历所有元素再检查更高效 - 多个属性名可合并进一个选择器，用逗号分隔，避免重复遍历
- 注意：IE11 不支持
querySelectorAll('[data-xxx]')这类带连字符的属性选择器，需降级为getAttribute()判断
用正则全局替换 HTML 字符串中的 data-* 属性
适合服务端预处理、TinyMCE paste_preprocess 钩子、或 SSR 渲染前清洗：
立即学习“前端免费学习笔记（深入）”；
const cleanHtml = dirtyHtml .replace(/data-ccp-\w+="[^"]*"/gi, '') .replace(/data-uw-styling-context="[^"]*"/gi, '') .replace(/data-mce-[\w-]*="[^"]*"/gi, '') .replace(/data-contrast="[^"]*"/gi, '');
- 正则中
gi标志确保全局、忽略大小写匹配 - 引号内容用
[^"]*而非.*?，避免跨标签误删（如" onclick="alert(1)"） - 不要用
.replace(/data-.*?="[^"]*"/gi, '')—— 它会误杀合法属性如data-api-url
真正难的不是“怎么删”，而是判断哪些该留、哪些必删。比如 data-track-id 是业务必需，而 data-ccp-props 是 Office 私有元数据，永远不该出现在生产 HTML 中。清理前先明确语义归属，否则删着删着就把状态逻辑删没了。
