在JavaScript中将Emmet字符串解析为AST的方案咨询

我完全懂你的痛点——想把Emmet风格的缩写直接转换成JavaScript项目里能用的对象解析树，而不是生成HTML字符串，却发现Emmet官方好像没把NPM包的使用文档做的很显眼对吧？其实Emmet的核心库是完全支持Node.js环境的，只是文档更多偏向编辑器集成，下面就给你具体的实现方案：

方法一：直接使用Emmet核心NPM包 #

Emmet本身提供了可在Node中调用的核心库，我们可以解析出它的抽象语法树（AST），再转换成你需要的结构：

1. 安装依赖 #

首先安装Emmet的核心包：

npm install emmet

2. 解析并转换结构 #

Emmet的parse()方法会返回它内部的AST，我们只需要写一个简单的递归函数，把这个AST转换成你想要的对象格式：

const emmet = require('emmet');

// 定义转换函数，把Emmet AST转为自定义结构
function transformToJsTree(node) {
  const treeNode = {
    type: node.name,
    attributes: {}
  };

  // 处理节点属性
  if (node.attributes) {
    node.attributes.forEach(attr => {
      treeNode.attributes[attr.name] = attr.value || '';
    });
  }

  // 处理子节点
  if (node.children?.length) {
    treeNode.children = node.children.map(child => transformToJsTree(child));
  }

  return treeNode;
}

// 解析Emmet缩写
const emmetAst = emmet.parse('#main');
// 转换为自定义解析树
const jsTree = transformToJsTree(emmetAst[0]);

console.log(jsTree);
// 输出结果：
// { type: 'div', attributes: { id: 'main' }, children: [] }

这个方法的好处是完全基于Emmet官方核心库，支持所有Emmet的语法特性（比如嵌套、类名、属性、重复节点等），比如解析div#header.nav>ul>li.item*2也能完美转换成对应的层级结构。

方法二：使用轻量替代工具 #

如果你觉得Emmet的AST转换有点繁琐，也可以试试专门做解析树输出的轻量工具，这类工具会直接返回类似你需求的对象结构，省去手动转换的步骤（不过要注意它的语法兼容度可能不如Emmet）：

安装后直接调用就能得到目标结构：

const parse = require('html-abbreviation-parser');
const tree = parse('#main');
console.log(tree);
// 输出：{ tag: 'div', attrs: { id: 'main' }, children: [] }

不过还是更推荐用Emmet官方包，因为它对各种复杂缩写的支持更完善，能覆盖绝大多数场景。

内容的提问来源于stack exchange，提问作者Brennan Cheung