Awesome

hast-util-from-html-isomorphic

hast utility that turns HTML into a syntax tree, using browser APIs when available, so it has a smaller bundle size there.

Contents

• What is this?
• When should I use this?
• Install
• Use
• API
  • fromHtmlIsomorphic(value[, options])
  • Options
• Examples
  • Example: fragment versus document
• Syntax
• Types
• Compatibility
• Security
• Related
• Contribute
• License

What is this?

This package is a utility that takes HTML input and turns it into a hast syntax tree.

In a browser, this uses hast-util-from-dom, otherwise it uses hast-util-from-html.

When should I use this?

If you want to get a syntax tree without positional info, and your code should be isomorphic (it could run anywhere), as it results in a smaller bundle size.

If you need positional information, use hast-util-from-html.

If you don’t care about positional info and your code only runs in browsers, use hast-util-from-dom.

Finally you can use the utility hast-util-to-html, or hast-util-to-dom with .outerHTML, to do the inverse of this utility. That turns hast into HTML.

Install

This package is ESM only. In Node.js (version 16+), install with npm:

npm install hast-util-from-html-isomorphic

In Deno with esm.sh:

import {fromHtmlIsomorphic} from 'https://esm.sh/hast-util-from-html-isomorphic@2'

In browsers with esm.sh:

<script type="module">
  import {fromHtmlIsomorphic} from 'https://esm.sh/hast-util-from-html-isomorphic@2?bundle'
</script>

Use

import {fromHtmlIsomorphic} from 'hast-util-from-html-isomorphic'

const tree = fromHtmlIsomorphic('<h1>Hello, world!</h1>', {fragment: true})

console.log(tree)

Yields (positional info and data omitted for brevity):

{
  type: 'root',
  children: [
    {
      type: 'element',
      tagName: 'h1',
      properties: {},
      children: [Array],
    }
  ]
}

API

This package exports the identifier fromHtmlIsomorphic. There is no default export.

fromHtmlIsomorphic(value[, options])

Turn serialized HTML into a hast tree.

Parameters

• value (string) — serialized HTML to parse
• options (Options, optional) — configuration

Returns

Tree (Root).

Options

Configuration (TypeScript type).

Fields

fragment

Whether to parse as a fragment (boolean, default: false). The default is to expect a whole document. In document mode, unopened html, head, and body elements are opened.

Examples

Example: fragment versus document

The following example shows the difference between parsing as a document and parsing as a fragment:

import {fromHtml} from 'hast-util-from-html-isomorphic'

const doc = '<title>Hi!</title><h1>Hello!</h1>'

console.log(fromHtml(doc))

console.log(fromHtml(doc, {fragment: true}))

…yields (positional info and data omitted for brevity):

{
  type: 'root',
  children: [
    {type: 'element', tagName: 'html', properties: {}, children: [Array]}
  ]
}

{
  type: 'root',
  children: [
    {type: 'element', tagName: 'title', properties: {}, children: [Array]},
    {type: 'element', tagName: 'h1', properties: {}, children: [Array]}
  ]
}

👉 Note: observe that when a whole document is expected (first example), missing elements are opened and closed.

Syntax

HTML is parsed according to WHATWG HTML (the living standard), which is also followed by browsers such as Chrome and Firefox.

Types

This package is fully typed with TypeScript. It exports the additional type Options.

Compatibility

Projects maintained by the unified collective are compatible with maintained versions of Node.js.

When we cut a new major release, we drop support for unmaintained versions of Node. This means we try to keep the current release line, hast-util-from-html-isomorphic@^1, compatible with Node.js 16.

Security

Parsing HTML is safe but using user-provided content can open you up to a cross-site scripting (XSS) attack. Use hast-util-santize to make the hast tree safe.

Related

• hast-util-from-html — parse html into hast
• hast-util-from-dom — parse a DOM tree into hast
• hast-util-to-html — serialize hast
• hast-util-sanitize — sanitize hast
• xast-util-from-xml — parse XML

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 © Remco Haszing