htmlparser2 vs jsdom
HTML Parsing and DOM Manipulation Libraries Comparison
1 Year
htmlparser2jsdomSimilar Packages:
What's HTML Parsing and DOM Manipulation Libraries?

HTML parsing and DOM manipulation libraries are essential tools for web developers who need to work with HTML content programmatically. These libraries allow developers to parse HTML documents, manipulate the DOM, and interact with web pages in a way that mimics browser behavior. They are particularly useful for tasks such as web scraping, testing, and server-side rendering, enabling developers to extract data from web pages or simulate user interactions without a graphical interface. Each library has its own strengths and use cases, making it important to choose the right one based on project requirements.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
htmlparser236,158,7644,529489 kB182 months agoMIT
jsdom26,845,45020,7853.11 MB533a month agoMIT
Feature Comparison: htmlparser2 vs jsdom

Performance

  • htmlparser2:

    htmlparser2 is designed for speed and efficiency, making it one of the fastest HTML parsers available. It can handle large HTML documents with minimal memory overhead, which is crucial for applications that require quick parsing of web pages.

  • jsdom:

    jsdom, while slower than htmlparser2 due to its comprehensive DOM implementation, provides a more complete simulation of a browser environment. This makes it suitable for applications that require extensive DOM manipulation and interaction.

DOM Manipulation

  • htmlparser2:

    htmlparser2 focuses primarily on parsing HTML and does not provide built-in methods for DOM manipulation. It is best used in conjunction with other libraries if you need to modify the parsed structure after extraction.

  • jsdom:

    jsdom offers a rich API for DOM manipulation, allowing developers to create, modify, and delete elements as they would in a browser. This makes it an excellent choice for testing and simulating user interactions.

Use Cases

  • htmlparser2:

    htmlparser2 is ideal for web scraping, data extraction, and scenarios where performance is critical. It is lightweight and can be easily integrated into projects that require fast parsing without the need for a full DOM.

  • jsdom:

    jsdom is perfect for testing JavaScript code that interacts with the DOM, as it provides a complete browser-like environment. It is commonly used in unit tests for front-end applications to ensure that JavaScript behaves as expected.

API Complexity

  • htmlparser2:

    htmlparser2 has a simpler API focused on parsing, making it easier to use for straightforward HTML extraction tasks. However, it lacks the advanced features of a full DOM API, which may limit its use in complex scenarios.

  • jsdom:

    jsdom has a more complex API that mimics the browser's DOM API, which may require a steeper learning curve. However, this complexity allows for more powerful interactions and testing capabilities.

Community and Ecosystem

  • htmlparser2:

    htmlparser2 has a smaller ecosystem compared to jsdom, but it is widely used in projects that require fast parsing. Its simplicity and performance make it a popular choice for specific use cases.

  • jsdom:

    jsdom has a larger community and ecosystem, with many plugins and integrations available. It is often used in conjunction with testing frameworks like Jest, making it a go-to choice for developers looking to test web applications.

How to Choose: htmlparser2 vs jsdom
  • htmlparser2:

    Choose htmlparser2 if you need a fast and lightweight HTML parser that can handle large documents efficiently. It is ideal for scenarios where you need to extract data from HTML without the overhead of a full DOM implementation.

  • jsdom:

    Choose jsdom if you require a full-fledged DOM implementation that closely resembles a browser environment. It is suitable for testing and simulating browser behavior, making it a great choice for projects that involve client-side JavaScript execution.

README for htmlparser2

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

| Name | Description | | ------------------------------------------------------------- | ------------------------------------------------------- | | htmlparser2 | Fast & forgiving HTML/XML parser | | domhandler | Handler for htmlparser2 that turns documents into a DOM | | domutils | Utilities for working with domhandler's DOM | | css-select | CSS selector engine, compatible with domhandler's DOM | | cheerio | The jQuery API for domhandler's DOM | | dom-serializer | Serializer 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.