A helper to expand CSS selectors into PostHTML matcher objects
Using the helper function supplied by this module you can turn simple CSS selectors into match objects that posthtml match accepts.
Supported features:
- Tags:
"div"
returns{tag: "div"}
. - Ids:
"#bar"
returns{attrs: {id: "bar"}}
. - Classes:
.foo
returns{attrs: { class: /(?:^|\s)foo(?:\\s|$)/ }}
. Any number of classnames supported. - Attribute selectors: Any number of the standard attribute selectors can be used1 including the following non-standard:
[attr!=value]
: Matches if theattr
attribute value does not contain thevalue
.
- Multiple node selectors:
"div, span"
returns[{tag: "div"}, {tag: "span"}]
.
1 Multiple attribute selectors for the same attribute are not supported (this includes mixing classnames and attribute selectors matching class
).
The basic template for selectors (and order of features) looks like this:
"tag#id.class.name[attr*=value][otherattr^='start']"
var matchHelper = require("posthtml-match-helper");
tree.match(matchHelper("div.class"), function (node) {
// do stuff with matched node...
});
var matchHelper = require("posthtml-match-helper");
tree.match(matchHelper("input.my-control[type!='radio'][checked], input[value^='foo'][checked]"), function (node) {
// do stuff with node that matched either of the selectors...
});
matcher
(string) - A CSS selector that describes the node you want to match in PostHTML.
A matcher object - or array of matcher objects.