npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

node-html-better-parser

v1.4.7

Published

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

Downloads

285,386

Readme

Node HTML Better Parser

Fork from Fast HTML Parser NPM version

Fast HTML Parser is a very fast HTML parser. Which will generate a simplified DOM tree, with basic 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).

About this fork: I created this fork to provide a simple API for editing the html and especially the attributes.


Install

npm install --save node-html-better-parser

Performance

Faster than htmlparser2!

fast-html-parser: 2.18409 ms/file ± 1.37431
high5           : 4.55435 ms/file ± 2.51132
htmlparser      : 27.6920 ms/file ± 171.588
htmlparser2-dom : 6.22320 ms/file ± 3.48772
htmlparser2     : 3.58360 ms/file ± 2.23658
hubbub          : 16.1774 ms/file ± 8.95079
libxmljs        : 7.19406 ms/file ± 7.04495
parse5          : 10.7590 ms/file ± 8.09687

Tested with htmlparser-benchmark.


Usage

import { parse } from 'node-html-better-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>');

API

parse(data[, options])

Parse given data, and return root of the generated DOM. The root is actually a fictive node that contains the nodes found in the content provided. The content can be found in root.childNodes, or accessed with root.firstChild if the parsed HTML has a root node (think about <b>siblings</b> <i>nodes</i>).

  • data, data to parse
  • options, parse options
{
  lowerCaseTagName: false,  // convert tag name to lower case (hurt performance heavily)
  script: false,            // retrieve content in <script> (hurt performance slightly)
  style: false,             // retrieve content in <style> (hurt performance slightly)
  pre: false,               // retrieve content in <pre> (hurt performance slightly)
  comment: false            // retrieve comments (hurt performance slightly)
}

isBlock(node: HTMLElement)

Returns weither the provided node is a block. A node is considered a block is it has a tag represented as block instead of inline in html specs.

HTMLElement

properties

| property name | description | |-----------------|--------------------------------------------------------------------------------------------------------| | text | Get unescaped text value of current node and its children. Like innerText. (slow for the first time) | | tagName | Get the tag name of the current element | | classNames | Get the classes of the current element | | parentNode | Get the parent HTMLNode | | rawText | Get escpaed (as-it) text value of current node and its children. May have &amp; in it. (fast) | | structuredText | Get structured Text | | structure | Get DOM structure | | childNodes | Get the children nodes | | children | Get the children HTMLElement | | firstChild | Get first child node | | lastChild | Get last child node | | attributes | Get attributes | | rawAttributes | Get escaped (as-it) attributes | | innerHTML | Get innerHTML | | outerHTML | Get outerHTML |

methods

| method | parameters | return | |---------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------| | trimRight() | | Trim element from right (in block) after seeing pattern in a TextNode. | | removeWhitespace() | | Remove whitespaces in this sub tree. | | querySelectorAll(selector: string) | * selector: CSS selector Note: only tagName, #id, .class selectors supported. | Query CSS selector to find matching nodes. | | querySelector(selector: string) | * selector: CSS selector Note: only tagName, #id, .class selectors supported. And not behave the same as standard querySelectorAll() as it will stop searching sub tree after find a match. | Query CSS selector to find matching node. | | appendChild(node: Node) | * node: HTMLElement or Text node | Append a child node to childNodes | | setAttribute(key: string, value: string | null) | * key: The HTML attribute key * value: The HTML attribute name | Set value to key attribute. If value is null, remove the attribute instead. | | setAttributes(attributes: Attributes) | * attributes: An object containing the key: value pairs we expect for this node | Replace all the current attributes by the provided attribute set. | | removeAttributes(key: string) | * key: The HTML attribute key | Remove the attribute denoted by key. | | toString() | | Same as outerHTML | | set_content(content: string | Node | Node[]) | * content: The new content for this node | Set content for this node. Notice: Do not set content of the root node. |