HTML 解析器
任何 Javascript 运行时环境的 HTML 解析器 。 小,快,容易使用,而且高度定制
动机
大多数 HTML 解析器会强制您在解析结果后学习他们的 Javascript API . 他们不会允许你进入处理程序 进入解析的节点 或者让你自己创建API 最终结果 适应您的项目 而不是相反.
此解析器
- 是一个最快的 HTML 解析器 。 检查 基准。 。 。 .
- 使用像 API 那样的 DOM, 它是一个自定义的 Lite DOM 为性能而构建的
- 可以使用浏览器 DOM API 或 JsDOM 给您解析的 HTML , 允许它在任何 js 运行时环境中使用
- 你可以用你自己的东西 自定义 DOM API 喜欢获得绝对控制
- 接受回调, 这样您就可以访问正在解析的节点
- 超简单的使用。 不需要详尽的选项列表. 以表演的方式解释一切
- 处理 SVG 和 HTML 方便地包含带有 HTML 的注释和脚本标记
安装
节点
npm install @beforesemicolon/html-parser
浏览器
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Grab the latest version -->
<script src="https://unpkg.com/@beforesemicolon/html-parser/dist/client.js"></script>
<!-- Or a specific version -->
<script src="https://unpkg.com/@beforesemicolon/[email protected]/dist/client.js"></script>
</head>
<body></body>
</html>
很高兴知道
- 只与 HTML 和 SVG 标签合作. D!
- 默认处理自定义标签、样式、脚本标签和注释,而性能没有差异
<!Doctype>标签被忽略- 通过保留所有返回为文本节点的空白来尊重格式
使用量
默认情况下,它将返回一个文档片段作为根 。 API类似DOM,意思是,如果你知道DOM API 你已经知道这一点。 类似 DOM 的 API 是最小的,并且为性能而构建的, 允许您轻松 在浏览器,节点,德诺或任何其他javascript运行时环境中使用相同的代码.
见 自定义处理器区域 来理解这个类似文档的 API 的外观 .
import {parse} from "@beforesemicolon/html-parser";
const frag = parse('<h1>site title</h1>'); // return DocumentFragment-like object
frag.children[0] // h1 Element
这个解析器与 DOM API (英语) 如果您想在节点、德诺或任何 Javascript 运行时环境中使用, 确保导入 jsdom (英语) 或类似情况,并提供 文档 对象.
import * as jsdom from "jsdom";
const {JSDOM} = jsdom;
const document = new JSDOM('').window.document;
// import the parser
import {parse} from "@beforesemicolon/html-parser";
const frag = parse('<h1>site title</h1>', document); // return DocumentFragment
frag.children[0] // h1 Element
浏览器
<script>
const {parse, Doc} = window.BFS;
// uses a like Document-like object by default
const frag1 = parse('<h1>site title</h1>'); // returns DocumentFragment-like
// use the native DOM Document object
const frag2 = parse('<h1>site title</h1>', document); // returns DocumentFragment object
frag1.children[0] // h1 Element
frag2.children[0] // h1 Element
</script>
回调选项
您也可以通过调用函数作为第二个参数, 当节点被解析时调用 和创造。 这将使用文档作为默认值, 这样调用时将调用 DOM 节点和元素 .
const frag = parse('<h1>site title</h1>', (node) => {
// handle node here
});
基准
如果快速, 解析器本身会有所不同, 但取决于您在最终解析结果中使用的 API 他们的算法。 以下是两个使用 htmlparser 基准标记。 。 。 .
import {parse} from "@beforesemicolon/html-parser";
parse(aReallyMassimeHTMLString);
// avg duration: 1.86113 ms/file ± 1.09698
这比DOM文档 API快30倍
使用 jsdom 文档
这是使用自定义 jsdom (英语) 在节点J中:
import * as jsdom from "jsdom";
import {parse} from "@beforesemicolon/html-parser";
const {JSDOM} = jsdom;
const document = new JSDOM('').window.document;
parse(aReallyMassimeHTMLString, document);
// avg duration: 27.3563 ms/file ± 19.1060`
创建您的自定义处理器
这个解析器的最好之处是 能够把自己的处理器装入箱子 将 HTML 转换成任何您喜欢的 .
以下是一个简单执行的例子,你可以从这里开始.
const MyCustomDoc = {
createComment: (value: string) => ({type: 'comment', value}),
createTextNode: (value: string) => ({type: 'text', value}),
createDocumentFragment: () => {
const children: unknown[] = []
return {
type: 'fragment',
children,
appendChild: (node: unknown) => {
children.push(node)
}
}
},
createElementNS: (namespaceURI: string, tagName: string) => {
const children: unknown[] = []
const attributes: Record<string, unknown> = {}
return {
namespaceURI, // important to ALWAYS include
tagName,
children,
attributes,
type: 'node',
appendChild(node: unknown) {
children.push(node)
},
setAttribute(name: string, value: string) {
attributes[name] = value;
}
}
},
}
const result = parse<typeof MyCustomDoc>(`...`, MyCustomDoc);