@lezer/html

What is @lezer/html?

@lezer/html is a parser for HTML, built on the Lezer parser system. It provides a way to parse HTML documents into a syntax tree, which can be used for various purposes such as syntax highlighting, code analysis, and transformation.

What are @lezer/html's main functionalities?

Parsing HTML

This feature allows you to parse an HTML string into a syntax tree. The code sample demonstrates how to use the parser to convert an HTML string into a tree structure.

const {parser} = require('@lezer/html');
const input = '<div>Hello, world!</div>';
const tree = parser.parse(input);
console.log(tree.toString());

Syntax Tree Traversal

This feature allows you to traverse the syntax tree generated by the parser. The code sample shows how to use a TreeCursor to iterate over the nodes in the syntax tree.

const {parser} = require('@lezer/html');
const {TreeCursor} = require('@lezer/common');
const input = '<div>Hello, world!</div>';
const tree = parser.parse(input);
let cursor = tree.cursor();
do {
  console.log(cursor.node.type.name);
} while (cursor.next());

Custom Syntax Highlighting

This feature allows you to apply custom syntax highlighting to the parsed HTML. The code sample demonstrates how to use the highlightTree function along with custom styles to highlight different parts of the HTML.

const {parser} = require('@lezer/html');
const {highlightTree} = require('@lezer/highlight');
const {styleTags, tags} = require('@lezer/highlight');
const input = '<div>Hello, world!</div>';
const tree = parser.parse(input);
const highlightStyle = styleTags({
  TagName: tags.tagName,
  AttributeName: tags.attributeName,
  AttributeValue: tags.attributeValue
});
let highlighted = '';
highlightTree(tree, highlightStyle, (from, to, classes) => {
  highlighted += input.slice(from, to) + ' [' + classes + ']';
});
console.log(highlighted);

Other packages similar to @lezer/html

htmlparser2

htmlparser2 is a fast and forgiving HTML/XML parser. It is designed to be used in a streaming manner and can handle large documents efficiently. Compared to @lezer/html, htmlparser2 is more focused on performance and streaming parsing, while @lezer/html provides a more structured syntax tree and integration with the Lezer parser system.

parse5

parse5 is a versatile and fully spec-compliant HTML parser. It can parse HTML into a DOM-like structure and is used in many popular projects. Compared to @lezer/html, parse5 offers a more comprehensive and spec-compliant parsing, but @lezer/html provides a more lightweight and modular approach with integration into the Lezer ecosystem.

cheerio

cheerio is a fast, flexible, and lean implementation of core jQuery designed specifically for the server. It parses HTML and provides a jQuery-like API for manipulating the resulting structure. Compared to @lezer/html, cheerio is more focused on providing a familiar API for DOM manipulation, while @lezer/html is focused on parsing and syntax tree generation.

README

@lezer/html

This is an HTML grammar for the lezer parser system.

The code is licensed under an MIT license.

Interface

This package exports two bindings:

parser: Parser

The parser instance for the basic HTML grammar.

configureNesting(tags: {
tag: string,
attrs?: (attrs: {[attr: string]: string}) => boolean,
parser: {startParse: (input: Input, startPos: number, context: ParseContext) => PartialParse},
}[]): {[name: string]: NestedParser}

Create a nested parser config object which overrides the way the content of some tags is parsed. Each override is an object with a tag property holding the (lower case) tag name to override, and an optional attrs predicate that, if given, has to return true for the tag's attributes for this override to apply.

The parser property describes the way the tag's content is parsed.

Changelog

0.15.1 (2022-02-16)

Bug fixes

Make sure the tree for unfinished self-closing tags shows them as self-closing.