html5parser
A simple and fast html5 parser, the result could be manipulated like ECMAScript ESTree, especially about the attributes.
Introduction
Currently, all the public parsers, like htmlparser2, parser5, etc,
could not be used for manipulate attributes. For example: the htmlparser2
has startIndex and endIndex for tags and texts, but no range information
about attribute name and values. This project is used for resolve this problem.
Just added ranges for tags, texts, and attribute name and values, and else,
with the information of attribute quote type, (without or with '/").
Install
# var npm
npm install html5parser -S
# var yarn
yarn add html5parserQuick Start
import * as html from 'html5parser'
const input = `
<!DOCTYPE html>
<html>
<body>
<h1 id="hello">Hello world</h1>
</body>
</html>
`
const ast = html.parse(input)
html.walk(ast, {
enter: (node) => {
if (node.type === html.SyntaxKind.Tag) {
for (const attr of node.attributes) {
if (attr.value !== void 0) {
// This is used for present the ranges of attributes.
console.log(input.substring(attr.value.start, attr.value.end))
// you can get the value directly:
console.log(attr.value.value)
}
}
}
}
})
// Should output:
// helloAPI
// Top level API, parse html to ast tree
export function parse(input: string): INode[];
// Low level API, get tokens
export function tokenize(input: string): IToken[];
// Utils API, walk the ast tree
export function walk(ast: INode[], options: IWalkOptions): void;Abstract Syntax Tree Spec
IBaseNode: the base struct for all the nodes:export interface IBaseNode { start: number; // the start position of the node (include) end: number; // the end position of the node (exclude) }
IText: The text node struct:export interface IText extends IBaseNode { type: SyntaxKind.Text; value: string; // text value }
ITag: The tag node structexport interface ITag extends IBaseNode { type: SyntaxKind.Tag; open: IText; // the open tag, just like <div>, <img/>, etc. name: string; // the tag name, just like div, img, etc. attributes: IAttribute[]; // the attributes body: Array<ITag | IText> // with close tag, if body is empty, it is empty array, just like <div></div> | void // self closed, just like <div/>, <img> | null; // eof before open tag end just liek <div close: IText // with close tag, just like </div>, etc. | void // self closed, just like open with <div/> <img> | null; // eof before open tag end or without close tag for not self closed tag }
IAttribute: the attribute struct:export interface IAttribute extends IBaseNode { name: IText; // the name of the attribute value: IAttributeValue | void; // the value of the attribute }
IAttributeValue: the attribute value struct:// NOTE: the range start and end contains quotes. export interface IAttributeValue extends IBaseNode { value: string; // the value text, exclude leading and tailing `'` or `"` quote: '\'' | '"' | void; // the quote type }
INode: the exposed nodes:export type INode = ITag | IText
Warning
This is use for HTML5, that means:
- All tags like
<? ... ?>,<! ... >(except for<!doctype ...>, case insensitive) is treated asComment, that meansCDATASectionis treated as comment. - Special tag names:
"!doctype"(case insensitive), the doctype declaration"!": short comment"!--": normal comment""(empty string): short comment, for<? ... >, the leading?is treated as comment content
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent