¿Cómo usar una expresión regular en querySelectorAll?

En una página que estoy haciendo, terminaré con una personalizada. link elementos como este:

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

estoy tratando de usar querySelectorAll para recuperar todos los elementos de enlace con un tipo service/... especificado y no estoy llegando a ninguna parte.

Actualmente estoy seleccionando esto:

root.querySelectorAll('link');

que me da todo <link> elementos cuando solo quiero los que tienen tipo service/.*

Preguntas:

¿Puedo agregar una expresión regular a un selector QSA? Si es así, ¿cómo hacerlo?

Realmente no puede usar una expresión regular en un selector, pero los selectores de CSS son lo suficientemente potentes para sus necesidades con una sintaxis de “comienza con” inspirada en las expresiones regulares.

Puede usar selectores de atributo de coincidencia de subcadena: link[type^=service]

Lee “Nodos de tipo link con un atributo type comenzando con “servicio”

Desde el especificación formal:

[att^=val]

Representa un elemento con el atributo att cuyo valor comienza con el prefijo “val”. Si “val” es la cadena vacía, el selector no representa nada.

JSFiddle de trabajo

Sé que esto tiene 7 años, pero así es como lo haces (para valores de atributos):

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>

Buscar todo atributos del elemento, puede usar esto:

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>

Lo puse en un buen diseño de objeto para ti.

La publicación es bastante antigua, pero puede ser útil para alguien. Si like se necesita la cláusula y no queremos buscar solo por el inicio, se puede usar la siguiente sintaxis:

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

Para su ejemplo a continuación:

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

No puede utilizar Expresión regular (regex) pero puede usar Selector de CSS para querySelectorAll() así como querySelector() Como se muestra abajo. *Puedes ver 6.2. Selectores de atributo de coincidencia de subcadena.

link[type^="service"] puede seleccionar todo <link>s cuyo type atributo comienza desde service:

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

[type^="service"] también puede seleccionar todo <link>s cuyo type atributo comienza desde service pero no lo recomiendo sin link porque es menos específico por lo que también puede seleccionar otros elementos:

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

link[type*="service"] también puede seleccionar todo <link>s cuyo type el atributo contiene service:

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

Además, link[src&="service"] también puede seleccionar todo <link>s cuyo src atributo termina con service:

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