Babel和正则均不能安全处理HTML：Babel因设计不支持HTML语法而直接报错，正则则因无法处理嵌套、注释、CDATA等结构导致误匹配；唯一可靠方案是使用parse5等专用HTML解析器构建真实DOM树进行AST操作。
为什么不能用 Babel 或正则直接处理 HTML
HTML 不是 JavaScript，Babel 的 AST 节点类型、作用域模型和生成器完全不兼容 HTML 结构。Babel 一碰到 <div class="header"> 就会报 SyntaxError: Unexpected token <——这不是配置问题，是设计上就不支持。正则更危险：str.replace(/<div class="header">/g, "<header>") 会误杀嵌套在 <pre> 里的字符串、注释中的伪标签，甚至破坏内联 JS 中的模板字面量。
真正能安全操作 HTML 的只有专用解析器：parse5（符合 HTML5 标准）、htmlparser2（快但不校验嵌套）、或框架专属解析器（如 @vue/compiler-dom）。它们构建的是真实 DOM 树，不是字符串切片。
用 parse5 做精准 class 替换和标签升级
替换 class 属性不能靠字符串拼接。老代码里 class="btn btn-primary" 可能写成 class = "btn\n btn-primary "，甚至混着空格、制表符、重复值。硬替换必然漏边角 case。
- 正确做法是遍历 AST 节点，操作
node.attrs数组（它是个对象数组，不是扁平对象） - 提取
class值后用/\s+/拆分、filter(Boolean)清空字符串，再逐个比对替换 - 保留其他属性（如
id、data-legacy-js），避免交互逻辑断裂 - 只对满足上下文条件的节点操作，例如：
node.tagName === 'div' && node.parent.tagName === 'body'
示例关键逻辑：
立即学习“前端免费学习笔记（深入）”；
function replaceClassAttr(node, oldClass, newClass) {
if (node.tagName !== 'div' || !node.attrs) return;
const classAttr = node.attrs.find(a => a.name === 'class');
if (!classAttr || !classAttr.value) return;
const classes = classAttr.value.split(/\s+/).filter(Boolean);
const updated = classes.map(c => c === oldClass ? newClass : c);
node.attrs = node.attrs.map(a =>
a.name === 'class' ? { name: 'class', value: updated.join(' ') } : a
);
}
重构后如何防止倒退：CI 和本地钩子双卡位
人工改完一次，下次 PR 又冒出一堆 <div class="card-body">，说明没建立防线。
- 在 CI 中接入
html-validate，配置"semantic-elements": "error"，禁止新增非语义化容器 - Git
pre-commithook 里跑npx html-validate --config .htmlvalidate.json src/**/*.html，本地就能卡住低级提交 - 对 legacy class 建立映射白名单（如
["btn-primary", "text-muted"]），允许保留但禁止新增；新 class 必须符合 BEM 规范，否则 lint 报错 - 把重构后的 HTML 片段存为 Storybook 组件，每次修改触发截图比对，视觉回归自动发现结构意外变动
vnu 验证才是最终拍板人
tidy-html5 和 htmlhint 是“尽力而为”，它们修得顺眼，但不等于合法。vnu（Nu Html Checker）才是 W3C 官方解析器标准，能告诉你浏览器是否真按你预期渲染。
- 本地验证单文件：
npx vnu --format json index.html，JSON 输出方便脚本解析失败项 -
<img alt>被tidy留着不修，但vnu会报Attribute “alt” is missing a required value，必须补成<img alt="">或填实际描述 - 含服务端模板语法（如
<%= title %>）的页面，vnu会当真实标签报错，需提前用--skip-non-html或预处理移除 - 常见陷阱：
main标签只能出现一次，且不能包在header或nav里——vnu会直接报错，不是警告
真正难的不是把 <div> 换成 <main>，而是让每个新写的 <section> 都自带 aria-labelledby、每个 <img> 都强制校验 alt 是否非空——自动化只是起点，规则落地才刚上路。
