htmlparser2

What is htmlparser2?

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.

What are htmlparser2's main functionalities?

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

Other packages similar to htmlparser2

cheerio

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

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

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

#htmlparser2

A forgiving HTML/XML/RSS parser written in JS for NodeJS. The parser can handle streams (chunked data) and supports custom handlers for writing custom DOMs/output.

##Installing npm install htmlparser2

##Usage

var htmlparser = require("htmlparser2");
var parser = new htmlparser.Parser({
	onopentag: function(name, attribs){
		if(name === "script" && attribs["language"] === "javascript"){
			console.log("JS! Hooray!");
		}
	},
	ontext: function(text){
		console.log("-->", text);
	},
	onclosetag: function(tagname){
		if(tagname === "script"){
			console.log("That's it?!");
		}
	}
});
parser.write("Xyz <script language= javascript>var foo = '<<bar>>';< /  script>");
parser.done();

Output (simplified):

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

Read more about the parser in the wiki.

##Get a DOM The DomHandler (known as DefaultHandler in the original htmlparser module) produces a DOM (document object model) that can be manipulated using the DomUtils helper.

The DomHandler, while still bundled with this module, was recently moved to it's own module. Have a look at it for further information.

##Parsing RSS/RDF/Atom Feeds

new htmlparser.FeedHandler(function(<error> error, <object> feed){
    ...
});

##Performance Using a slightly modified version of node-expats bench.js, I received the following results (on a MacBook (late 2010)):

• htmlparser: 51779 el/s
• sax.js: 53169 el/s
• node-expat: 103388 el/s
• htmlparser2: 118614 el/s

The test may be found in tests/bench.js.

##How is this different from node-htmlparser? This is a fork of the project above. The main difference is that this is intended to be used only with node (it runs on other platforms using browserify). Besides, the code is much better structured, has less duplications and is remarkably faster than the original.

The parser now provides a callback interface close to sax.js (originally targeted at readabilitySAX). I also fixed a couple of bugs & included some pull requests for the original project (eg. RDF feed support).

The support for location data and verbose output was removed a couple of versions ago. It's still available in the verbose branch.

The DefaultHandler and the RssHandler were renamed to clarify their purpose (to DomHandler and FeedHandler). The old names are still available when requiring htmlparser2, so your code should work as expected.