空值、重复、与原生语义冲突且未参与运行时逻辑的HTML属性可安全批量删除，如aria-label=""、aria-hidden="true"加在无内容无交互div上、role="presentation"加在span/p上、tabindex="-1"与aria-hidden="true"共存、仅用于调试的id；VSCode正则需加空格边界防误伤，禁用模糊匹配；事件属性和style必须用DOM API（querySelectorAll+removeAttribute）清理，避免正则破坏结构或语义；删后须通过无障碍树、键盘流及全项目引用检查验证。
哪些 HTML 脏属性真能批量删？
空值、重复、与原生语义冲突的属性，绝大多数可以安全清理——但前提是它们没参与运行时逻辑。比如：
-
aria-label=""、aria-hidden="true" 加在本就不可聚焦又无内容的 div 上
-
role="presentation" 或 role="none" 出现在 span、p 这类无交互语义的标签里
-
tabindex="-1" 和 aria-hidden="true" 同时出现（二者目标不一致，通常只留一个）
-
id 属性仅用于临时调试或测试（如 id="test-header"），且 JS 中无对应 getElementById 调用
aria-label=""、aria-hidden="true" 加在本就不可聚焦又无内容的 div 上 role="presentation" 或 role="none" 出现在 span、p 这类无交互语义的标签里 tabindex="-1" 和 aria-hidden="true" 同时出现（二者目标不一致，通常只留一个） id 属性仅用于临时调试或测试（如 id="test-header"），且 JS 中无对应 getElementById 调用 这些不是“看起来多余”，而是实际不改变可访问性行为或渲染逻辑，删了反而减少干扰。
VSCode 正则怎么写才不误伤？
全局搜索（Ctrl+Shift+F）启用正则后，用这几条最稳妥：
-
aria-[a-z-]<em>=["']\s</em>["']：匹配所有值为空或纯空白的 aria 属性（覆盖单双引号、空格、换行、制表符）
-
aria-label=["']\s*["']：单独抓空 aria-label，这类几乎都该删
-
role=<a href="https://www.php.cn/link/81513517264a0a86329bb3b1e29800b3">"'</a>["']：定位冗余 role，但别急着全替，先看它包的是什么标签
-
\sid\s<em>=\s</em>["'][^"']*["']：删 id 属性，开头带空格或换行，确保只匹配独立属性，不卷入 data-id
aria-[a-z-]<em>=["']\s</em>["']：匹配所有值为空或纯空白的 aria 属性（覆盖单双引号、空格、换行、制表符） aria-label=["']\s*["']：单独抓空 aria-label，这类几乎都该删 role=<a href="https://www.php.cn/link/81513517264a0a86329bb3b1e29800b3">"'</a>["']：定位冗余 role，但别急着全替，先看它包的是什么标签 \sid\s<em>=\s</em>["'][^"']*["']：删 id 属性，开头带空格或换行，确保只匹配独立属性，不卷入 data-id ⚠️ 别用 id=.<em>?</em> 或 on\w+=.? 这类模糊写法——它们跨标签、吃注释、吞引号内转义，一跑就坏结构。
为什么不能靠正则删事件属性和 style？onclick、onsubmit、style 这类属性，表面是字符串，实则是 DOM 行为锚点：
- 用正则删
onclick="foo()" 可能误杀 data-on-click 或注释里的伪代码
-
style="color: red; margin: 0;" 若含双引号（如 content: "→";），style=".*?" 会在第一个 " 就截断
- 更关键的是：删完后，
el.style.cssText 读出来是空字符串而非 undefined，行为不一致；而 removeAttribute("style") 才是语义上真正移除
onclick="foo()" 可能误杀 data-on-click 或注释里的伪代码 style="color: red; margin: 0;" 若含双引号（如 content: "→";），style=".*?" 会在第一个 " 就截断 el.style.cssText 读出来是空字符串而非 undefined，行为不一致；而 removeAttribute("style") 才是语义上真正移除 正确做法是用 DOM API 遍历清洗：
document.querySelectorAll('[onclick], [onsubmit], [style]').forEach(el => {
['onclick', 'onsubmit', 'onchange', 'style'].forEach(attr => el.removeAttribute(attr));
});删完怎么验证没出问题？
不能只看页面“还显示正常”。必须进辅助技术链路和运行时验证：
- 在 Chrome DevTools 的 Accessibility 面板中右键元素 →「Reveal in Accessibility Tree」，确认按钮、输入框、模态框是否仍在树中，角色和状态是否正确
- 特别检查：
aria-labelledby 删掉后，输入框是否还报出正确标签？aria-live 删掉后，成功提示是否彻底不播报？
- 端到端跑一遍键盘流：Tab 进入、Enter 触发、Esc 关闭，读屏器朗读顺序是否自然
- 搜索整个项目：
getElementById(、querySelector('#、$('#、href="#，确认删掉的 id 是否被 JS 或锚点引用
aria-labelledby 删掉后，输入框是否还报出正确标签？aria-live 删掉后，成功提示是否彻底不播报？ getElementById(、querySelector('#、$('#、href="#，确认删掉的 id 是否被 JS 或锚点引用 真正容易被忽略的，是那些没写测试、不常点、只在特定条件触发的交互逻辑——它们不会报错，但会静默失效。
立即学习“前端免费学习笔记（深入）”；
