javascriptregexhyperlinkcss-selectorsselectors-api

How to use a regular expression in querySelectorAll?

On a page I'm doing I will be ending up with custom link elements like this:

<link rel="multiply" type="service/math" src="path/to/service">
<link rel="substract" type="service/math" src="path/to/service">
...

I'm trying to use querySelectorAll to retrieve all link elements with a type service/... specified and am getting nowhere.

Currently I'm selecting this:

root.querySelectorAll('link');

which gives me all <link> elements when I only want the ones with type service/.*

Questions:
Can I add a regex to a QSA selector? If so, how to do it?

Solution

  • You can't really use a regular expression in a selector but CSS selectors are powerful enough for your need with a "starts with" syntax inspired by regexes.

    You can use a substring matching attribute selectors : link[type^=service]

    Reads "Nodes of type link with an attribute type starting with "service"

    From the formal specification:

    [att^=val]

    Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything.

    Working JSFiddle