html-dom-parser



HTML to DOM parser that works on both the server (Node.js) and the client (browser):

``
HTMLDOMParser(string[, options])
`

The parser converts an HTML string to a JavaScript object that describes the DOM tree.

For example:

`js
import parse from 'html-dom-parser';

parse('

Hello, World!

');
`

Output

`js
[
Element {
type: 'tag',
parent: null,
prev: null,
next: null,
startIndex: null,
endIndex: null,
children: [
Text {
type: 'text',
parent: [Circular],
prev: null,
next: null,
startIndex: null,
endIndex: null,
data: 'Hello, World!'
}
],
name: 'p',
attribs: {}
}
]
`




JSFiddle | Examples

Install

NPM:

`sh
npm install html-dom-parser --save
`

Yarn:

`sh
yarn add html-dom-parser
`

CDN:

`html


`

Usage

Import with ES Modules:

`js
import parse from 'html-dom-parser';
`

Require with CommonJS:

`js
const parse = require('html-dom-parser').default;
`

Parse empty string:

`js
parse('');
`

Output:


`js
[]
`

Parse string:

`js
parse('Hello, World!');
`

Output

`js
[
Text {
type: 'text',
parent: null,
prev: null,
next: null,
startIndex: null,
endIndex: null,
data: 'Hello, World!'
}
]
`




Parse element with attributes:

`js
parse('

Hello, world!

');
`

Output

`js
[
Element {
type: 'tag',
parent: null,
prev: null,
next: null,
startIndex: null,
endIndex: null,
children: [ [Text], [Element], [Text] ],
name: 'p',
attribs: { class: 'foo', style: 'color: #bada55' }
}
]
`




The server parser is a wrapper of htmlparser2 parseDOM but with the root parent node excluded. The next section shows the available options you can use with the server parse.

The client parser mimics the server parser by using the DOM API to parse the HTML string.

Options (server only)

Because the server parser is a wrapper of htmlparser2, which implements domhandler, you can alter how the server parser parses your code with the options:

`ts
export interface ParserOptions {
/**
* Indicates whether special tags (