Convert Figma logo to code with AI

taoqf logonode-html-parser

A very fast HTML parser, generating a simplified DOM, with basic element query support.

1,102
104
1,102
27

Top Related Projects

20,377

A JavaScript implementation of various web standards, for use with Node.js

28,388

The fast, flexible, and elegant library for parsing and manipulating HTML and XML.

The fast & forgiving HTML and XML parser

3,636

HTML parsing/serialization toolset for Node.js. WHATWG HTML Living Standard (aka HTML5)-compliant.

PostHTML is a tool to transform HTML/XML with JS plugins

Quick Overview

Node-html-parser is a lightweight HTML parser for Node.js. It provides a simple and efficient way to parse HTML strings into a DOM-like tree structure, allowing for easy manipulation and traversal of HTML content. This library is designed to be fast and have a small footprint, making it suitable for various HTML parsing tasks in Node.js applications.

Pros

  • Fast and lightweight, with minimal dependencies
  • Supports both Node.js and browser environments
  • Provides a simple API for parsing and manipulating HTML
  • Offers good performance for large HTML documents

Cons

  • Limited support for advanced CSS selectors
  • May not handle malformed HTML as robustly as some other parsers
  • Documentation could be more comprehensive
  • Lacks some advanced features found in larger HTML parsing libraries

Code Examples

  1. Parsing HTML and selecting elements:
const { parse } = require('node-html-parser');

const root = parse('<ul id="list"><li>Hello World</li></ul>');
const listItem = root.querySelector('li');
console.log(listItem.text); // Output: Hello World
  1. Modifying HTML content:
const { parse } = require('node-html-parser');

const root = parse('<div class="container"><p>Original content</p></div>');
const container = root.querySelector('.container');
container.set_content('<span>New content</span>');
console.log(root.toString()); // Output: <div class="container"><span>New content</span></div>
  1. Creating and appending new elements:
const { parse } = require('node-html-parser');

const root = parse('<div id="parent"></div>');
const parent = root.querySelector('#parent');
const newChild = parse('<p>New paragraph</p>');
parent.appendChild(newChild);
console.log(root.toString()); // Output: <div id="parent"><p>New paragraph</p></div>

Getting Started

To use node-html-parser in your project, follow these steps:

  1. Install the library using npm:

    npm install node-html-parser
    
  2. Import the library in your JavaScript file:

    const { parse } = require('node-html-parser');
    
  3. Parse HTML and start manipulating:

    const root = parse('<div class="example">Hello, World!</div>');
    const element = root.querySelector('.example');
    console.log(element.text); // Output: Hello, World!
    

Competitor Comparisons

20,377

A JavaScript implementation of various web standards, for use with Node.js

Pros of jsdom

  • More comprehensive DOM implementation, closely mimicking browser behavior
  • Supports running JavaScript within the simulated environment
  • Wider range of Web APIs and standards support

Cons of jsdom

  • Heavier and slower due to its comprehensive nature
  • More complex setup and usage for simple parsing tasks
  • Higher memory consumption, especially for large documents

Code Comparison

node-html-parser:

const { parse } = require('node-html-parser');
const root = parse('<ul id="list"><li>Hello World</li></ul>');
console.log(root.querySelector('#list').innerHTML);

jsdom:

const { JSDOM } = require('jsdom');
const dom = new JSDOM('<ul id="list"><li>Hello World</li></ul>');
console.log(dom.window.document.querySelector('#list').innerHTML);

Summary

node-html-parser is a lightweight and fast HTML parsing solution, ideal for simple parsing tasks and environments with limited resources. It offers a straightforward API for basic DOM manipulation.

jsdom provides a more complete browser-like environment, making it suitable for complex web scraping, testing, and scenarios requiring JavaScript execution. However, this comes at the cost of increased complexity and resource usage.

Choose node-html-parser for quick, simple parsing tasks, and jsdom for more advanced, browser-like functionality or when you need to run JavaScript within the parsed document.

28,388

The fast, flexible, and elegant library for parsing and manipulating HTML and XML.

Pros of Cheerio

  • More mature and widely adopted, with a larger community and ecosystem
  • Implements a jQuery-like API, making it familiar for web developers
  • Generally faster for parsing and manipulation of large HTML documents

Cons of Cheerio

  • Larger package size compared to node-html-parser
  • Not a full DOM implementation, which may limit some advanced use cases
  • Slightly steeper learning curve for developers unfamiliar with jQuery

Code Comparison

Cheerio:

const cheerio = require('cheerio');
const $ = cheerio.load('<h1 class="title">Hello, world!</h1>');
$('h1.title').text('Hello, Cheerio!');
$('h1').addClass('welcome');
console.log($.html());

node-html-parser:

const { parse } = require('node-html-parser');
const root = parse('<h1 class="title">Hello, world!</h1>');
root.querySelector('h1.title').set_content('Hello, node-html-parser!');
root.querySelector('h1').classList.add('welcome');
console.log(root.toString());

Both libraries offer HTML parsing and manipulation capabilities, but Cheerio provides a more jQuery-like experience, while node-html-parser offers a lighter-weight alternative with a different API style. The choice between them often depends on specific project requirements and developer preferences.

The fast & forgiving HTML and XML parser

Pros of htmlparser2

  • Faster parsing speed, especially for large HTML documents
  • More comprehensive and standards-compliant HTML parsing
  • Better support for parsing XML and custom entities

Cons of htmlparser2

  • Steeper learning curve due to more complex API
  • Larger package size, which may impact bundle size in browser environments
  • Less intuitive DOM manipulation compared to node-html-parser

Code Comparison

node-html-parser:

const { parse } = require('node-html-parser');
const root = parse('<ul id="list"><li>Hello World</li></ul>');
console.log(root.querySelector('#list').innerHTML);

htmlparser2:

const { Parser } = require('htmlparser2');
const handler = { ontext: (text) => console.log(text) };
const parser = new Parser(handler);
parser.write('<ul id="list"><li>Hello World</li></ul>');
parser.end();

Both libraries offer HTML parsing capabilities, but node-html-parser provides a more straightforward API for DOM manipulation, while htmlparser2 offers more flexibility and performance for complex parsing tasks. The choice between them depends on the specific requirements of your project, such as parsing speed, DOM manipulation needs, and the complexity of the HTML being processed.

3,636

HTML parsing/serialization toolset for Node.js. WHATWG HTML Living Standard (aka HTML5)-compliant.

Pros of parse5

  • Full HTML5 spec compliance, including parsing of custom elements
  • Supports both Node.js and browser environments
  • Extensive API for parsing, serializing, and traversing HTML documents

Cons of parse5

  • Larger package size and potentially slower performance
  • Steeper learning curve due to more complex API
  • Less straightforward for simple parsing tasks

Code Comparison

parse5:

const parse5 = require('parse5');
const document = parse5.parse('<html><body><div>Hello, world!</div></body></html>');
const serializedHTML = parse5.serialize(document);

node-html-parser:

const HTMLParser = require('node-html-parser');
const root = HTMLParser.parse('<html><body><div>Hello, world!</div></body></html>');
const serializedHTML = root.toString();

Summary

parse5 offers full HTML5 spec compliance and a comprehensive API, making it suitable for complex parsing tasks and cross-environment usage. However, it may be overkill for simpler use cases and has a steeper learning curve.

node-html-parser, on the other hand, provides a more lightweight and straightforward solution for basic HTML parsing needs, with potentially better performance for simple tasks. It may not be as feature-rich or spec-compliant as parse5, but it's easier to use for quick parsing operations.

Choose parse5 for full HTML5 compliance and advanced features, or node-html-parser for simpler, performance-focused parsing tasks.

PostHTML is a tool to transform HTML/XML with JS plugins

Pros of posthtml

  • More flexible and extensible plugin system
  • Supports both synchronous and asynchronous processing
  • Larger ecosystem with many available plugins

Cons of posthtml

  • Steeper learning curve due to its plugin-based architecture
  • May be overkill for simple HTML parsing tasks
  • Slightly slower performance for basic operations

Code Comparison

node-html-parser:

const parser = require('node-html-parser');
const root = parser.parse('<ul id="list"><li>Hello World</li></ul>');
console.log(root.firstChild.structure);

posthtml:

const posthtml = require('posthtml');
const html = '<ul id="list"><li>Hello World</li></ul>';
posthtml()
  .process(html)
  .then(result => console.log(result.html));

Key Differences

  • node-html-parser focuses on simple, fast HTML parsing
  • posthtml is a more comprehensive HTML transformation tool
  • node-html-parser has a simpler API for basic operations
  • posthtml offers more advanced features through its plugin system

Use Cases

  • node-html-parser: Quick HTML parsing and manipulation
  • posthtml: Complex HTML transformations and processing pipelines

Community and Ecosystem

  • node-html-parser: Smaller community, fewer extensions
  • posthtml: Larger community, more plugins and integrations available

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Fast HTML Parser NPM version Build Status

Fast HTML Parser is a very fast HTML parser. Which will generate a simplified DOM tree, with element query support.

Per the design, it intends to parse massive HTML files in lowest price, thus the performance is the top priority. For this reason, some malformatted HTML may not be able to parse correctly, but most usual errors are covered (eg. HTML4 style no closing <li>, <td> etc).

Install

npm install --save node-html-parser

Note: when using Fast HTML Parser in a Typescript project the minimum Typescript version supported is ^4.1.2.

Performance

-- 2022-08-10

html-parser     :24.1595 ms/file ± 18.7667
htmljs-parser   :4.72064 ms/file ± 5.67689
html-dom-parser :2.18055 ms/file ± 2.96136
html5parser     :1.69639 ms/file ± 2.17111
cheerio         :12.2122 ms/file ± 8.10916
parse5          :6.50626 ms/file ± 4.02352
htmlparser2     :2.38179 ms/file ± 3.42389
htmlparser      :17.4820 ms/file ± 128.041
high5           :3.95188 ms/file ± 2.52313
node-html-parser:2.04288 ms/file ± 1.25203
node-html-parser (last release):2.00527 ms/file ± 1.21317

Tested with htmlparser-benchmark.

Usage

import { parse } from 'node-html-parser';

const root = parse('<ul id="list"><li>Hello World</li></ul>');

console.log(root.firstChild.structure);
// ul#list
//   li
//     #text

console.log(root.querySelector('#list'));
// { tagName: 'ul',
//   rawAttrs: 'id="list"',
//   childNodes:
//    [ { tagName: 'li',
//        rawAttrs: '',
//        childNodes: [Object],
//        classNames: [] } ],
//   id: 'list',
//   classNames: [] }
console.log(root.toString());
// <ul id="list"><li>Hello World</li></ul>
root.set_content('<li>Hello World</li>');
root.toString();	// <li>Hello World</li>
var HTMLParser = require('node-html-parser');

var root = HTMLParser.parse('<ul id="list"><li>Hello World</li></ul>');

Global Methods

parse(data[, options])

Parse the data provided, and return the root of the generated DOM.

  • data, data to parse

  • options, parse options

    {
      lowerCaseTagName: false,		// convert tag name to lower case (hurts performance heavily)
      comment: false,           		// retrieve comments (hurts performance slightly)
      fixNestedATags: false,    		// fix invalid nested <a> HTML tags 
      parseNoneClosedTags: false, 	// close none closed HTML tags instead of removing them 
      voidTag: {
        tags: ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'],	// optional and case insensitive, default value is ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']
        closingSlash: true	// optional, default false. void tag serialisation, add a final slash <br/>
      },
      blockTextElements: {
        script: true,		// keep text content when parsing
        noscript: true,		// keep text content when parsing
        style: true,		// keep text content when parsing
        pre: true			// keep text content when parsing
      }
    }
    

valid(data[, options])

Parse the data provided, return true if the given data is valid, and return false if not.

Class

classDiagram
direction TB
class HTMLElement{
	this trimRight()
	this removeWhitespace()
	Node[] querySelectorAll(string selector)
	Node querySelector(string selector)
	HTMLElement[] getElementsByTagName(string tagName)
	Node closest(string selector)
	Node appendChild(Node node)
	this insertAdjacentHTML('beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' where, string html)
	this setAttribute(string key, string value)
	this setAttributes(Record string, string attrs)
	this removeAttribute(string key)
	string getAttribute(string key)
	this exchangeChild(Node oldNode, Node newNode)
	this removeChild(Node node)
	string toString()
	this set_content(string content)
	this set_content(Node content)
	this set_content(Node[] content)
	this remove()
	this replaceWith((string | Node)[] ...nodes)
	ClassList classList
	HTMLElement clone()
	HTMLElement getElementById(string id)
	string text
	string rawText
	string tagName
	string structuredText
	string structure
	Node firstChild
	Node lastChild
	Node nextSibling
	HTMLElement nextElementSibling
	Node previousSibling
	HTMLElement previousElementSibling
	string innerHTML
	string outerHTML
	string textContent
	Record<string, string> attributes
	[number, number] range
}
class Node{
	<<abstract>>
	string toString()
	Node clone()
	this remove()
	number nodeType
	string innerText
	string textContent
}
class ClassList{
	add(string c)
	replace(string c1, string c2)
	remove(string c)
	toggle(string c)
	boolean contains(string c)
	number length
	string[] value
	string toString()
}
class CommentNode{
	CommentNode clone()
	string toString()
}
class TextNode{
	TextNode clone()
	string toString()
	string rawText
	string trimmedRawText
	string trimmedText
	string text
	boolean isWhitespace
}
Node --|> HTMLElement
Node --|> CommentNode
Node --|> TextNode
Node ..> ClassList

HTMLElement Methods

trimRight()

Trim element from right (in block) after seeing pattern in a TextNode.

removeWhitespace()

Remove whitespaces in this sub tree.

querySelectorAll(selector)

Query CSS selector to find matching nodes.

Note: Full range of CSS3 selectors supported since v3.0.0.

querySelector(selector)

Query CSS Selector to find matching node. null if not found.

getElementsByTagName(tagName)

Get all elements with the specified tagName.

Note: Use * for all elements.

closest(selector)

Query closest element by css selector. null if not found.

appendChild(node)

Append a child node to childNodes

insertAdjacentHTML(where, html)

Parses the specified text as HTML and inserts the resulting nodes into the DOM tree at a specified position.

setAttribute(key: string, value: string)

Set value to key attribute.

setAttributes(attrs: Record<string, string>)

Set attributes of the element.

removeAttribute(key: string)

Remove key attribute.

getAttribute(key: string)

Get key attribute. undefined if not set.

exchangeChild(oldNode: Node, newNode: Node)

Exchanges given child with new child.

removeChild(node: Node)

Remove child node.

toString()

Same as outerHTML

set_content(content: string | Node | Node[])

Set content. Notice: Do not set content of the root node.

remove()

Remove current element.

replaceWith(...nodes: (string | Node)[])

Replace current element with other node(s).

classList

classList.add

Add class name.

classList.replace(old: string, new: string)

Replace class name with another one.

classList.remove()

Remove class name.

classList.toggle(className: string):void

Toggle class. Remove it if it is already included, otherwise add.

classList.contains(className: string): boolean

Returns true if the classname is already in the classList.

classList.value

Get class names.

clone()

Clone a node.

getElementById(id: string): HTMLElement | null

Get element by it's ID.

HTMLElement Properties

text

Get unescaped text value of current node and its children. Like innerText. (slow for the first time)

rawText

Get escaped (as-is) text value of current node and its children. May have &amp; in it. (fast)

tagName

Get or Set tag name of HTMLElement. Notice: the returned value would be an uppercase string.

structuredText

Get structured Text.

structure

Get DOM structure.

firstChild

Get first child node. undefined if no child.

lastChild

Get last child node. undefined if no child

innerHTML

Set or Get innerHTML.

outerHTML

Get outerHTML.

nextSibling

Returns a reference to the next child node of the current element's parent. null if not found.

nextElementSibling

Returns a reference to the next child element of the current element's parent. null if not found.

previousSibling

Returns a reference to the previous child node of the current element's parent. null if not found.

previousElementSibling

Returns a reference to the previous child element of the current element's parent. null if not found.

textContent

Get or Set textContent of current element, more efficient than set_content.

attributes

Get all attributes of current element. Notice: do not try to change the returned value.

range

Corresponding source code start and end indexes (ie [ 0, 40 ])

NPM DownloadsLast 30 Days