Wie verwende ich einen regulären Ausdruck in querySelectorAll?

Auf einer Seite, die ich mache, werde ich am Ende eine benutzerdefinierte Seite haben link Elemente wie diese:

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

Ich versuche es zu verwenden querySelectorAll um alle Linkelemente mit einem Typ abzurufen service/... angegeben und komme nicht weiter.

Momentan wähle ich Folgendes aus:

root.querySelectorAll('link');

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

Fragen:

Kann ich einem QSA-Selektor einen regulären Ausdruck hinzufügen? Wenn ja, wie geht das?

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

Sie können einen Teilstring verwenden, der mit Attributselektoren übereinstimmt: link[type^=service]

Liest „Knoten vom Typ link mit einem Attribut type beginnend mit „Dienstleistung“

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.

Funktionierende JSFiddle

Ich weiß, dass dies 7 Jahre alt ist, aber so machen Sie 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 Folgendes 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 gebracht.

Der Beitrag ist ziemlich alt, aber er könnte für jemanden hilfreich sein. Wenn like Wenn eine Klausel benötigt wird und wir nicht nur nach dem Anfang suchen möchten, kann die folgende Syntax verwendet werden:

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

Für Ihr Beispiel unten:

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

Sie können es nicht verwenden Regulärer Ausdruck (Regex) aber kann verwenden CSS-Selektor für querySelectorAll() ebenso gut wie querySelector() Wie nachfolgend dargestellt. *Du kannst sehen 6.2. Teilstring-Matching-Attributselektoren.

link[type^="service"] kann alles auswählen <link>Es ist wessen type Attribut beginnt mit service:

document.querySelectorAll('link[type^="service"]');
// rel="multiply"'s <link> and rel="substract"'s <link>

[type^="service"] Sie können auch alle auswählen <link>Es ist wessen type Attribut beginnt mit service aber ich empfehle es nicht ohne link Da es weniger spezifisch ist, können auch andere Elemente ausgewählt werden:

document.querySelectorAll('[type^="service"]');
// rel="multiply"'s <link> and rel="substract"'s <link>

link[type*="service"] Sie können auch alle auswählen <link>Es ist wessen type Attribut enthält service:

document.querySelectorAll('link[type*="service"]');
// rel="multiply"'s <link> and rel="substract"'s <link>

Zusätzlich, link[src&="service"] Sie können auch alle auswählen <link>Es ist wessen src Attribut endet mit service:

document.querySelectorAll('link[src&="service"]');
// rel="multiply"'s <link> and rel="substract"'s <link>