Comment obtenir toutes les classes contenant un trait d'union / tiret (?) Appliquées à n'importe quel élément DOM et les enregistrer dans un tableau en JavaScript?

Mon approche défaillante:

  var getClasses     = [];
  var classesContain = [];

  document.querySelectorAll('*').forEach( x => { 
  
    var y = x.className.split(' '); 
    getClasses.push(y); 
   
   });
   
  getClasses.forEach( c => { 
  
    if(c.contains('-')){ 
    
      classesContain.push(c); 
      
    } 
    
  });
0
RE666 4 nov. 2019 à 21:57

1 réponse

Ce que vous ne réalisez pas, c'est que vous insérez un tableau de classes dans votre tableau getClasses. Vous vous retrouvez donc avec un tableau de tableaux, alias un tableau à 2 dimensions.

Notez également que vous pouvez extraire des classes et filtrer uniquement celles qui contiennent des tirets en une seule étape, plutôt que d'avoir à traiter la liste deux fois.

var getClasses = [];
var classesContain = [];

document.querySelectorAll('*').forEach(x => {
  var y = x.className.split(/\s+/g); // use a regex to cater for multiple spaces
  y.forEach(className => {
    if (className.indexOf('-') > -1)
      classesContain.push(className);
  });
});

console.log('Final class list: ', classesContain);
<div class="foo-bar bar-baz foo">
  <div class="foo-baz">
    <span class="single">Example markup</span>
  </div>
</div>
0
GregL 4 nov. 2019 à 19:06