Package Exports

rexpath

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rexpath) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Rexpath is xpath with regex.

With this package, you can query dom tree with xpath and regex(regular expression).

With xpath, 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:

/* all div which class match /(cool|awesome)-cafe/ or id match /number-\\d+/ */
var elements = document.rexpath_all(
  ['and', '//div', ['or', ['@~', 'class', '(cool|awesome)-cafe']
                        , ['@~', 'id', 'number-\\d+']]] );
elements.forEach((element)=>{
  /* a tag which text() matches /hotel/ */
  var a = element.rexpath( ['and', './/a', ['~', 'hotel']]);
  console.log('find a tag:', a);
}

Start with unpkg

one file example.

Start with webpack.

Install.

$ npm install rexpath

Use this like.

import rexpath from 'rexpath';
rexpath.init(window); /* inject method to HTMLElement, HTMLDocument. */

function find_it() {
    /* all div which `class` match awesome-.. or `id` match awesome */
    var div = document.rexpath(
      ["and", "//div"
            , ["or", ["@~", "class", "awesome-[ck]lass"],
                     ["@~", "id", "awesome"]]] );
    /* all a-tag children of div. which text() match cool... */ 
    var a = div.rexpath( ["and", ".//a", ["~", "cool.+title"]] );                                                    
    return a;
}

Start (or try) with chrome devtools console.

const element_script = document.createElement('script');
element_script.src = 'https://unpkg.com/rexpath/dist/index-web.js';
document.head.appendChild(element_script);

API

`(HTMLElement|HTMLDocument)#rexpath(query)`

Find a element.

`(HTMLElement|HTMLDocument)#rexpath_all(query)`

Find all elements.

Query

definition.

query = string | list
list = 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.

string : xpath. like "//div", ".//a[ contains(text(), 'aaa') ]"
and-clause : query `and` mached dom. like ["and", "//div", ["~", "this .+ is awesome"]]
or-clause : query `or` mached dom. like ["or", ["@~", "class", "red|blue"], ["@~", "id", "red|blue"]]
attribute-match-clause : query dom which text match 
attribute: string. attribute like "href", "class"
regex: string. regular expression.

Examples

Compose xpath.

document.rexpath( ['and', '//div[ @class="test" ]'
                        , ['or', "./span", "./table"]
                        , './/a'] );

RegEx

// attribute match
document.rexpath(
  ['and', '//*', ['@~', 'class', '(novel|music|movie)']]);

// text() match
document.rexpath_all(
  ['and', '//a', ['~', 'social\\s+network\\s+\\d+']] );