node-html-parser

What is node-html-parser?

The node-html-parser package is a fast HTML parser designed for Node.js, which allows users to parse HTML documents and manipulate the resulting DOM tree. It provides an API to navigate and modify the DOM, extract data, and serialize DOM back to HTML.

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

Parsing HTML string to DOM

This feature allows you to parse a string containing HTML and creates a DOM tree that can be manipulated. The example code demonstrates parsing an HTML string and logging the structure of the first child element.

const { parse } = require('node-html-parser');
const root = parse('<ul id="list"><li>Hello World</li></ul>');
console.log(root.firstChild.structure);

Querying the DOM

This feature enables querying the DOM tree for elements using selectors. The code sample shows how to select the first 'li' element and log its text content.

const { parse } = require('node-html-parser');
const root = parse('<ul id="list"><li>Hello World</li></ul>');
const listItem = root.querySelector('li');
console.log(listItem.text);

Modifying the DOM

This feature allows you to modify the DOM tree by changing the content of elements. In the example, the content of the 'li' element is changed from 'Hello World' to 'Hello Universe', and the updated HTML is logged.

const { parse } = require('node-html-parser');
const root = parse('<ul id="list"><li>Hello World</li></ul>');
const listItem = root.querySelector('li');
listItem.set_content('Hello Universe');
console.log(root.toString());

Serializing DOM back to HTML

After manipulating the DOM, you can serialize it back to an HTML string. The code sample demonstrates how to convert the DOM tree back into an HTML string and log it.

const { parse } = require('node-html-parser');
const root = parse('<div><p>Hello World</p></div>');
const html = root.toString();
console.log(html);

Other packages similar to node-html-parser

cheerio

Cheerio is a fast, flexible, and lean implementation of core jQuery designed specifically for the server. It provides a familiar jQuery interface to traverse and manipulate the DOM. Compared to node-html-parser, cheerio offers a more extensive API and is more widely used for web scraping and server-side DOM manipulation.

jsdom

jsdom is a pure-JavaScript implementation of many web standards, notably the WHATWG DOM and HTML Standards, for use with Node.js. It is more heavyweight compared to node-html-parser as it aims to provide a comprehensive simulation of a web browser's environment. jsdom is suitable for more complex tasks that require a full DOM API and the ability to execute scripts.

parse5

parse5 is an HTML parsing/serialization toolset for Node.js that adheres to the HTML5 specification. It is designed to be a spec-compliant parsing library, which makes it suitable for projects that require high standards of HTML parsing accuracy. Compared to node-html-parser, parse5 may be slower but offers better standards compliance.

README

Fast HTML Parser

Fast HTML Parser is a very fast HTML parser. Which will generate a simplified DOM tree, with basic element query support.

Per the design, it intends to parse massive HTML files in lowest price, thus the performance is the top priority. For this reason, some malformatted HTML may not be able to parse correctly, but most usual errors are covered (eg. HTML4 style no closing <li>, <td> etc).

Install

npm install --save node-html-parser

Performance

Faster than htmlparser2!

fast-html-parser: 2.18409 ms/file ± 1.37431
high5           : 4.55435 ms/file ± 2.51132
htmlparser      : 27.6920 ms/file ± 171.588
htmlparser2-dom : 6.22320 ms/file ± 3.48772
htmlparser2     : 3.58360 ms/file ± 2.23658
hubbub          : 16.1774 ms/file ± 8.95079
libxmljs        : 7.19406 ms/file ± 7.04495
parse5          : 10.7590 ms/file ± 8.09687

Tested with htmlparser-benchmark.

Usage

import { parse } from 'node-html-parser';

const root = parse('<ul id="list"><li>Hello World</li></ul>');

console.log(root.firstChild.structure);
// ul#list
//   li
//     #text

console.log(root.querySelector('#list'));
// { tagName: 'ul',
//   rawAttrs: 'id="list"',
//   childNodes:
//    [ { tagName: 'li',
//        rawAttrs: '',
//        childNodes: [Object],
//        classNames: [] } ],
//   id: 'list',
//   classNames: [] }
console.log(root.toString());
// <ul id="list"><li>Hello World</li></ul>
root.set_content('<li>Hello World</li>');
root.toString();	// <li>Hello World</li>

var HTMLParser = require('node-html-parser');

var root = HTMLParser.parse('<ul id="list"><li>Hello World</li></ul>');

API

parse(data[, options])

Parse given data, and return root of the generated DOM.

• data, data to parse

• options, parse options

  {
    lowerCaseTagName: false,  // convert tag name to lower case (hurt performance heavily)
    script: false,            // retrieve content in <script> (hurt performance slightly)
    style: false,             // retrieve content in <style> (hurt performance slightly)
    pre: false,               // retrieve content in <pre> (hurt performance slightly)
    comment: false            // retrieve comments (hurt performance slightly)
  }
  

HTMLElement#text

Get unescaped text value of current node and its children. Like innerText. (slow for the first time)

HTMLElement#rawText

Get escpaed (as-it) text value of current node and its children. May have & in it. (fast)

HTMLElement#structuredText

Get structured Text

HTMLElement#trimRight()

Trim element from right (in block) after seeing pattern in a TextNode.

HTMLElement#structure

Get DOM structure

HTMLElement#removeWhitespace()

Remove whitespaces in this sub tree.

HTMLElement#querySelectorAll(selector)

Query CSS selector to find matching nodes.

Note: only tagName, #id, .class selectors supported. And not behave the same as standard querySelectorAll() as it will stop searching sub tree after find a match.

HTMLElement#querySelector(selector)

Query CSS Selector to find matching node.

HTMLElement#appendChild(node)

Append a child node to childNodes

HTMLElement#insertAdjacentHTML(where, html)

parses the specified text as HTML and inserts the resulting nodes into the DOM tree at a specified position.

HTMLElement#firstChild

Get first child node

HTMLElement#lastChild

Get last child node

HTMLElement#setAttribute(key: string, value: string)

Set value to key attribute.

HTMLElement#removeAttribute(key: string)

Remove key attribute.

HTMLElement#getAttribute(key: string)

Get key attrubte.

HTMLElement#toString()

Same as outerHTML

HTMLElement#innerHTML

Get innerHTML.

HTMLElement#outerHTML

Get outerHTML.

HTMLElement#set_content(content: string | Node | Node[])

Set content. Notice: Do not set content of the root node.