<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="id">
1
</div>
<script>
console.log(1)
</script>
<style>
div{
color: red;
}
</style>
</body>
</html>
- 如何使用爬虫,获取某个文案信息,比如上面的id中的文案?
- ParseHtml在干嘛的?
- 为什么要这么复杂,直接用正则不可以吗?
- ...
使用解析器,将他转换为Dom,就可以使用dom的能力/api来获取id中的文案了
const raw = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="id">
1
</div>
<script>
console.log(1)
</script>
<style>
div{
color: red;
}
</style>
</body>
</html>`
const cheerio = require("cheerio")
/**
* jquery的格式
*/
const $ = cheerio.load(raw)
console.log('cheerio:',$("#id").text())
/**
* 获取到的是Object对象,只有属性,没有函数,还需要转换为Document
* 但并不是说parse5就不是parseHtml,如果浏览器不需要支持js,不需要搜索,只进行渲染,没有dom也是可以的
*/
const parse5 = require("parse5")
const ast = parse5.parse(raw)
console.log(ast instanceof Object)
- 正则不可以
正则也是解析器,效率不见得比parseHtml高,且容易一定会出现问题
- 查看Parse HTML的结果 software.hixie.ch/utilities/j…
解析器的作用
如图,使用parse5将html转换为右侧的dom结构,之后操作dom结构,获取对应的信息即可
parse5/htmlparser2都是cheerio的依赖
cheerio是node常用的爬虫
渲染流水线中解析器有多少种?
一个标准的text/html包含三类规范,对应三个组织
Html:whatcg
Css:w3c
Js:tc39
三类解析器 【至少】
注：js可以解释,也可以解析,解析的结构存在内存中,执行时交给vm执行
Html解析器解析流程
个人习惯用中间节点的维度描述问题
字节流【bytes】->字符流/输出流【characters】->词语【token】->节点【ast/tree】->Dom树【用于实现脚本,给js用的,不支持脚本的不用实现】
官方如图
奇怪的关键词增加了
- 输出流
- 解码
- 分词器
- 词语/token
- document
