hast-util-to-parse5

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`.

README

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

Usage

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.

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, organisation, or community you agree to abide by its terms.

License

MIT © Titus Wormer