缩写解析器

给 Emmet 解析 标记 缩写为AST. 解析分两步进行:先是将给定的缩写符号化(在编辑器中用于语法加亮),再将符号分析出并转换为AST节点作为平原,JSON-串行对象.

注意 AST 树在多数情况下不能直接用于输出: 例如, AST 节点来自 .foo.bar 元素缺失元素名称并包含两个 class 属性为 foo 财务报告和审定财务报表 bar 数值(不是单个) class 与 foo bar 数值).

使用量

您可以通过 npm 安装 :

npm install @emmetio/abbreviation

然后把它添加到你的项目中:

import parse from '@emmetio/abbreviation';

const tree = parse('div#foo>span.bar*3');
/* {
    type: 'Abbreviation',
    children: [{
        type: 'AbbreviationNode',
        name: 'div',
        attributes: [...],
        children: [...]
    }]
} */

返回的树包含 AbbreviationNode 项:带有名称、属性和/或文本内容的节点。 例如,一个可以用某种方式表示的要素。 重复和分组节点类似 a>(b+c)*3 自动转换和复制 AbbreviationNode 具有显著的 .repeat 在重复序列中识别节点的属性.

缩略语法

Emmet 缩写元素有以下基本部分:

name.class#id[attributes?, ...]{text value}*repeater/

• name ——元素名称,例如 div, (中文(简体) ), span 等。存储为 node.name 属性.
• [attributes] ——属性列表. 每个属性被存储为 AbbreviationAttribute 实例,并可以通过 node.getAttribute(name)。每个属性可以不同格式书写:
  • attr ——带有空值的属性.
  • attr=value ——具有价值的属性. 这个 value 可能包含除空格或 ]。 。 。 .
  • attr="value" 或者说 attr='value' ——引文中带有值的属性. 引文会自动去除. 表达值如 attr={value} 被支持和可以通过 valueType: "expression" 属性.
  • attr. ——布尔属性,如无值属性,如 required 内 <input>。 。 。 .
  • !attr - 隐含属性,如果其值不为空会输出出. 作为占位符用于在输出中保存属性顺序.
  • ./non/attr/value ——默认属性值. 换句话说,任何与属性名称字符不符的东西。 也可以是单词或双词. 默认属性存储于 null 作为名称,并应在稍后使用,例如用来解决预先定义的属性.
• .class ——简称: class 属性。 注意一个元素可以有多个类,例如 .class1.class2.class3。 。 。 .
• #id ——简称: id 属性.
• {text} - 节点的文本内容
• *N — 元素中继器, 告诉 parser 要创建 N 复制给定节点.
• / ——可选自闭接线员. 标记元素为 node.selfClosing = true。 。 。 .

运算符

缩略语的每个要素必须与其中任何一种操作符分开:

elem1+elem2>elem3

• + ——兄弟会操作员,在树上添加下个元素作为当前元素的下个兄弟会.
• > ——儿童操作员,将下一个元素作为当前元素的孩子添加.
• ^ ——爬升操作员,作为当前元素的父节点的孩子添加下个元素. 允许多个爬升操作员,每个操作员会将一个关卡按树向上移动.

组

一套要素可采用 (),主要用于重复和更容易的元素嵌入:

a>(b>c+d)*4+(e+f)

组合可选择与 + 操作员.