parse5是HTML AST分析的首选解析器，因其完整支持HTML5标准，能正确处理自闭合标签、DOCTYPE、注释等边界情况，生成稳定可预测的AST结构，而htmlparser2为性能牺牲合法性校验，易导致错嵌套等质量问题。
直接用 @babel/parser 解析 HTML 字符串会报 SyntaxError: Unexpected token <，它根本不支持 HTML。必须换专用解析器。
为什么 parse5 是 HTML AST 分析的首选解析器
parse5 完整支持 HTML5 标准，能正确处理自闭合标签、属性命名空间、DOCTYPE、注释、CDATA 等边界情况，生成的 AST 节点结构稳定且可预测。它不像 htmlparser2 那样为了性能牺牲合法性校验（比如允许 <div><p></div></p> 这种错嵌套），这对质量分析至关重要——误判的节点结构会导致后续数据流跟踪完全失效。
实操建议：
- 用
parse5.parse()得到Document节点，再通过parse5.treeAdapter遍历；不要直接操作原始节点对象，避免因只读属性导致修改失败 - 关键字段名要记牢：
tagName（不是name）、attrs是数组而非对象、childNodes混合了Element和Text节点 - 判断元素类型必须用
node.nodeName === '#document' || node.nodeName === 'element'，别依赖node.nodeType（parse5 不提供该属性）
如何安全提取并翻译 HTML 中的自然语言文本
翻译目标必须严格限定在“用户可读文本”，排除代码块、属性值、URL、HTML 注释和内联脚本内容。否则会出现 <button onclick="alert('Submit')">提交</button> 里把 alert('Submit') 当作文本翻译的灾难。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 遍历 AST 时，只对
node.nodeName === '#text'且其父节点不是script、style、pre、code的节点做翻译；用parse5.treeAdapter.getParentNode()向上查类型 - 跳过所有含
data-no-translate或translate="no"属性的祖先元素，这是前端国际化的通用约定 - 翻译前拼接上下文：取当前文本节点所在段落的前一个标题文本 + 当前
<p>的 class 名，传给翻译 API 做 hint，能显著改善术语一致性（如 “driver” 在 “database-config” 段落中译为“驱动”而非“驾驶员”）
AST 节点替换时最常踩的三个坑
基于 AST 修改 HTML（比如批量加 lang 属性、替换 <button> 为带 role 的 <div>）看似简单，但实际极易引入不可见错误。
实操建议：
- 修改
attrs必须重构造整个数组：node.attrs = [...node.attrs, { key: 'lang', value: 'zh-CN' }]；直接 push 会破坏 parse5 内部引用关系，序列化时丢失 - 替换标签时，新节点必须显式设置
isSelfClosing: true（如<img>、<input>），否则parse5.serialize()会补全闭合标签，变成<img></img> - 处理
class属性要调用工具函数：classList.add('new-class')或用正则/(^|\s)old-class(\s|$)/安全匹配，绝不能用node.attrs.find(a => a.key === 'class').value += ' new-class'—— 原值可能为空或含引号转义
真正难的不是解析或替换，而是定义“什么是需要分析的质量问题”。比如 <img src="x" alt=""> 的空 alt 是否违规，取决于 WCAG 版本和上下文语义；这无法靠 AST 节点存在与否判断，必须结合规则引擎与人工配置。这点容易被忽略，但决定了工具是玩具还是生产级。
