AST解析基础:如何写一个简单的html语法分析库

前言

创新互联建站专注于张店网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供张店营销型网站建设，张店网站制作、张店网页设计、张店网站官网定制、微信小程序定制开发服务，打造张店网络公司原创品牌,更为您提供张店网站排名全网营销落地服务。

虚拟语法树(Abstract Syntax Tree, AST)是解释器/编译器进行语法分析的基础, 也是众多前端编译工具的基础工具, 比如webpack, postcss, less等. 对于ECMAScript, 由于前端轮子众多, 人力过于充足, 早已经被人们玩腻了. 光是语法分析器就有 uglify , acorn , bablyon , typescript , esprima 等等若干种. 并且也有了AST的社区标准: ESTree。

这篇文章主要介绍如何去写一个AST解析器, 但是并不是通过分析JavaScript, 而是通过分析 html5 的语法树来介绍, 使用 html5 的原因有两点: 一个是其语法简单, 归纳起来只有两种: Text 和 Tag , 其次是因为JavaScript的语法分析器已经有太多太多, 再造一个轮子毫无意义, 而对于 html5 , 虽然也有不少的AST分析器, 比如 htmlparser2 , parser5 等等, 但是没有像 ESTree 那么标准, 同时, 这些分析器都有一个问题: 那就是定义的语法树中无法对标签属性进行操作. 所以为了解决这个问题, 才写了一个html的语法分析器, 同时定义了一个完善的AST结构, 然后再有的这篇文章。

AST定义

为了跟踪每个节点的位置属性, 首先定义一个基础节点, 所有的结点都继承于此结点:

 
 
 
 

  
  
  
  
export interface IBaseNode {
  
  
  
  
  start: number;  // 节点起始位置
  
  
  
  
  end: number;    // 节点结束位置
  
  
  
  
}
 
 
 
 

如前所述, html5的语法类型最终可以归结为两种: 一种是 Text , 另一种是 Tag , 这里用一个枚举类型来标志它们.

 
 
 
 

  
  
  
  
export enum SyntaxKind {
  
  
  
  
  Text = 'Text', // 文本类型
  
  
  
  
  Tag  = 'Tag',  // 标签类型
  
  
  
  
}
 
 
 
 

对于文本, 其属性只有一个原始的字符串 value , 因此结构如下:

 
 
 
 

  
  
  
  
export interface IText extends IBaseNode {
  
  
  
  
  type: SyntaxKind.Text; // 类型
  
  
  
  
  value: string;         // 原始字符串
  
  
  
  
}
 
 
 
 

而对于 Tag , 则应该包括标签开始部分 open , 属性列表 attributes , 标签名称 name , 子标签/文本 body , 以及标签闭合部分 close :

 
 
 
 

  
  
  
  
export interface ITag extends IBaseNode {
  
  
  
  
  type: SyntaxKind.Tag;  // 类型
  
  
  
  
  open: IText;           // 标签开始部分, 比如 
  
  
  
  
  name: string;          // 标签名称, 全部转换为小写
  
  
  
  
  attributes: IAttribute[];  // 属性列表
  
  
  
  
  body: Array // 子节点列表, 如果是一个非自闭合的标签, 并且起始标签已结束, 则为一个数组
  
  
  
  
    | void                  // 如果是一个自闭合的标签, 则为void 0
  
  
  
  
    | null;                 // 如果起始标签未结束, 则为null
  
  
  
  
  close: IText              // 关闭标签部分, 存在则为一个文本节点
  
  
  
  
    | void                  // 自闭合的标签没有关闭部分
  
  
  
  
    | null;                 // 非自闭合标签, 但是没有关闭标签部分
  
  
  
  
}
 
 
 
 

标签的属性是一个键值对, 包含名称 name 及值 value 部分, 定义结构如下:

 
 
 
 

  
  
  
  
export interface IAttribute extends IBaseNode {
  
  
  
  
  name: IText;  // 名称
  
  
  
  
  value: IAttributeValue | void; // 值
  
  
  
  
}
 
 
 
 

其中名称是普通的文本节点, 但是值比较特殊, 表现在其可能被单/双引号包起来, 而引号是无意义的, 因此定义一个标签值结构:

 
 
 
 

  
  
  
  
export interface IAttributeValue extends IBaseNode {
  
  
  
  
  value: string; // 值, 不包含引号部分
  
  
  
  
  quote: '\'' | '"' | void; // 引号类型, 可能是', ", 或者没有
  
  
  
  
}
 
 
 
 

Token解析

AST解析首先需要解析原始文本得到符号列表, 然后再通过上下文语境分析得到最终的语法树.

相对于JSON, html虽然看起来简单, 但是上下文是必需的, 所以虽然JSON可以直接通过token分析得到最终的结果, 但是html却不能, token分析是***步, 这是必需的. (JSON解析可以参考我的另一篇文章: 徒手写一个JSON解析器(Golang) ).

token解析时, 需要根据当前的状态来分析token的含义, 然后得出一个token列表.

首先定义token的结构:

 
 
 
 

  
  
  
  
export interface IToken {
  
  
  
  
  start: number;    // 起始位置
  
  
  
  
  end: number;      // 结束位置
  
  
  
  
  value: string;    // token
  
  
  
  
  type: TokenKind;  // 类型
  
  
  
  
}
 
 
 
 

Token类型一共有以下几种:

 
 
 
 

  
  
  
  
export enum TokenKind {
  
  
  
  
  Literal     = 'Literal',      // 文本
  
  
  
  
  OpenTag     = 'OpenTag',      // 标签名称
  
  
  
  
  OpenTagEnd  = 'OpenTagEnd',   // 开始标签结束符, 可能是 '/', 或者 '', '--'
  
  
  
  
  CloseTag    = 'CloseTag',     // 关闭标签
  
  
  
  
  Whitespace  = 'Whitespace',   // 开始标签类属性值之间的空白
  
  
  
  
  AttrValueEq = 'AttrValueEq',  // 属性中的=
  
  
  
  
  AttrValueNq = 'AttrValueNq',  // 属性中没有引号的值
  
  
  
  
  AttrValueSq = 'AttrValueSq',  // 被单引号包起来的属性值
  
  
  
  
  AttrValueDq = 'AttrValueDq',  // 被双引号包起来的属性值
  
  
  
  
}
 
 
 
 

Token分析时并没有考虑属性的键/值关系, 均统一视为属性中的一个片段, 同时, 视 = 为一个

特殊的独立段片段, 然后交给上层的 parser 去分析键值关系. 这么做的原因是为了在token分析

时避免上下文处理, 并简化状态机状态表. 状态列表如下:

 
 
 
 

  
  
  
  
enum State {
  
  
  
  
  Literal              = 'Literal',
  
  
  
  
  BeforeOpenTag        = 'BeforeOpenTag',
  
  
  
  
  OpeningTag           = 'OpeningTag',
  
  
  
  
  AfterOpenTag         = 'AfterOpenTag',
  
  
  
  
  InValueNq            = 'InValueNq',
  
  
  
  
  InValueSq            = 'InValueSq',
  
  
  
  
  InValueDq            = 'InValueDq',
  
  
  
  
  ClosingOpenTag       = 'ClosingOpenTag',
  
  
  
  
  OpeningSpecial       = 'OpeningSpecial',
  
  
  
  
  OpeningDoctype       = 'OpeningDoctype',
  
  
  
  
  OpeningNormalComment = 'OpeningNormalComment',
  
  
  
  
  InNormalComment      = 'InNormalComment',
  
  
  
  
  InShortComment       = 'InShortComment',
  
  
  
  
  ClosingNormalComment = 'ClosingNormalComment',
  
  
  
  
  ClosingTag           = 'ClosingTag',
  
  
  
  
}
 
 
 
 

整个解析采用函数式编程, 没有使用OO, 为了简化在函数间传递状态参数, 由于是一个同步操作,

这里利用了JavaScript的事件模型, 采用全局变量来保存状态. Token分析时所需要的全局变量列表如下:

 
 
 
 

  
  
  
  
let state: State          // 当前的状态
  
  
  
  
let buffer: string        // 输入的字符串
  
  
  
  
let bufSize: number       // 输入字符串长度
  
  
  
  
let sectionStart: number  // 正在解析的Token的起始位置
  
  
  
  
let index: number         // 当前解析的字符的位置
  
  
  
  
let tokens: IToken[]      // 已解析的token列表
  
  
  
  
let char: number          // 当前解析的位置的字符的UnicodePoint
 
 
 
 

在开始解析前, 需要初始化全局变量:

 
 
 
 

  
  
  
  
function init(input: string) {
  
  
  
  
  state        = State.Literal
  
  
  
  
  buffer       = input
  
  
  
  
  bufSize      = input.length
  
  
  
  
  sectionStart = 0
  
  
  
  
  index        = 0
  
  
  
  
  tokens       = []
  
  
  
  
}
 
 
 
 

然后开始解析, 解析时需要遍历输入字符串中的所有字符, 并根据当前状态进行相应的处理

(改变状态, 输出token等), 解析完成后, 清空全局变量, 返回结束.

 
 
 
 

  
  
  
  
export function tokenize(input: string): IToken[] {
  
  
  
  
  init(input)
  
  
  
  
  while (index < bufSize) {
  
  
  
  
    char = buffer.charCodeAt(index)
  
  
  
  
    switch (state) {
  
  
  
  
    // ...根据不同的状态进行相应的处理
  
  
  
  
    // 文章忽略了对各个状态的处理, 详细了解可以查看源代码
  
  
  
  
    }
  
  
  
  
    index++
  
  
  
  
  }
  
  
  
  
  const _nodes = nodes
  
  
  
  
  // 清空状态
  
  
  
  
  init('')
  
  
  
  
  return _nodes
  
  
  
  
}
 
 
 
 

语法树解析

在获取到token列表之后, 需要根据上下文解析得到最终的节点树, 方式与tokenize相似，均采用全局变量保存传递状态, 遍历所有的token, 不同之处在于这里没有一个全局的状态机。

因为状态完全可以通过正在解析的节点的类型来判断。

 
 
 
 

  
  
  
  
export function parse(input: string): INode[] {
  
  
  
  
  init(input)
  
  
  
  
  while (index < count) {
  
  
  
  
    token = tokens[index]
  
  
  
  
    switch (token.type) {
  
  
  
  
      case TokenKind.Literal:
  
  
  
  
        if (!node) {
  
  
  
  
          node = createLiteral()
  
  
  
  
          pushNode(node)
  
  
  
  
        } else {
  
  
  
  
          appendLiteral(node)
  
  
  
  
        }
  
  
  
  
        break
  
  
  
  
      case TokenKind.OpenTag:
  
  
  
  
        node = void 0
  
  
  
  
        parseOpenTag()
  
  
  
  
        break
  
  
  
  
      case TokenKind.CloseTag:
  
  
  
  
        node = void 0
  
  
  
  
        parseCloseTag()
  
  
  
  
        break
  
  
  
  
      default:
  
  
  
  
        unexpected()
  
  
  
  
        break
  
  
  
  
    }
  
  
  
  
    index++
  
  
  
  
  }
  
  
  
  
  const _nodes = nodes
  
  
  
  
  init()
  
  
  
  
  return _nodes
  
  
  
  
}
 
 
 
 

不太多解释, 可以到GitHub查看源代码.

结语

项目已开源, 名称是 html5parser , 可以通过npm/yarn安装:

 
 
 
 

  
  
  
  
npm install html5parser -S 
  
  
  
  
# OR 
  
  
  
  
yarn add html5parser
 
 
 
 

或者到GitHub查看源代码: acrazing/html5parser 。

目前对正常的HTML解析已完全通过测试, 已知的BUG包括对注释的解析, 以及未正常结束的

输入的解析处理(均在语法分析层面, token分析已通过测试).

文章题目：AST解析基础:如何写一个简单的html语法分析库
本文URL：http://www.gawzjz.com/qtweb2/news3/8753.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联