HTML自动化重构是用可验证、可回滚、可协作的规则将语义混乱、结构冗余、可访问性缺失的老代码转化为机器可理解、人可快速定位、CI可自动拦截的工程资产。
HTML自动化重构不是“一键美化”，而是用可验证、可回滚、可协作的规则，把语义混乱、结构冗余、可访问性缺失的老代码，变成机器能理解、人能快速定位、CI能自动拦截的工程资产。
怎么判断一段HTML是否值得自动化重构
别一上来就跑工具。先看三个信号：
- 页面中存在超过3层嵌套的
<div class="wrapper"><div class="inner"><div class="content">这类无语义容器 -
document.querySelectorAll('div[onclick], div[onmouseover]')能命中大量元素——说明JS严重依赖class或div结构，这类代码改起来风险高，但恰恰最需要重构兜底 - 运行
axe.run()后，region-missing、heading-order、landmark-unique这类无障碍错误占比 >15%
满足任一条件，就该进自动化重构流程；三者全中，建议暂停新功能开发，优先建重构流水线。
用 html-rewriter + 自定义规则做精准替换
别用正则全局替换 <div class="header"> —— 它可能在模态框里、在评论区里、甚至被JS动态插入，盲目替换会炸掉交互逻辑。
立即学习“前端免费学习笔记（深入）”；
- 用 Cloudflare Workers 的
html-rewriter或本地 Node.js 的parse5+estree-walker，基于 AST 操作，只改 DOM 树中符合上下文的位置 - 例如：只把顶级
<div class="header">（父节点是<body>且无data-no-rewrite属性）替换成<header> - 保留原始 class，比如
<div class="header navbar-fixed">→<header class="navbar-fixed">，避免样式断裂 - 对含内联 JS 的标签（如
<div onclick="toggleMenu()">），先加data-legacy-js标记，留待后续解耦，不强行删逻辑
重构后如何防止倒退
人工改完一次，下次 PR 又冒出一堆 <div class="card-body">，说明没建立防线。
- 在 CI 中接入
html-validate，配置"semantic-elements": "error"规则，禁止新增非语义化容器 - Git pre-commit hook 里跑
npx html-validate --config .htmlvalidate.json src/**/*.html，本地就能卡住低级提交 - 对 legacy class 建立映射白名单（如
["btn-primary", "text-muted"]），允许保留但禁止新增；新 class 必须符合 BEM 规范，否则 lint 报错 - 把重构后的 HTML 片段存为 Storybook 组件，每次修改都触发截图比对，视觉回归自动发现结构意外变动
真正难的不是把 <div> 换成 <main>，而是让每个新写的 <section> 都自带 aria-labelledby、每个 <img> 都强制校验 alt 是否非空——自动化重构的终点，是让语义和可访问性成为代码的默认属性，而不是每次都要靠人盯着提醒。
