20.萌时-手写一个简单的HTML解析器

目标

手写一个简单的 HTML 解析器，本质上是把字符串模板转换成结构化的树，后续才能继续做优化、代码生成和渲染。

最小实现流程

1. 词法分析：从左到右扫描字符串，识别开始标签、结束标签、属性和文本。
2. 语法分析：借助栈结构维护父子关系，生成 AST。
3. 错误恢复：遇到非法闭合、自闭合标签或缺失标签时做兜底处理。

核心数据结构

const astNode = {
  type: 'element',
  tag: 'div',
  attrs: [{ name: 'class', value: 'card' }],
  children: [],
};

关键点

• 开始标签入栈，结束标签出栈。
• 文本节点直接挂到当前栈顶元素下。
• 属性解析要处理单双引号、布尔属性和空值属性。
• 自闭合标签不能继续入栈等待闭合。

常见坑

• 文本中的 < 不一定意味着标签开始。
• 注释、doctype、script/style 内容需要特殊处理。
• 空白字符如何保留，要看业务场景决定。

延伸

Vue、React 这类框架不会直接操作字符串模板，而是先做类似的解析工作，再进入优化和渲染阶段。