前端字符串解析HTML

parse5 工具集

一、parse5 - HTML解析器和序列化器

注意:默认情况下,所有函数都使用默认树适配器生成的树格式。 可以通过提供自定义树适配器实现来更改树格式。

详见 parse5-htmlparser2-tree-adapter

方法:

1. parse - 解析 HTML 字符串,返回一个 Document

const parse5 = require('parse5');
const document = parse5.parse('Hi there!');
console.log(document);

结果如下:
前端字符串解析HTML_第1张图片
注意: parse 方法返回的是一个 Document,即使参数是 HTML 节点字符串返回的树结构也是从 document 开始,HTML 节点作为 body 的子节点,例如:

const parse5 = require('parse5');
const document = parse5.parse('

Hi there!

'); console.log(document)

结果如下:在这里插入图片描述

2. parseFragment - 解析 HTML 片段,返回 DocumentFragment

const parse5 = require('parse5');
const documentFragment = parse5.parseFragment('
'); console.log(documentFragment);

结果如下:
在这里插入图片描述
在解析的

元素的上下文中解析 HTML 片段。

const trFragment = parse5.parseFragment(documentFragment.childNodes[0], '
'); console.log(trFragment)

结果如下:
前端字符串解析HTML_第2张图片

3. serialize - 将 AST 节点序列化为 HTML 字符串,返回字符串

const document = parse5.parse('Hi there!')
console.log(document)

const html = parse5.serialize(document)
console.log(html)

const body = parse5.serialize(document.childNodes[1].childNodes[1])
console.log(body)

const documentFragment = parse5.parseFragment('
Hello parse5!
') console.log(documentFragment) const div = parse5.serialize(documentFragment) console.log(div)

结果依次:
前端字符串解析HTML_第3张图片

你可能感兴趣的:(JavaScript)

Shake it, baby