浏览器简易版本之 html parser 篇

前端

2024-01-10 07:26:49

剖析 HTML 解析器的奥秘：词法与语法解析

导语：

踏入浏览器简易版本的探索之旅，我们首先将深入 HTML 解析器的神奇世界，了解词法和语法分析的奥秘。从字符标记到 DOM 树的生成，我们一步步揭开 HTML 解析的运作机制。

HTML 解析器的两大基石：词法和语法分析

HTML 解析器肩负着将一段文本转化为可操作 DOM 结构的重任。这个过程分为两大步骤：词法分析和语法分析。

词法分析：字符标记的盛宴

词法分析如同一位精明的美食鉴赏家，细细品味输入文本，将一段文字切分成一个个可口的标记。这些标记就像食材中的基本元素，为 HTML 文档的结构奠定基础。

词法分析器就像一位经验丰富的厨师，熟知哪些字符可以组成标记，哪些是分隔符，哪些又是注释符号。通过正则表达式的魔法，它将文本中的字符组合成各种各样的标记，如<div>、class和"container">。

语法分析：标记拼图，构建 DOM

语法分析就像一位拼图大师，将词法分析器提供的标记巧妙地组合成一幅完整的 DOM 树。DOM 树是 HTML 文档结构的生动写照，每一个元素、属性和文本节点都以一种树形结构呈现。

语法分析器同样依赖于正则表达式，它遵循预定义的语法规则，逐一识别元素、属性和文本节点。当它识别到一个元素时，便将其添加到 DOM 树中，最终形成一个完整的文档结构。

代码示例：词法和语法分析的实战演练

让我们通过一个简单的代码示例，亲身体验词法和语法分析的过程。

# 词法分析
import re

text = "<div class=\"container\"><h1>Hello World!</h1></div>"
regex_tag = re.compile(r"<[^>]+>")
regex_text = re.compile(r"[^<]+")
tokens = []

for token in regex_tag.findall(text):
    tokens.append(token)
for token in regex_text.findall(text):
    tokens.append(token)

print(tokens)

# 语法分析
from bs4 import BeautifulSoup

html = "<div class=\"container\"><h1>Hello World!</h1></div>"
soup = BeautifulSoup(html, "html.parser")
dom_tree = soup.prettify()
print(dom_tree)