htmlparser2

Use DomUtils (re-exported by htmlparser2) to find nodes within a DOM tree. You can find elements by ID, tag name, class, or via custom test functions. For CSS selector queries, it is recommended to use the css-select package.

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"

You can modify the DOM tree using DomUtils methods like removeElement, appendChild, prependChild, append, prepend, and replaceElement. To convert the DOM back into an HTML string, use DomUtils.getOuterHTML(dom) (which uses dom-serializer internally).

import * as htmlparser2 from "htmlparser2";

const dom = htmlparser2.parseDocument(
    `<ul><li class="apple">Apple</li><li class="orange">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 class=\"orange\">Orange</li></ul>"

Install the htmlparser2 package using npm to get started with the fast and forgiving HTML/XML parser.

npm install htmlparser2

To process streaming input, use the WritableStream class from htmlparser2/WritableStream. This allows you to pipe Node.js readable streams directly into the parser.

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

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"));

When initializing a Parser or using parseDocument, you can provide an options object to control parsing behavior:

Use the parseFeed method to quickly parse web feeds. It returns an object containing type, title, link, description, updated, author, and items (an array of entries), or null if the format is unrecognized.

Note: xmlMode: true is enabled by default for parseFeed. If providing custom options, ensure you include xmlMode: true.

const feed = htmlparser2.parseFeed(content);

The Parser class provides a low-allocation callback interface. You can instantiate a new Parser by passing a handler object containing optional event callbacks. This is useful for processing documents with minimal memory overhead.

import * as htmlparser2 from "htmlparser2";

const parser = new htmlparser2.Parser({
    onopentag(name, attributes) {
        if (name === "script" && attributes.type === "text/javascript") {
            console.log("JS! Hooray!");
        }
    },
    ontext(text) {
        console.log("-->", text);
    },
    onclosetag(tagname) {
        if (tagname === "script") {
            console.log("That's it?!");
        }
    },
});

parser.write("Xyz <script type='text/javascript'>const foo = '<<bar>>';</script>");
parser.end();

The parseDocument helper parses a string and returns a DOM tree (a Document node from domhandler). It accepts an optional second argument for both parser and domhandler options (such as withStartIndices or withEndIndices).

import * as htmlparser2 from "htmlparser2";

const dom = htmlparser2.parseDocument(
    `<ul id="fruits">
        <li class="apple">Apple</li>
        <li class="orange">Orange</li>
    </ul>`,
    {
        // Parser options
        xmlMode: true,

        // domhandler options
        withStartIndices: true,
        withEndIndices: true,
    }
);