§ 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
| Input argument | Type | Obligatory? | Description |
|---|---|---|---|
| inputString | String | yes | A string to process |
§ API - Output
It returns a plain object.
| Key in a returned object | Key value's type | Description |
|---|---|---|
res | String | Array of extracted classes/id's |
ranges | Array of one or more arrays or null (compatible with Ranges libraries) | Locations of extracted strings |
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 placeIn "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
Copyright © 2010–2021 Roy Revelt and other contributors