不符合规范的自定义属性是那些以data-开头但后续含大写字母、下划线、冒号或不以小写字母开头的命名，如data_user_id、data-UserId、data:src、x-legacy-flag；浏览器虽可能解析进DOM，但W3C验证失败、SSR报错、编辑器误处理。
怎么识别哪些自定义属性算“不符合规范”
HTML 规范只允许以 data- 开头的自定义属性，且后续部分必须全小写、用短横分隔（如 data-user-id），不能含大写字母、下划线或冒号。像 data_user_id、data-UserId、data:src、x-legacy-flag 都是非法的。浏览器虽会容忍它们解析进 DOM，但会导致 W3C 验证失败、部分 SSR 引擎报错，还可能干扰编辑器插件（比如 TinyMCE 会把 data-ccp-props 当作内部指令误处理）。
用 getAttributeNames() 筛选并删除非法 data- 属性
现代浏览器中，最稳的方式是遍历每个元素的属性名，用 startsWith('data-') + 正则校验格式：
function removeInvalidDataAttrs(el) {
el.getAttributeNames()
.filter(name => name.startsWith('data-'))
.filter(name => !/^[a-z][a-z0-9]*(-[a-z0-9]+)*$/.test(name.slice(5)))
.forEach(name => el.removeAttribute(name));
}
document.querySelectorAll('*').forEach(removeInvalidDataAttrs);
-
name.slice(5)去掉data-前缀后，只检查剩余部分是否符合「小写字母开头，后接字母数字或短横组合」 - 不建议用
includes('_')或toUpperCase()判断——容易漏掉data-foo-Bar这类混合情况 - IE11 不支持
getAttributeNames()，得退化为Array.from(el.attributes)再过滤
为什么不能用正则全局替换字符串
直接对 HTML 字符串做 replace(/data-\w+=[^>]+/g, '') 看似快，但实际危险：
- 会误删
<img alt="data-id">中的alt值里的data-id - 若属性值含换行或注释（如
data-config='{"a":1} <!-- comment -->'），正则会截断结构，导致解析异常 - 破坏
xml:lang、xmlns等命名空间属性——它们也含短横，但不属于data-范畴 - 所有通过
innerHTML或insertAdjacentHTML动态插入的内容，都不会被这次字符串替换覆盖
清理后要特别注意的耦合点
很多前端逻辑会悄悄依赖这些非法属性：
立即学习“前端免费学习笔记（深入）”；
- CSS 里写了
[data_user_id] { color: red; }—— 删掉属性后样式失效，但控制台不报错 - JS 中用
el.dataset.userId读取data-user-id，但如果实际是data_UserId，dataset对象根本不会暴露它 - 某些富文本编辑器（如 Quill）在粘贴时注入
data-ccp-props，删掉后可能导致格式还原失败，需同步清理关联的class和style - 服务端模板（如 Django 的
{{ obj|safe }}）若直接输出带非法data-的 HTML，前端清理只是补救，源头改模板才治本
真正难的不是写对正则或遍历函数，而是确认所有 JS/CSS/服务端模板里没有隐式依赖这些名字——尤其那些没写测试、靠手动点开看效果的功能。
