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

html-inflect

v2.1.0

Published

Cleanup, modify, and save messy HTML

Downloads

2

Readme

html-inflect

html-inflect is a tool for cleaning up and improving the semantics of HTML in a Node.js environment. Its name comes from semantic inflection, which the IDPF defines as "the process of attaching additional meaning" to a document.

Usage

html-inflect must be instantiated with a document object, and then The only parameter for instantiation is a document object. When used in the browser, html-inflect will always use the actual document object.

Methods

There are only two methods available, .runTask(task) and .runTasks(tasks).

.runTask(task) Accepts a task object and returns a promise.

.runTasks(tasks) Accepts an array of task objects and returns a promise.

Task API

A task is an object with two required keys: a selector, and an action. The third key, parameter, will be passed to the action function.

let myTask = {
    selector: '.h3',
    action: 'changeTag',
    parameter: 'h3'
};

selector | String The selector can be any valid CSS selector. It is used to find the element you would like to manipulate.

action | String|Function Actions can be one of the pre-defined actions, or a function. When providing a function, the selected element will be the main argument. It is strongly recommended that you return a promise.

let myTask = {
  selector: '.foo',
  action: (el) => {
    return new Promise((resolve, reject) => {
      el.classList.add('bar');
      resolve('foobar');
    });
  }
};

parameter | String The parameter is used in a few of the pre-defined actions. They are also static methods on the Inflect class, so you could use them independently of the task API if desired.

Actions

html-inflect comes with a few pre-defined actions, defined below with their parameters.

  • changeTag (newTag) : Change the selected element to the parameter key.
  • removeAttributes (...attributes) : Remove a comma-delimited list of attribute names. Providing the word 'all' will remove all attributes.
  • removeContainer () : Remove the selected element, but keep all children in its place.
  • removeElement () : Remove the element and its children. This works the same way as .remove().
  • removeParent () : Remove the selected element's parent, leaving the element and its children in place.
  • setEpubType (...types) : Set the epub:type attribute. Providing multiple comma-delimited types will result in multiple space-delimited epub:type values (e.g. epub:type="type1 type2 type3"). See EPUB 3 Structural Semantics.
  • setRole (...roles) : Set the role attribute. Providing multiple comma-delimited roles will result in multiple space-delimited role values (e.g. role="role1 role2 role3"). See The ARIA Roles Model.

Example Usage

This example uses jsdom to create a document object, but any HTML parser will work.

const fs = require('fs');
const jsdom = require('jsdom');
const myDoc = require('./myDoc.html');
const Inflect = require('html-inflect');

// define a task
let myTask = {
    selector: '.h3',
    action: 'changeTag',
    parameter: 'h3'
};

// get your document
let html = fs.readFileSync(myDoc);
let doc = jsdom.jsdom(html);

// load the document into a new instance of html-inflect
let inflect = new Inflect(doc);

// run the task
inflect.runTask(myTask);

// do something with the result
fs.writeFile('mydoc_edited.html', inflect.doc, (err) => {
    if (err) throw err;
});