未定义属性指非原生、非规范全局（如data-、aria-）、非项目明确定义的无效属性；需用getAttributeNames()遍历+显式白名单过滤，避免误删合法扩展属性。
未定义属性不能靠正则批量删，必须用 getAttributeNames() 遍历 + 显式白名单过滤，否则会误删 data-*、aria-* 等合法扩展属性。
哪些属性算“未定义”？先看 HTML 标准和浏览器实际行为
HTML 中所谓“未定义属性”，不是指 W3C 标准里没列出来的所有名字，而是：
• 不是原生 HTML 属性（如 id、class、src）
• 不是规范允许的全局属性（如 data-*、aria-*、role）
• 也不是你项目中明确定义的自定义属性（比如 Vue 的 v-if、React 的 data-reactroot）
真正该清理的是那些拼写错误、临时调试残留、或旧框架遗留的无效名，例如：onclickx、data_temp（下划线非短横）、x-model（但项目没用 Alpine）、ng-bind（但没引入 Angular）
用 getAttributeNames() + 白名单安全遍历
这是唯一能区分“合法扩展”和“真乱码”的方法。不能依赖字符串匹配或正则抓 x- 或 ng- 开头就删——有些是项目必需的。
核心逻辑是：获取每个元素所有属性名 → 判断是否在预设白名单中 → 不在就 removeAttribute()
const WHITELIST = new Set([
// 原生属性
'id', 'class', 'style', 'title', 'alt', 'src', 'href', 'value', 'name', 'type',
// 全局属性
'data-', 'aria-', 'role', 'tabindex', 'hidden', 'contenteditable',
// 项目专用（按需添加）
'v-if', 'v-for', 'x-data', 'wire:model'
]);
<p>function removeUndefinedAttrs(el) {
const names = el.getAttributeNames();
for (const name of names) {
if (!WHITELIST.has(name) && !name.startsWith('data-') && !name.startsWith('aria-')) {
el.removeAttribute(name);
}
}
}</p><p>document.querySelectorAll('*').forEach(removeUndefinedAttrs);立即学习“前端免费学习笔记（深入）”；
注意：
• getAttributeNames() 返回的是字符串数组，可直接 for...of 遍历，无需 Array.from()
• 白名单里写 'data-' 和 'aria-' 是为了语义判断，不是字面匹配——实际检查用 startsWith
• 不要漏掉 role、tabindex 这类非前缀但属全局的属性
• IE11 不支持 getAttributeNames()，需降级用 el.attributes + 倒序循环
VSCode 正则只能用于静态文件初筛，不能替代 DOM 遍历
如果你处理的是未加载的 HTML 文件（如模板、邮件 HTML），可用正则做第一轮粗筛，但必须加保护机制：
• 查找：\s+(?!data-|aria-|role|tabindex|id|class|style)[a-zA-Z][a-zA-Z0-9:._-]*\s*=\s*["'][^"']*["']
• 替换：留空
• 务必勾选“正则模式”+“全字匹配”，并先点“全部查找”人工确认命中项
这个正则只匹配“以字母开头、含常见符号、且不在白名单里”的属性，但它：
• 无法识别 data-myattr 是否被 JS 读取（可能项目里真用了）
• 会漏掉无值属性如 disabled（HTML 布尔属性）
• 对换行/注释/CDN 注入的伪代码完全无感
所以它只是辅助，不是最终手段。
删完之后最常断掉的是 CSS 选择器和 JS 查询逻辑
很多人删完一运行就报错，不是因为属性本身有害，而是：
• CSS 里写了 [x-model] { display: none; }，属性没了，样式失效
• JS 里 document.querySelector('[ng-click]') 返回 null，后续链式调用崩了
• 某些编辑器插件（如 Prism.js）靠 data-language 渲染高亮，删了就变纯文本
真正麻烦的从来不是怎么删，而是删之前没人翻过整个项目的 CSS 和 JS，确认这些属性到底有没有被真实消费。
