htmlparser2
Advanced tools
Package description
The htmlparser2 npm package is a fast and forgiving HTML and XML parser. It can parse HTML or XML into a DOM-like structure, which can then be manipulated or serialized. It is stream-based, which means it can handle large documents in a memory-efficient manner.
Parsing HTML to DOM
This feature allows you to parse HTML and handle different parts of the document as they are parsed. The example code sets up event handlers for opening tags, text content, and closing tags, and then parses a simple HTML string.
const htmlparser2 = require('htmlparser2');
const parser = new htmlparser2.Parser({
onopentag(name, attributes) {
console.log(name, attributes);
},
ontext(text) {
console.log(text);
},
onclosetag(tagname) {
console.log(tagname);
}
}, { decodeEntities: true });
parser.write('<div class="test">Hello World</div>');
parser.end();Streaming Interface
This feature allows you to parse HTML from a stream, such as a file or network response. The example code creates a readable stream from a file and pipes it to the htmlparser2 stream, which logs tag openings, text content, and tag closings.
const htmlparser2 = require('htmlparser2');
const fs = require('fs');
const parser = new htmlparser2.WritableStream({
onopentag(name) {
console.log('Opened tag:', name);
},
ontext(text) {
console.log('Text:', text);
},
onclosetag(name) {
console.log('Closed tag:', name);
}
});
fs.createReadStream('example.html').pipe(parser);DOM Tree Manipulation
This feature allows you to manipulate the DOM tree after parsing. The example code parses an HTML string into a DOM tree, changes the class attribute of the first element, and then serializes the modified element back to an HTML string.
const htmlparser2 = require('htmlparser2');
const dom = htmlparser2.parseDocument('<div class="test">Hello World</div>');
const divElement = dom.children[0];
divElement.attribs.class = 'new-class';
const serialized = htmlparser2.DomUtils.getOuterHTML(divElement);
console.log(serialized);Cheerio is a fast, flexible, and lean implementation of core jQuery designed specifically for the server. It uses a parser similar to htmlparser2 but provides a jQuery-like API for manipulating the resulting data structure. It is generally easier to use if you are familiar with jQuery.
jsdom is a pure-JavaScript implementation of many web standards, notably the WHATWG DOM and HTML Standards, for use with Node.js. It is heavier than htmlparser2 but provides a more complete simulation of a web browser's environment, including the ability to execute scripts in the context of the parsed document.
parse5 is an HTML parsing/serialization toolset for Node.js that adheres to the HTML5 specification. It is more standards-compliant than htmlparser2 but may be slower due to its focus on correctness over speed.
Readme
The fast & forgiving HTML/XML parser.
npm install htmlparser2
A live demo of htmlparser2 is available here.
| 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 |
htmlparser2 itself provides a callback interface that allows consumption of documents with minimal allocations.
For a more ergonomic experience, read Getting a DOM below.
const htmlparser2 = require("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 stich 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.
While the Parser interface closely resembles Node.js streams, it's not a 100% match.
Use the WritableStream interface to process a streaming input:
const { WritableStream } = require("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"));
The DomHandler produces a DOM (document object model) that can be manipulated using the DomUtils helper.
const htmlparser2 = require("htmlparser2");
const dom = htmlparser2.parseDocument();
The DomHandler, while still bundled with this module, was moved to its own module.
Have a look at that for further information.
const feed = htmlparser2.parseFeed(content, options);
Note: While the provided feed handler works for most feeds, you might want to use danmactough/node-feedparser, which is much better tested and actively maintained.
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 Travis CI (please note that Travis doesn't guarantee equal conditions for all tests):
gumbo-parser : 34.9208 ms/file ± 21.4238
html-parser : 24.8224 ms/file ± 15.8703
html5 : 419.597 ms/file ± 264.265
htmlparser : 60.0722 ms/file ± 384.844
htmlparser2-dom: 12.0749 ms/file ± 6.49474
htmlparser2 : 7.49130 ms/file ± 5.74368
hubbub : 30.4980 ms/file ± 16.4682
libxmljs : 14.1338 ms/file ± 18.6541
parse5 : 22.0439 ms/file ± 15.3743
sax : 49.6513 ms/file ± 26.6032
This module started as a fork of the htmlparser module.
The main difference is that htmlparser2 is intended to be used only with node (it runs on other platforms using browserify).
htmlparser2 was rewritten multiple times and, while it maintains an API that's compatible with htmlparser in most cases, 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 and the RssHandler were renamed to clarify their purpose (to DomHandler and FeedHandler). The old names are still available when requiring htmlparser2, your code should work as expected.
To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.
htmlparser2 for enterpriseAvailable 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.
FAQs
Fast & forgiving HTML/XML parser
The npm package htmlparser2 receives a total of 27,518,353 weekly downloads. As such, htmlparser2 popularity was classified as popular.
We found that htmlparser2 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.