html-dom-parser

What is html-dom-parser?

The html-dom-parser npm package is designed to parse HTML strings into DOM nodes and vice versa, making it easier to manipulate, traverse, and work with HTML content programmatically in JavaScript environments. It is particularly useful for server-side rendering, web scraping, and building web crawlers or SEO tools.

What are html-dom-parser's main functionalities?

Parsing HTML string to DOM nodes

This feature allows you to convert an HTML string into DOM nodes, enabling programmatic manipulation of the resulting structure. It's useful for extracting information from HTML content or preparing it for further processing.

const parse = require('html-dom-parser');
const domNodes = parse('<div><p>Hello World</p></div>');

Converting DOM nodes back to HTML string

This functionality allows you to take DOM nodes (possibly after manipulation) and convert them back into an HTML string. This is particularly useful for generating HTML content dynamically or modifying existing HTML content programmatically.

const domToHtml = require('html-dom-parser').domToHtml;
const htmlString = domToHtml([{ type: 'tag', name: 'div', children: [{ type: 'tag', name: 'p', children: [{ type: 'text', data: 'Hello World' }] }] }]);

Other packages similar to html-dom-parser

cheerio

Cheerio is a fast, flexible, and lean implementation of core jQuery designed specifically for the server. It provides a simpler API for parsing, manipulating, and rendering DOM structures. Compared to html-dom-parser, Cheerio offers a more jQuery-like syntax and additional manipulation capabilities, making it more suitable for complex DOM manipulation tasks.

jsdom

jsdom is a pure-JavaScript implementation of many web standards, notably the WHATWG DOM and HTML Standards, for use with Node.js. It simulates a web browser's environment, allowing you to interact with the DOM as if you were in the browser. jsdom is more comprehensive than html-dom-parser, providing a complete simulated browser environment, making it ideal for testing web pages and running web pages or applications in a Node.js environment.

README

html-dom-parser

An HTML to DOM parser that works on both the server and the browser:

HTMLDOMParser(string[, options])

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

repl.it | JSFiddle

Installation

NPM:

$ npm install html-dom-parser --save

Yarn:

$ yarn add html-dom-parser

unpkg (CDN):

<script src="https://unpkg.com/html-dom-parser@latest/dist/html-dom-parser.js"></script>
<script>
  window.HTMLDOMParser(/* string */);
</script>

Usage

Import parser:

// server
var parser = require('html-dom-parser');

// client
var parser = window.HTMLDOMParser;

Parse input:

parser('<p>Hello, world!</p>');

Get output:

[ { type: 'tag',
    name: 'p',
    attribs: {},
    children:
     [ { data: 'Hello, world!',
         type: 'text',
         next: null,
         prev: null,
         parent: [Circular] } ],
    next: null,
    prev: null,
    parent: null } ]

On the server-side (Node.js), the parser is a wrapper of parseDOM from htmlparser2.

On the client-side (browser), the parser uses the DOM API to mimic the output schema of the server parser.

Testing

$ npm test
$ npm run lint # npm run lint:fix
$ npm run dtslint

License

MIT

Changelog

0.2.2 (2019-06-07)

Bug Fixes

• utilities: do not lowercase case-sensitive SVG tags (4083004)

Performance Improvements

• utilities: optimize case-sensitive tag replace with hash map (6aa06ee)