What is hast-util-to-parse5?
The `hast-util-to-parse5` package is a utility that converts HAST (Hypertext Abstract Syntax Tree) to Parse5's AST (Abstract Syntax Tree). This is useful for working with HTML in a structured way, allowing for transformations, analysis, and other manipulations.
What are hast-util-to-parse5's main functionalities?
Convert HAST to Parse5 AST
This feature allows you to convert a HAST node to a Parse5 AST node. The code sample demonstrates converting a simple HAST node representing a <div> element into its Parse5 AST equivalent.
const toParse5 = require('hast-util-to-parse5');
const hast = { type: 'element', tagName: 'div', properties: {}, children: [] };
const parse5Ast = toParse5(hast);
console.log(parse5Ast);
Other packages similar to hast-util-to-parse5
rehype-parse
The `rehype-parse` package is used to parse HTML into HAST. While `hast-util-to-parse5` converts HAST to Parse5 AST, `rehype-parse` works in the opposite direction by converting HTML to HAST. This makes it useful for initial parsing of HTML content before any transformations.
rehype-stringify
The `rehype-stringify` package is used to serialize HAST back into HTML. It complements `hast-util-to-parse5` by providing the reverse functionality: while `hast-util-to-parse5` converts HAST to Parse5 AST, `rehype-stringify` converts HAST to HTML strings.
parse5
The `parse5` package is a comprehensive library for parsing and serializing HTML. It provides a full suite of tools for working with HTML, including parsing HTML into its own AST format and serializing it back. `hast-util-to-parse5` specifically bridges the gap between HAST and Parse5 AST, making it a more specialized tool compared to the broader functionality of `parse5`.
hast-util-to-parse5
hast utility to transform to Parse5’s AST.
Q: Why not use a Parse5 adapter?
A: Because it’s more code weight to use adapters, and much more fragile.
Install
npm:
npm install hast-util-to-parse5
Use
var toParse5 = require('hast-util-to-parse5')
var ast = toParse5({
type: 'element',
tagName: 'h1',
properties: {},
children: [{type: 'text', value: 'World!'}]
})
console.log(ast)
Yields:
{ nodeName: 'h1',
tagName: 'h1',
attrs: [],
namespaceURI: 'http://www.w3.org/1999/xhtml',
childNodes: [ { nodeName: '#text', value: 'World!', parentNode: [Circular] } ] }
API
toParse5(tree[, space])
Transform a hast tree to Parse5’s AST.
space
Whether the root of the given tree is in the 'html'
or 'svg'
space
(enum, 'svg'
or 'html'
, default: 'html'
).
If an svg
element is found in the HTML space, toParse5
automatically
switches to the SVG space when entering the element, and switches back when
exiting.
Security
Use of hast-util-to-parse5
can open you up to a
cross-site scripting (XSS) attack if the hast tree is unsafe.
Related
Contribute
See contributing.md
in syntax-tree/.github
for ways to get
started.
See support.md
for ways to get help.
This project has a code of conduct.
By interacting with this repository, organization, or community you agree to
abide by its terms.
License
MIT © Titus Wormer