深入剖析：如何用AST解析器重塑HTML代码质量-html教程-PHP中文网

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

@babel/parser 无法解析 html 字符串，因其专为 javascript/typescript 设计，词法分析器仅识别 js token，遇

不能用 JavaScript 的 AST 解析器（比如 @babel/parser）去解析 HTML——它一见到 <div> 就会抛 <code>SyntaxError: Unexpected token ，这不是配置问题，是根本能力不匹配。<h3>为什么 @babel/parser 无法解析 HTML 字符串</h3> <p>它专为 JS/TS 设计，词法分析器只认 <code>function、const、{ 这类 token；遇到 直接终止。即使你强行传入 HTML 字符串，也不会进入语法分析阶段，更不会生成任何可用节点。

常见错误操作包括：

误以为加个 plugins: ['html'] 就能启用 HTML 支持——@babel/parser 根本没有这个插件

试图用 parseExpressionAt 或 parseTopLevelAwait 绕过——这些 API 仍基于 JS 语法上下文，对标签名完全无感知

把 JSX 片段当 HTML 用：<div>hello</div> 在 JSX 模式下能过，但那是 Babel 把它当 JSXExpressionContainer 处理的，不是 HTML 解析

该用哪个 HTML AST 解析器：parse5 vs htmlparser2 vs cheerio

三者都可读取字符串并产出可遍历的树结构，但定位和行为差异明显：

parse5：最接近 HTML5 标准，自动修复错位嵌套（如 <p></p> <div></div> 会被重排），输出 Document 节点，attrs 是数组形式 [{ key: 'class', value: 'foo' }]，适合需要语义保真和浏览器兼容性的场景

htmlparser2：轻量、快，不自动纠错，attrs 是扁平对象 { class: 'foo' }，适合构建构建工具插件或做快速批量属性提取

cheerio：jQuery 风格 API，底层用 htmlparser2，写法简洁但 AST 可写性弱——.attr('class', 'new') 是就地修改，不是节点重建，容易破坏自闭合标签逻辑

别用正则替换 class="a b" ——换行、引号转义、注释干扰会让它漏匹配或误替换。

安全替换 HTML 标签和属性的关键操作

核心原则：不拼字符串，不改原节点，而是创建新节点并替换父级引用。

判断节点类型必须用 node.nodeName === 'div' 或 node.tagName === 'BUTTON'（注意大小写），而不是靠 node.type === 'Tag'——不同库字段名不统一

处理 class 属性时，先用 node.attrs.find(a => a.key === 'class')?.value || '' 提取原始值，再用空格分割 + Set 去重 + join，避免重复添加

替换 <img> 这类自闭合标签时，必须显式设 isSelfClosing: true，否则 parse5.serialize() 会输出 <img>

遍历 childNodes 时，先过滤 node.nodeType === 1（Element），跳过文本节点和注释节点，否则调用 getAttribute 会报 TypeError

HTML AST 重构真正的难点不在遍历，而在边界语义

比如 <p>hello</p> 在 HTML5 中允许省略闭合标签，但序列化时要不要补？<script>alert(1)</script> 里含 CDATA 内容，能否直接替换文本而不破坏 JS 执行上下文？注释节点里写了 ，该不该被当成真实标签处理？这些都不是 AST 遍历能自动解决的，得靠业务层明确约定规则。工具只负责结构操作，语义边界得人来划清楚。