string-extract-class-names^5.10.1

Extract class (or id) name from a string

Install via npm

npm i string-extract-class-names

The default is exported, so instead of extract below, you can name the consumed function however you want.

Consume via a require():

const extract = require("string-extract-class-names");

or as an ES Module:

import extract from "string-extract-class-names";

Install as a script, via CDN

Put this in your HTML:

<script src="https://cdn.jsdelivr.net/npm/string-extract-class-names/dist/string-extract-class-names.umd.js">

Then, you’ll get a global variable stringExtractClassNames in your Global object and you consume it like this:

const extract = stringExtractClassNames;

This extract is your main function. See its API in the main section.

Trivia

This program has 444 assertions in its unit tests. That's more than all unit test assertions' median (50) and more than geometric mean (70).

In monorepo, one other package, email-comb, consumes this package.

§ Quick Take

import { strict as assert } from "assert";
import extract from "string-extract-class-names";

// extracts classes
assert.deepEqual(
  extract("div.first-class.second-class"),
  [".first-class", ".second-class"]
);

// and id's
assert.deepEqual(
  extract("div#brambles.gramples#croodles"),
  ["#brambles", ".gramples", "#croodles"]
);

// optionally, you can request ranges (see codsen.com/ranges/):
assert.deepEqual(
  extract("div.first-class.second-class", true),
  [
    [3, 15],
    [15, 28],
  ]
);

⬆ back to top

§ Examples

⬆ back to top

§ API

extract(
  inputString,
  [returnRangesInstead]
)

In other words, it's a function which takes two input arguments. Brackets mean that argument is optional.

⬆ back to top

§ API - Input

Input argument	Type	Obligatory?	Description
inputString	String	yes	String to process
returnRangesInstead	Boolean	no	Default - `false` - return arrays of strings - selectors; optionally - `true` - return array of ranges

By ranges we mean string slice ranges, arrays of two elements where both arguments match the String.slice first two arguments, beginIndex and endIndex.

⬆ back to top

§ The Use

We use string-extract-class-names to extract all the CSS class and id names from HTML/CSS in the library email-comb which detects and deletes the unused CSS styles.

⬆ back to top