Trova un elemento che ha un attributo corrispondente a un motivo

Question

Come trovare tutti gli elementi che hanno attributi che corrispondono al modello data-foo-bar-*, ad es.

<div data-foo-bar-id="" /> 

Utilizzando document.querySelectorAll con foo-bar-* modello dà errore:

Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '[data-foo-bar-*]' is not a valid selector.

Answer 1

Forse l'iterazione attraverso tutti gli elementi DOM e alla ricerca di questo attributo specifico potrebbe non essere l'approccio migliore, ma qui è la mia prova:

function querySelectorPattern(regex, element) { 
    var elements = document.getElementsByTagName(element), 
    found, 
    regexp = new RegExp(regex); 
    for (var i = 0; i < elements.length; i++) { 
    var attributes = elements[i].attributes; 
    for (var k = 0; k < attributes.length; k++) { 
     if(regexp.test(attributes[k].nodeName)) { 
     console.log(elements[i]); 
     } 
    } 
    } 
} 

E una demo rapida: https://jsfiddle.net/1rsngvy8/