html5-clear最稳妥批量删无用属性：默认保留id/class，支持按规则剔除align等HTML4遗留属性；删data-前须三步验证JS调用链；Hutool removeHtmlAttr可精准移除指定属性；tidy-html5的-clean不删除属性本身。

用 html5-clear 批量删掉无用属性最稳妥

直接删 class、id、data- 属性风险很高——JS 可能靠它们查元素，CSS 可能靠它们写样式。所以不能只看“有没有用”，得看“运行时是否被读取”。html5-clear 默认不删 id 和 class，但支持按规则精准剔除废弃属性，比如 align、bgcolor、border 这类 HTML4 遗留属性。

安装后执行命令即可清理指定文件：

npx html5-clear -f index.html -o cleaned.html --ruleset basic

--ruleset basic 会移除过时属性和空属性（如 class=""），但保留所有 data- 和自定义属性；若想更激进，可加 --ruleset strict，它还会过滤未在 CSS/JS 中出现的 id 和 class（需配合项目上下文验证）。

删 data- 属性前必须查 JS 调用链

很多 data- 属性看着像占位符，其实被 JS 当作开关或配置项：比如

可能被 document.querySelector('[data-module="cart"]') 读取，硬删会导致模块加载失败。

安全做法是三步交叉验证：

• 在 VS Code 全局搜索该 data- 属性名，确认是否出现在 querySelector、dataset 或事件监听器中
• 打开 Chrome DevTools → Elements 面板，右键对应节点 → Break on → Attribute modifications，刷新页面，看是否触发断点
• 检查构建产物（如打包后的 main.js）里是否还残留相关引用，避免开发时没调用、上线后才触发

用 Hutool 的 removeHtmlAttr 精准剔除单个属性

如果你只打算干掉某几个特定属性（比如统一去掉所有 style，但保留 class 和 id），Hutool 的 removeHtmlAttr 比正则更可靠——它基于 DOM 解析，不会误伤标签内文本或注释里的 style= 字样。

Java 示例：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

String clean = HtmlUtil.removeHtmlAttr(html, "style", "onclick", "onerror");

注意：removeHtmlAttr 不处理嵌套结构中的属性（比如 ），只清理顶层标签；如果要深度清理，得配合 filter() + 白名单配置，否则可能漏掉内联 SVG 或 MathML 中的属性。

别信 tidy-html5 的 -clean 参数

tidy-html5 命令带 -clean 标志看似能“清理属性”，但它实际只删 class、id、style 等属性的冗余值（比如把 class="a b a" 缩成 class="a b"），**完全不删除属性本身**。很多人误以为它能清空 style，结果发现输出里还是满屏 style="display:none;"。

真正想剥离样式，得用：

• sanitize-html + 白名单关闭 style 属性（但会连 标签一起干掉）
• ponytail 配置 attributes: { '*': [] } 清空所有属性，再手动放行需要的
• 或者干脆用 CSS 分离策略：把内联 style 提到外部文件，再用 Coverage 工具确认是否真没人用

属性清理最难的不是工具选型，而是判断“谁还在读它”——DOM 存在性、JS 调用链、构建产物残留，三者缺一不可。漏掉任意一环，上线后就容易冒出 Cannot read property 'dataset' of null 这类错误。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！