htmlparser2 vs parse5

HTML Parsing Libraries for Node.js and Browser Environments

htmlparser2 and parse5 are both widely used HTML parsing libraries in the JavaScript ecosystem, designed to parse HTML documents into structured representations such as DOM trees or event streams. htmlparser2 provides a fast, streaming SAX-style parser with optional DOM support via additional modules, while parse5 implements the full WHATWG HTML specification and produces standards-compliant DOM trees that closely match browser behavior. Both are commonly used in tooling like linters, scrapers, static site generators, and testing utilities where accurate or performant HTML processing is required.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package	Downloads	Stars	Size	Issues	Publish	License
Package	Downloads	Stars	Size	Issues	Publish	License
htmlparser2	67,267,860	4,789	235 kB	12	a month ago	MIT
parse5	0	3,886	337 kB	34	23 minutes ago	MIT

htmlparser2 vs parse5: Parsing HTML the Right Way

When you need to read, transform, or analyze HTML in JavaScript—whether in Node.js or the browser—you’ll likely reach for a dedicated parser. Two of the most battle-tested options are htmlparser2 and parse5. They solve similar problems but with different priorities: speed and flexibility versus spec compliance and correctness. Let’s dig into how they differ in practice.

🧩 Parsing Model: Streaming Events vs Full DOM Tree

htmlparser2 uses a SAX-style (event-driven) parser by default. It emits events as it encounters tags, text, and attributes—ideal for low-memory, one-pass processing.

// htmlparser2: Event-based parsing
const { Parser } = require('htmlparser2');

const parser = new Parser({
  onopentag(name, attribs) {
    console.log(`Tag: ${name}`, attribs);
  },
  ontext(text) {
    if (text.trim()) console.log(`Text: ${text}`);
  }
});

parser.write('<div class="card">Hello</div>');
parser.end();

You can also build a DOM tree using domhandler, but it’s an extra step:

// htmlparser2 + domhandler: Build a DOM
const { Parser } = require('htmlparser2');
const { DomHandler } = require('domhandler');

const handler = new DomHandler((error, dom) => {
  if (!error) console.log(dom);
});
const parser = new Parser(handler);
parser.write('<p>Hi</p>');
parser.end();

parse5, by contrast, always builds a full DOM tree that follows the official HTML spec. There’s no streaming mode—it parses the entire document upfront.

// parse5: Parse to DOM tree
const parse5 = require('parse5');

const document = parse5.parse('<!DOCTYPE html><html><body><p>Hello</p></body></html>');
console.log(document); // Full tree with proper node types

// Or parse a fragment
const fragment = parse5.parseFragment('<li>Item</li>');

💡 Use htmlparser2 if you’re scanning large files and only care about certain tags (e.g., extracting all <img> sources). Use parse5 when you need the complete, structured document.

📜 Spec Compliance: “Good Enough” vs “Exactly Like a Browser”

htmlparser2 is not fully compliant with the WHATWG HTML specification. It’s forgiving and flexible—it treats   and   the same, allows arbitrary self-closing tags like <my-component/>, and doesn’t enforce complex nesting rules.

This makes it great for non-standard HTML, JSX, or templating languages:

// htmlparser2 happily parses this
const html = '<Component attr="value"/>';
// Parses as a self-closing tag

parse5, however, strictly follows the HTML spec. It knows that only certain void elements (like <img>,  ) can be self-closing, and it reconstructs the DOM exactly as a browser would—even with broken markup.

// parse5 corrects this invalid nesting
const badHtml = '<table><tr><div>Oops</div></tr></table>';
const tree = parse5.parse(badHtml);
// Result: <div> gets moved outside the table, just like in Chrome

If your tool must behave identically to a browser (e.g., a testing utility or SSR renderer), parse5 is the only safe choice.

⚙️ Output Format: Custom Nodes vs Standard DOM

htmlparser2’s DOM (via domhandler) uses a simplified node structure:

// htmlparser2 DOM node example
{
  type: 'tag',
  name: 'div',
  attribs: { class: 'card' },
  children: [ /* ... */ ]
}

It’s easy to traverse but not compatible with standard DOM APIs like node.nodeType or element.getAttribute().

parse5 produces nodes that match the DOM spec closely. While not identical to browser Element objects, they include standard properties like nodeName, childNodes, and parentNode:

// parse5 node example
{
  nodeName: 'div',
  tagName: 'div',
  attrs: [{ name: 'class', value: 'card' }],
  childNodes: [ /* ... */ ],
  parentNode: /* ... */
}

This matters if you’re using libraries that expect spec-compliant structures (e.g., jsdom uses parse5 under the hood).

🛠️ Error Handling and Recovery

Both parsers handle malformed HTML gracefully, but differently.

htmlparser2 tries to keep going without strict correction. If you have unclosed tags, it won’t auto-close them unless configured to.

parse5 applies the HTML error recovery algorithm defined by the spec. For example:

<!-- Input -->
<div>
  <p>Start
  <div>Nested</div>
  Continue?
</div>

A browser (and parse5) will auto-close the  before the inner <div>. htmlparser2 will treat “Continue?” as inside the .

Use parse5 when you need predictable, standardized recovery—critical for security-sensitive tools like sanitizers.

🌐 Real-World Use Cases

Case 1: Web Scraper That Extracts Links

You’re crawling pages and only need <a href> values.

✅ Best choice: htmlparser2
Why? Stream through gigabytes of HTML with minimal memory, stop after finding 10 links.

let linkCount = 0;
const parser = new Parser({
  onopentag(name, attribs) {
    if (name === 'a' && attribs.href) {
      console.log(attribs.href);
      if (++linkCount >= 10) parser.end();
    }
  }
});

Case 2: Static Site Generator with SSR

You render React/Vue to HTML, then manipulate the output before serving.

✅ Best choice: parse5
Why? Must match browser DOM structure exactly for hydration to work.

const html = renderToString(App);
const document = parse5.parse(html);
// Inject meta tags, modify head, etc.
const finalHtml = parse5.serialize(document);

Case 3: Linter for Custom Templating Language

Your templates use <MyComponent prop={x}/> syntax.

✅ Best choice: htmlparser2
Why? Tolerates non-HTML constructs; parse5 would reject or mangle them.

🔄 Interoperability with Other Tools

jsdom uses parse5 internally for parsing—so if you’re already using jsdom, you’re indirectly relying on parse5.
cheerio (jQuery-like server-side DOM) uses htmlparser2 by default but can be configured to use parse5 for better spec compliance.

// Cheerio with parse5
const cheerio = require('cheerio');
const $ = cheerio.load('<div>Test</div>', {
  parser: require('parse5')
});

📊 Summary: Key Differences

Feature	`htmlparser2`	`parse5`
Parsing Style	Streaming (SAX) or DOM (with handler)	Full DOM tree only
Spec Compliance	Loose, forgiving	Full WHATWG HTML spec
Self-Closing Tags	Allows any (`<x/>`)	Only valid void elements (`<img/>`)
Memory Usage	Low (streaming)	Higher (full tree)
DOM Structure	Custom, simplified	Standards-aligned
Best For	Scraping, linting, transforms	SSR, testing, sanitization

💡 Final Recommendation

Need speed, low memory, or custom syntax support? → Go with htmlparser2.
Need browser-identical parsing for correctness or compatibility? → Choose parse5.

Neither is “better”—they’re optimized for different jobs. Pick based on whether your priority is performance and flexibility or accuracy and standards compliance.

How to Choose: htmlparser2 vs parse5

htmlparser2:
Choose htmlparser2 if you need a lightweight, high-performance parser for tasks like scraping, linting, or transforming HTML where strict spec compliance isn't critical. Its streaming event-based API allows low-memory processing of large documents, and it supports XML-like syntax (e.g., self-closing tags) out of the box — useful for JSX or templating languages. Avoid it when you need exact browser-compatible parsing behavior.
parse5:
Choose parse5 when you require full WHATWG HTML specification compliance, such as when building tools that must replicate browser parsing exactly (e.g., SSR frameworks, testing libraries, or HTML sanitizers). It produces standard DOM trees compatible with the DOM spec and handles edge cases like malformed markup the same way modern browsers do. Prefer it over htmlparser2 when correctness trumps raw speed or memory efficiency.

Popular Comparisons

htmlparser2

parse5

README for htmlparser2

htmlparser2

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?!

Parser events

All callbacks are optional. The handler object you pass to Parser may implement any subset of these:

Event	Description
`onopentag(name, attribs, isImplied)`	Opening tag. `attribs` is an object mapping attribute names to values. `isImplied` is `true` when the tag was opened implicitly (HTML mode only).
`onopentagname(name)`	Emitted for the tag name as soon as it is available (before attributes are parsed).
`onattribute(name, value, quote)`	Attribute. `quote` is `"` / `'` / `null` (unquoted) / `undefined` (no value, e.g. `disabled`).
`onclosetag(name, isImplied)`	Closing tag. `isImplied` is `true` when the tag was closed implicitly (HTML mode only).
`ontext(data)`	Text content. May fire multiple times for a single text node.
`oncomment(data)`	Comment (content between `<!--` and `-->`).
`oncdatastart()`	Opening of a CDATA section (`<![CDATA[`).
`oncdataend()`	End of a CDATA section (`]]>`).
`onprocessinginstruction(name, data)`	Processing instruction (e.g. `<?xml ...?>`).
`oncommentend()`	Fires after a comment has ended.
`onparserinit(parser)`	Fires when the parser is initialized or reset.
`onreset()`	Fires when `parser.reset()` is called.
`onend()`	Fires when parsing is complete.
`onerror(error)`	Fires on error.

Parser options

Option	Type	Default	Description
`xmlMode`	`boolean`	`false`	Treat the document as XML. This affects entity decoding, self-closing tags, CDATA handling, and more. Set this to `true` for XML, RSS, Atom and RDF feeds.
`decodeEntities`	`boolean`	`true`	Decode HTML entities (e.g. `&` -> `&`).
`lowerCaseTags`	`boolean`	`!xmlMode`	Lowercase tag names.
`lowerCaseAttributeNames`	`boolean`	`!xmlMode`	Lowercase attribute names.
`recognizeSelfClosing`	`boolean`	`xmlMode`	Recognize self-closing tags (e.g. `<br/>`). Always enabled in `xmlMode`.
`recognizeCDATA`	`boolean`	`xmlMode`	Recognize CDATA sections as text. Always enabled in `xmlMode`.

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/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 parseDocument helper parses a string and returns a DOM tree (a Document node).

import * as htmlparser2 from "htmlparser2";

const dom = htmlparser2.parseDocument(
    `<ul id="fruits">
        <li class="apple">Apple</li>
        <li class="orange">Orange</li>
    </ul>`,
);

parseDocument accepts an optional second argument with both parser and DOM handler options:

const dom = htmlparser2.parseDocument(data, {
    // Parser options
    xmlMode: true,

    // domhandler options
    withStartIndices: true, // Add `startIndex` to each node
    withEndIndices: true,   // Add `endIndex` to each node
});

Searching the DOM

The DomUtils module (re-exported on the main htmlparser2 export) provides helpers for finding nodes:

import * as htmlparser2 from "htmlparser2";

const dom = htmlparser2.parseDocument(`<div><p id="greeting">Hello</p></div>`);

// Find elements by ID, tag name, or class
const greeting = htmlparser2.DomUtils.getElementById("greeting", dom);
const paragraphs = htmlparser2.DomUtils.getElementsByTagName("p", dom);

// Find elements with custom test functions
const all = htmlparser2.DomUtils.findAll(
    (el) => el.attribs?.class === "active",
    dom,
);

// Get text content
htmlparser2.DomUtils.textContent(greeting); // "Hello"

For CSS selector queries, use css-select:

import { selectAll, selectOne } from "css-select";

const results = selectAll("ul#fruits > li", dom);
const first = selectOne("li.apple", dom);

Or, if you'd prefer a jQuery-like API, use cheerio.

Modifying and serializing the DOM

Use DomUtils to modify the tree, and dom-serializer (also available as DomUtils.getOuterHTML) to serialize it back to HTML:

import * as htmlparser2 from "htmlparser2";

const dom = htmlparser2.parseDocument(
    `<ul><li>Apple</li><li>Orange</li></ul>`,
);

// Remove the first <li>
const items = htmlparser2.DomUtils.getElementsByTagName("li", dom);
htmlparser2.DomUtils.removeElement(items[0]);

// Serialize back to HTML
const html = htmlparser2.DomUtils.getOuterHTML(dom);
// "<ul><li>Orange</li></ul>"

Other manipulation helpers include appendChild, prependChild, append, prepend, and replaceElement -- see the domutils docs for the full API.

Parsing feeds

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

const feed = htmlparser2.parseFeed(content);

This returns an object with type, title, link, description, updated, author, and items (an array of feed entries), or null if the document isn't a recognized feed format.

The xmlMode option is enabled by default for parseFeed. If you pass custom options, make sure to include xmlMode: true.

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

Security contact information

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

HTML Parsing Libraries for Node.js and Browser Environments

Npm Package Weekly Downloads Trend

Github Stars Ranking

Stat Detail

htmlparser2 vs parse5: Parsing HTML the Right Way

🧩 Parsing Model: Streaming Events vs Full DOM Tree

📜 Spec Compliance: “Good Enough” vs “Exactly Like a Browser”

⚙️ Output Format: Custom Nodes vs Standard DOM

🛠️ Error Handling and Recovery

🌐 Real-World Use Cases

Case 1: Web Scraper That Extracts Links

Case 2: Static Site Generator with SSR

Case 3: Linter for Custom Templating Language

🔄 Interoperability with Other Tools

📊 Summary: Key Differences

💡 Final Recommendation

How to Choose: htmlparser2 vs parse5

Popular Comparisons

Similar Npm Packages to htmlparser2

Similar Npm Packages to parse5

README for htmlparser2

htmlparser2

Installation

Ecosystem

Usage

Parser events

Parser options

Usage with streams

Getting a DOM

Searching the DOM

Modifying and serializing the DOM

Parsing feeds

Performance

Security contact information