Rexpath is xpath(or css-selector) with regex.
With this package, you can query dom tree with xpath and regex(regular expression).
You can use css-selector instead of xpath, if you want.
With xpath(or css-selector), we already can query dom but cannot use regex.
You may want to query dom which attribute(like class
, href
) match a regex(like /bo.+k/
, /(fa[vb]o[rl]ite)/
).
You can do it. like:
var elements = document;elements;
or:
var elements = document;elements;
or:
/* all div which class match /(cool|awesome)-cafe/ or id match /number-\d+/ */var elements = document;elements
If you want to use css-selector instead of xpath.
windowrexpath;var element = document;
Start with unpkg
plance this.
<script src='https://unpkg.com/rexpath'></script>
examples.
Start with webpack.
Install.
$ npm install rexpath
Use this like.
;rexpath; /* inject method to HTMLElement, HTMLDocument. */ { /* all div which `class` match awesome-.. or `id` match awesome */ var div = document; /* all a-tag children of div. which text() match cool... */ var a = div; return a;}
Start (or try) with chrome devtools console.
const element_script = document;element_scriptsrc = 'https://unpkg.com/rexpath';documenthead;
API
(HTMLElement|HTMLDocument)#rexpath(query)
Find a element.
(HTMLElement|HTMLDocument)#rexpath_all(query)
Find all elements.
(Array|String)#rexpath_compile()
Compile query.
window.rexpath.use_css_selector()
change to use css-selecrtor instead of xpath.
window.rexpath.use_xpath()
back to use xpath instead of css-selector.
Query
definition.
- query ::= xpath | clause
- clause ::= and-clause | or-clause | attribute-match-clause | text-match-clause
- and-clause ::= ["and", query,,,]
- or-clause ::= ["or", query,,,]
- attribute-match-clause ::= ["@~", attribute, regex]
- text-match-clause ::= ["~", regex]
meaning.
xpath
xpath string. like
"//div"
".//a[ contains(text(), 'aaa') ]"
and-clause
query and
mached dom. like
["and", "//div", ["~", /this .+ is awesome/i]]
or-clause
query or
mached dom. like
["or", ["@~", "class", /red|blue/], ["@~", "id", /red|blue/]]
attribute-match-clause
clause to query dom which attribute match regex.
text-match-clause
clause to query dom which textContent match regex.
attribute
string. attribute like
"href"
"class"
regex
RegExp object. like
/hello\d+/
/world/i
RegExp("abc", "i")
xpath
but css-selector
if you want...
You can use not XPath
feels superior in my opinion. But you can use css-selector
if you want.
import rexpath from 'rexpath';
rexpath.init(winmdow);
rexpath.use_css_selector();
/* css-selector mode */
document.rexpath(['or', "//div/a"
, "//div/span/a"]);
rexpath.use_xpath();
/* back to xpath mode */
document.rexpath(["or", ":scope > div > a"
, ":scope > div > span > a "]);
Examples
Compose xpath.
document;
RegEx
// attribute matchdocument; // text() matchdocument;