string-extract-class-names^7.0.1

Quick Take

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

// extracts classes and/or id's
const str = "div#brambles.nushes#croodles";
const { res, ranges } = extract(str);
assert.deepEqual(res, [
  "#brambles",
  ".nushes",
  "#croodles",
]);
assert.deepEqual(ranges, [
  [3, 12],
  [12, 19],
  [19, 28],
]);

// `res` can be produced by slicing `ranges`:
assert.deepEqual(
  res,
  ranges.map(([from, to]) => str.slice(from, to))
);

Examples

• program example: Supports legacy bracket notation emails used to use
• program example: Non-parsing algorithm can tackle really dodgy CSS
• program example: Processes whole CSS selectors

API

extract(str)

In other words, it's a function which takes one input, a string.

API - Input

API - Output

It returns a plain object.

for example, here's how the output could look like:

{
  res: "Lorem ipsum dolor sit amet",
  ranges: [
    [21, 27, " "]
  ],
  log: {
    timeTakenInMiliseconds: 42
  },
  whatWasDone: {
    removeWidows: true,
    convertEntities: false
  }
}

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.

Bracket notation

Normally, classes or id's in css include dots/hashes, for example, div.first-class.second-class. Those dots and hashes end up covered by indexes under ranges key:

import { extract } from "string-extract-class-names";
const res = extract("div.first-class.second-class");
console.log(res);
// => {
//      res: [".first-class", ".second-class"],
//      ranges: [
//        [3, 15],
//        [15, 28],
//      ],
//    }

Dots above are at indexes 3 and 15.

However, this program also supports the bracket notation - instead of td.croodles one can say td[class="croodles"]. It used to be the way how email templates were setting CSS because of Yahoo . Not any more, but this program still supports bracket notation:

import { extract } from "string-extract-class-names";
const str = `td[id=" abc-def "]`
const res = extract(str);
console.log(res);
// => {
//      res: ["#abc-def"],
//      ranges: [[8, 15]],
//    }

// however

console.log(str.slice(8, 15));
// => "abc-def"
// notice there's no hash if you slice the source
// because it didn't exist at the first place

In "normal" CSS where dots and hashes do exist, the res output will match what could be mapped against String.prototype.slice() (as seen in examples):

assert.deepEqual(
  res,
  ranges.map(([from, to]) => str.slice(from, to))
);

Changelog

See it in the monorepo , on GitHub.

Contributing

To report bugs or request features or assistance, raise an issue on GitHub .

Any code contributions welcome! All Pull Requests will be dealt promptly.

Licence

MIT 

Copyright © 2010–2021 Roy Revelt and other contributors