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

【51CTO晃荡】8.26 带你与清华大年夜学、搜狗、京东大年夜咖们一路商量基于算法的IT运维实践

在获取到token列表之后, 须要根据高低文解析获得最终的节点树, 方法与tokenize类似，均采取全局变量保存传递状况, 遍历所有的token, 不合之处在于这琅绫腔有一个全局的状况机。

媒介

虚拟语法树(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解析基本: 若何写一个简单的html语法分析库

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

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;           // 标签开端部分, 比如 <div id="1"> 
  name: string;          // 标签名称, 全部转换为小写 
  attributes: IAttribute[];  // 属性列表 
  body: Array<ITag | IText> // 子节点列表, 如不雅是一个非自闭合的标签, 并且肇端标签已停止, 则为一个数组 
    | void                  // 如不雅是一个自闭合的标签, 则为void 0 	
			 1/5    1 2 3 4 5 下一页 尾页	
			

　　推荐阅读
　　传统IT七大职业的云计算转型之路
            【51CTO晃荡】8.26 带你与清华大年夜学、搜狗、京东大年夜咖们一路商量基于算法的IT运维实践

            对于体系治理员来说，云职业之路要大年夜转移到云运算，做一名cloudop开端。这是云运算中的一>>>详细阅读


本文标题：AST解析基础: 如何写一个简单的html语法分析库
地址：http://www.17bianji.com/lsqh/36839.html
 1/2    1