Kann ich in querySelectorAll einen regulären Ausdruck verwenden?

Auf einer Seite, die ich mache, werde ich mit Gewohnheit enden link Elemente wie diese:

<link rel="multiply" type="service/math" src="https://stackoverflow.com/questions/16791527/path/to/service">
<link rel="substract" type="service/math" src="https://stackoverflow.com/questions/16791527/path/to/service">
...

Ich versuche zu verwenden querySelectorAll um alle Link-Elemente mit einem Typ abzurufen service/... angegeben und komme nirgendwo hin.

Momentan wähle ich das aus:

root.querySelectorAll('link');

was mir alles gibt <link> Elemente, wenn ich nur diejenigen mit Typ möchte service/.*

Fragen:

Kann ich einem QSA-Selektor eine Regex hinzufügen? Wenn ja, wie geht das?

Sie können einen regulären Ausdruck nicht wirklich in einem Selektor verwenden, aber CSS-Selektoren sind leistungsfähig genug für Ihre Anforderungen mit einer von regulären Ausdrücken inspirierten „beginnt mit“-Syntax.

Sie können einen Substring-Matching-Attributselektor verwenden: link[type^=service]

Liest “Knoten des Typs link mit einem Attribut type beginnend mit “Dienst”

Von dem formale Spezifikation:

[att^=val]

Stellt ein Element mit dem att-Attribut dar, dessen Wert mit dem Präfix „val“ beginnt. Wenn “val” die leere Zeichenfolge ist, stellt der Selektor nichts dar.

Funktionierendes JSFiddle

Ich weiß, das ist 7 Jahre alt, aber so machst du es (für Attributwerte):

function DOMRegex(regex) {
    let output = [];
    for (let i of document.querySelectorAll('*')) {
        if (regex.test(i.type)) { // or whatever attribute you want to search
            output.push(i);
        }
    }
    return output;
}
console.log(DOMRegex(/^service\//)); // your regex here

<link rel="multiply" type="service/math" src="https://stackoverflow.com/questions/16791527/path/to/service">
<link rel="substract" type="service/math" src="https://stackoverflow.com/questions/16791527/path/to/service">
<link rel="test" type="notservice/math" src="path/to/notservice">
<div id="some-other-node"></div>

Suchen alle Elementattribute können Sie dies verwenden:

function DOMRegex(regex) {
    let output = [];
    for (let i of document.querySelectorAll('*')) {
        for (let j of i.attributes) {
            if (regex.test(j.value)) {
                output.push({
                    'element': i,
                    'attribute name': j.name,
                    'attribute value': j.value
                });
            }
        }
    }
    return output;
}
console.log(DOMRegex(/(?<!t)service/)); // your regex here

<link rel="multiply" type="service/math" src="https://stackoverflow.com/questions/16791527/path/to/service">
<link rel="substract" type="service/math" src="https://stackoverflow.com/questions/16791527/path/to/service">
<link rel="test" type="notservice/math" src="path/to/notservice">
<div id="some-other-node"></div>

Ich habe es für Sie in ein schönes Objektlayout gesteckt.

Der Beitrag ist ziemlich alt, aber vielleicht hilft er jemandem weiter. Wenn like -Klausel benötigt wird und wir nicht nur nach dem Start suchen möchten, kann die folgende Syntax verwendet werden:

document.querySelectorAll('[type*=service]');