Convert Figma logo to code with AI

fb55 logohtmlparser2

The fast & forgiving HTML and XML parser

4,409
372
4,409
14

Top Related Projects

28,388

The fast, flexible, and elegant library for parsing and manipulating HTML and XML.

20,377

A JavaScript implementation of various web standards, for use with Node.js

3,636

HTML parsing/serialization toolset for Node.js. WHATWG HTML Living Standard (aka HTML5)-compliant.

A very fast HTML parser, generating a simplified DOM, with basic element query support.

Quick Overview

htmlparser2 is a fast and forgiving HTML/XML parser written in JavaScript. It's designed to be efficient and handle malformed markup, making it suitable for parsing real-world HTML and XML documents. The library can be used in both Node.js and browser environments.

Pros

  • High performance and efficiency compared to other parsers
  • Tolerant of malformed HTML and XML
  • Supports streaming, allowing parsing of large documents without loading them entirely into memory
  • Actively maintained with regular updates and improvements

Cons

  • Less feature-rich compared to some other parsing libraries
  • May require additional libraries for more complex DOM manipulation tasks
  • Documentation could be more comprehensive for advanced use cases
  • Learning curve might be steeper for beginners compared to simpler parsing solutions

Code Examples

Parsing an HTML string:

const { Parser } = require("htmlparser2");

const parser = new Parser({
  onopentag(name, attributes) {
    console.log(`Open tag: ${name}`);
    console.log("Attributes:", attributes);
  },
  ontext(text) {
    console.log(`Text: ${text}`);
  },
  onclosetag(name) {
    console.log(`Close tag: ${name}`);
  },
});

parser.write("<div id='main'>Hello, world!</div>");
parser.end();

Streaming parse of a file:

const { Parser } = require("htmlparser2");
const fs = require("fs");

const parser = new Parser({
  onopentag(name, attributes) {
    if (name === "a" && attributes.href) {
      console.log(`Found link: ${attributes.href}`);
    }
  },
});

const readStream = fs.createReadStream("example.html");
readStream.pipe(parser);

Creating a DOM:

const { parseDocument } = require("htmlparser2");
const { DomHandler } = require("domhandler");

const html = "<div><p>Hello, world!</p></div>";
const handler = new DomHandler((error, dom) => {
  if (error) {
    console.error(error);
  } else {
    console.log(dom);
  }
});

const parser = new Parser(handler);
parser.write(html);
parser.end();

Getting Started

To use htmlparser2 in your project, first install it via npm:

npm install htmlparser2

Then, you can import and use it in your JavaScript code:

const { Parser } = require("htmlparser2");

const parser = new Parser({
  onopentag(name, attributes) {
    console.log(`Found tag: ${name}`);
  },
  ontext(text) {
    console.log(`Found text: ${text}`);
  },
  onclosetag(name) {
    console.log(`Closed tag: ${name}`);
  },
});

parser.write("<div>Hello, world!</div>");
parser.end();

This basic example sets up a parser that logs information about tags and text content as it parses an HTML string.

Competitor Comparisons

28,388

The fast, flexible, and elegant library for parsing and manipulating HTML and XML.

Pros of Cheerio

  • Higher-level API for DOM manipulation, similar to jQuery
  • Easier to use for web scraping and parsing HTML
  • Faster parsing and manipulation for most common use cases

Cons of Cheerio

  • Less flexible for complex parsing scenarios
  • Limited support for XML parsing
  • Slightly larger package size

Code Comparison

Cheerio:

const $ = cheerio.load('<h2 class="title">Hello world</h2>');
$('h2.title').text('Hello there!');
$('h2').addClass('welcome');

htmlparser2:

const parser = new Parser({
  onopentag(name, attribs) {
    if (name === "h2" && attribs.class === "title") {
      // Handle the h2 tag
    }
  }
});
parser.write('<h2 class="title">Hello world</h2>');
parser.end();

Summary

Cheerio provides a more user-friendly, jQuery-like API for HTML parsing and manipulation, making it ideal for web scraping and simple DOM operations. It's generally faster for common tasks but may be less suitable for complex parsing scenarios.

htmlparser2 offers a lower-level, event-driven approach, providing more flexibility for advanced parsing needs and better support for XML. It has a smaller package size but requires more code for basic operations.

Choose Cheerio for ease of use and familiarity with jQuery-like syntax, or htmlparser2 for more control over the parsing process and better performance in complex scenarios.

20,377

A JavaScript implementation of various web standards, for use with Node.js

Pros of jsdom

  • Provides a full DOM implementation, simulating a browser environment
  • Supports running client-side JavaScript within the simulated environment
  • Offers a more comprehensive solution for web scraping and testing

Cons of jsdom

  • Heavier and slower compared to lightweight parsing solutions
  • May be overkill for simple HTML parsing tasks
  • Requires more setup and configuration for basic use cases

Code Comparison

htmlparser2:

const parser = new Parser({
  onopentag(name, attribs) {
    console.log(`Found tag: ${name}`);
  }
});
parser.write('<div id="main">');
parser.end();

jsdom:

const dom = new JSDOM(`<div id="main"></div>`);
console.log(dom.window.document.querySelector("#main").tagName);

Key Differences

  • htmlparser2 is a lightweight, fast HTML parser
  • jsdom provides a full DOM implementation with browser-like APIs
  • htmlparser2 is better suited for simple parsing tasks
  • jsdom is ideal for complex web scraping and testing scenarios requiring DOM manipulation

Both libraries have their strengths, and the choice depends on the specific requirements of your project. htmlparser2 excels in speed and simplicity, while jsdom offers a more comprehensive solution for browser-like environments.

3,636

HTML parsing/serialization toolset for Node.js. WHATWG HTML Living Standard (aka HTML5)-compliant.

Pros of parse5

  • Full HTML5 spec compliance, including parsing of custom elements
  • Supports both DOM and SAX-like parsing APIs
  • Better error handling and recovery for malformed HTML

Cons of parse5

  • Generally slower performance compared to htmlparser2
  • Larger package size and memory footprint
  • Steeper learning curve due to more complex API

Code Comparison

parse5:

const parse5 = require('parse5');
const document = parse5.parse('<html><body>Hello world!</body></html>');
console.log(document.childNodes[0].tagName); // 'html'

htmlparser2:

const htmlparser2 = require('htmlparser2');
const handler = new htmlparser2.DomHandler((error, dom) => {
  console.log(dom[0].name); // 'html'
});
const parser = new htmlparser2.Parser(handler);
parser.write('<html><body>Hello world!</body></html>');
parser.end();

Both libraries offer HTML parsing capabilities, but parse5 focuses on full HTML5 compliance and a more comprehensive API, while htmlparser2 prioritizes speed and simplicity. parse5 is better suited for applications requiring strict adherence to the HTML5 spec, while htmlparser2 is ideal for scenarios where performance is critical and full spec compliance is not necessary.

A very fast HTML parser, generating a simplified DOM, with basic element query support.

Pros of node-html-parser

  • Lightweight and fast, with a smaller footprint than htmlparser2
  • Simpler API, making it easier to use for basic parsing tasks
  • Built-in DOM manipulation methods, reducing the need for additional libraries

Cons of node-html-parser

  • Less comprehensive parsing capabilities compared to htmlparser2
  • May not handle complex or malformed HTML as well as htmlparser2
  • Smaller community and fewer updates, potentially leading to slower bug fixes

Code Comparison

node-html-parser:

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

htmlparser2:

const htmlparser2 = require('htmlparser2');
const dom = htmlparser2.parseDocument('<ul id="list"><li>Hello World</li></ul>');
console.log(dom.children[0].children[0].children[0].data);

Both libraries offer HTML parsing capabilities, but node-html-parser provides a more straightforward API for simple tasks. htmlparser2, on the other hand, offers more advanced features and better handles complex HTML structures. The choice between the two depends on the specific requirements of your project, with node-html-parser being suitable for simpler parsing needs and htmlparser2 for more comprehensive parsing tasks.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

htmlparser2

NPM version Downloads Node.js CI Coverage

The fast & forgiving HTML/XML parser.

htmlparser2 is the fastest HTML parser, and takes some shortcuts to get there. If you need strict HTML spec compliance, have a look at parse5.

Installation

npm install htmlparser2

A live demo of htmlparser2 is available on AST Explorer.

Ecosystem

NameDescription
htmlparser2Fast & forgiving HTML/XML parser
domhandlerHandler for htmlparser2 that turns documents into a DOM
domutilsUtilities for working with domhandler's DOM
css-selectCSS selector engine, compatible with domhandler's DOM
cheerioThe jQuery API for domhandler's DOM
dom-serializerSerializer for domhandler's DOM

Usage

htmlparser2 itself provides a callback interface that allows consumption of documents with minimal allocations. For a more ergonomic experience, read Getting a DOM below.

import * as htmlparser2 from "htmlparser2";

const parser = new htmlparser2.Parser({
    onopentag(name, attributes) {
        /*
         * This fires when a new tag is opened.
         *
         * If you don't need an aggregated `attributes` object,
         * have a look at the `onopentagname` and `onattribute` events.
         */
        if (name === "script" && attributes.type === "text/javascript") {
            console.log("JS! Hooray!");
        }
    },
    ontext(text) {
        /*
         * Fires whenever a section of text was processed.
         *
         * Note that this can fire at any point within text and you might
         * have to stitch together multiple pieces.
         */
        console.log("-->", text);
    },
    onclosetag(tagname) {
        /*
         * Fires when a tag is closed.
         *
         * You can rely on this event only firing when you have received an
         * equivalent opening tag before. Closing tags without corresponding
         * opening tags will be ignored.
         */
        if (tagname === "script") {
            console.log("That's it?!");
        }
    },
});
parser.write(
    "Xyz <script type='text/javascript'>const foo = '<<bar>>';</script>",
);
parser.end();

Output (with multiple text events combined):

--> Xyz
JS! Hooray!
--> const foo = '<<bar>>';
That's it?!

This example only shows three of the possible events. Read more about the parser, its events and options in the wiki.

Usage with streams

While the Parser interface closely resembles Node.js streams, it's not a 100% match. Use the WritableStream interface to process a streaming input:

import { WritableStream } from "htmlparser2/lib/WritableStream";

const parserStream = new WritableStream({
    ontext(text) {
        console.log("Streaming:", text);
    },
});

const htmlStream = fs.createReadStream("./my-file.html");
htmlStream.pipe(parserStream).on("finish", () => console.log("done"));

Getting a DOM

The DomHandler produces a DOM (document object model) that can be manipulated using the DomUtils helper.

import * as htmlparser2 from "htmlparser2";

const dom = htmlparser2.parseDocument(htmlString);

The DomHandler, while still bundled with this module, was moved to its own module. Have a look at that for further information.

Parsing Feeds

htmlparser2 makes it easy to parse RSS, RDF and Atom feeds, by providing a parseFeed method:

const feed = htmlparser2.parseFeed(content, options);

Performance

After having some artificial benchmarks for some time, @AndreasMadsen published his htmlparser-benchmark, which benchmarks HTML parses based on real-world websites.

At the time of writing, the latest versions of all supported parsers show the following performance characteristics on GitHub Actions (sourced from here):

htmlparser2        : 2.17215 ms/file ± 3.81587
node-html-parser   : 2.35983 ms/file ± 1.54487
html5parser        : 2.43468 ms/file ± 2.81501
neutron-html5parser: 2.61356 ms/file ± 1.70324
htmlparser2-dom    : 3.09034 ms/file ± 4.77033
html-dom-parser    : 3.56804 ms/file ± 5.15621
libxmljs           : 4.07490 ms/file ± 2.99869
htmljs-parser      : 6.15812 ms/file ± 7.52497
parse5             : 9.70406 ms/file ± 6.74872
htmlparser         : 15.0596 ms/file ± 89.0826
html-parser        : 28.6282 ms/file ± 22.6652
saxes              : 45.7921 ms/file ± 128.691
html5              : 120.844 ms/file ± 153.944

How does this module differ from node-htmlparser?

In 2011, this module started as a fork of the htmlparser module. htmlparser2 was rewritten multiple times and, while it maintains an API that's mostly compatible with htmlparser, the projects don't share any code anymore.

The parser now provides a callback interface inspired by sax.js (originally targeted at readabilitySAX). As a result, old handlers won't work anymore.

The DefaultHandler was renamed to clarify its purpose (to DomHandler). The old name is still available when requiring htmlparser2 and your code should work as expected.

The RssHandler was replaced with a getFeed function that takes a DomHandler DOM and returns a feed object. There is a parseFeed helper function that can be used to parse a feed from a string.

Security contact information

To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.

htmlparser2 for enterprise

Available as part of the Tidelift Subscription.

The maintainers of htmlparser2 and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. Learn more.

NPM DownloadsLast 30 Days