html转成ast,基于ast思维的html字符串编辑

在一个项目中，我需要获取当前页面的html字符串，然后发送到worker中，对html进行编辑、对比等。和在DOM环境下可以方便的编辑DOM不同，如果只有字符串，想要编辑，而且还要对两个html进行diff操作，其实还是有点难度。在virtual dom中，我们可以通过node的type来知道这个节点是否是同一个，但是如果只有纯字符串，这个确认动作就会比较麻烦。我想，我已经对ast有一定了解了，能不能把html抽象为ast，然后对ast对象进行编辑，再由ast还原为html呢？于是，我开动脑筋，写了一个叫做abs-html的库，用于对html转化为基于HyperJSON的ast对象，并且提供了两个对象的diff和patch方法，以及重新生成html字符串的rebuild方法。

生成HTML的AST

在Robust第25期中，我详细阐述了简单的编译原理，基于这一原理，我可以将html字符串转化为一个token序列，并拼成一个ast。由于我并不需要一个完整的编译逻辑，我的目标是一个编译的子集。而且html是xml的子集，天然具有非常强的数据结构特征，因此，遍历过程中可以很快生成ast，不需要分多步。

今年年初我发布了HyperJSON协议，它是一个基于hyperscript衍生的布局描述协议，具有极小的体积，和完备的布局特性描述数据。而用HyperJSON来描述html具有非常大的优势：体积可以变的特别小，阅读也很方便。因此，我生成的ast是一个基于该协议的对象。

你可以通过下面的代码快速尝试一下这个效果：

impor