¿Puedo usar una expresión regular en querySelectorAll?

3 minutos de lectura

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

<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">
...

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?

  • echa un vistazo a esta respuesta stackoverflow.com/a/38711853/7250868

    – Ramil Shavaleev

    21 de septiembre de 2020 a las 9:39

Avatar de usuario de Benjamin Gruenbaum
benjamin grünbaum

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

  • @frecuente de nada! Por lo que vale, un .filter llamar a través de los elementos que verifican su propiedad de tipo también es una solución perfectamente válida en mi humilde opinión.

    – Benjamin Grünbaum

    28 de mayo de 2013 a las 12:11

  • esto es útil para intentar obtener acceso a una instancia de controlador mediante la sintaxis de Controller-As en Angular JS 1.5+. Esta es exactamente la respuesta que necesitaba al actualizar mi aplicación angular usando la sintaxis de controlador como y quería tener acceso a nivel de consola a sus ámbitos: angular.element( document.querySelectorAll( '[ng-controller^="' + <controller name> + '"' )[0] ).scope

    – jusopi

    25 de febrero de 2015 a las 3:51


Avatar de usuario de SUM1
SUMA1

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 todos 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]');

¿Ha sido útil esta solución?