一种基于状态机的 DOM 树生成技术(二)

原创

算法与编程之美 2022-03-02 14:42:22 ©著作权

©著作权归作者所有：来自51CTO博客作者算法与编程之美的原创作品，请联系作者获取转载授权，否则将追究法律责任

微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列博客。

在上一篇)我们给大家介绍了状态机的基本概念、设计思路以及基于 Java 语言的实现，希望大家能够了解相关知识点。状态机是我们后续介绍 DOM 树生成的关键技术，后面几篇博客都将基于状态机来实现。所以请大家务必掌握，如果还有不清楚的地方可以阅读之前的文章，也非常欢迎大家关注微信公众号，及时了解最新文章。

首先我们还是来回顾一下我们的任务，给定一个 HTML 文件，生成该文件的 DOM 树。一个 HTML 文件即一段采用 HTML 规则编写的字符串，如"<html><body>hello</body></html>"。

那么如何根据这样的一段字符串生成 DOM 树呢？

1 分词

我们称第一阶段为分词，要想最终生成一颗 DOM树，我们并不是一个字符一个字符的处理，而是将HTML 字符串首先进行分词，然后再一个分词一个分词的处理。

我们定义以下类型的分词，称每一个分词为 Token。

StartTag：开始标签如<html>。

EndTag：结束标签如</html>。

Character：StartTag 和 EndTag 之间的内容如 hello 。

EOF:结束标记。

针对这个字符串"<html><body>hello</body></html>"，我们可以得到以下的分词：

StartTag:<html>

StartTag:<body>

StartTag:

Character:hello

EndTag:

EndTag:</body>

EndTag:</html>

现在我们已经明确了要达到什么目标，那么接下来如何实现将 HTML 字符串转化为一个个的分词呢？

2 利用状态机实现分词

在上一篇博客我们给大家介绍了状态机的基本知识，本节我们将介绍一种基于状态机的分词技术。

一种基于状态机的 DOM 树生成技术(二)_DOM

上图为实现第一节分词而设计的一个状态机，这个状态机屏蔽了很多错误处理环节，目的是为了让我们的描述更加简洁，让大家能够更加关注核心问题。我们来看一下这个状态机是如何设计的。

DATA:起始状态。

当输入字符为'-1'表示已经到达字符串的结尾，此时识别到一个分词 EOF。

当输入字符为'<'，进入 TagOpen 状态。

输入字符为其他字符时，此时识别到一个分词 Character。

TagOpen:

当输入字符为'/'进入到 EndTagOpen 状态。

检测当前字符是否为字母，如果是则进入 TagName。

EndTagOpen:

检测当前字符是否为字母，如果是则进入 TagName。

TagName:

该状态将一次性读取所有字母，直到遇到'/'或'>'为止。

当下一个输入字符为'>'，此时已经识别到一个HTML 标签，并将进入到 DATA。

接下来我们就将以一个实例来描述状态机的运行过程。