如何将包含连字符/破折号（？）的所有类应用于任何 DOM 元素并将它们保存到 JavaScript 的数组中？

Question

How to get all classes containing hyphen/dash(?) applied to any DOM element and save them into array in JavaScript?

My failing approach:

 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); } });

Answer 1

Your attempt is fairly close to working. The problem is you're pushing an array into getClasses rather than the individual classes, and neither strings nor arrays have a standard contains method (there's includes , which is probably what you mean). Also, if you only want ones containing - , you can filter them out earlier:

let classesWithDash = new Set();
document.querySelectorAll('*').forEach(element => { 
  for (const cls of element.className.split(' ').filter(name => name.includes("-"))) {
      classesWithDash.add(cls);
  }
});
// Now, `classesWithDash` is a set containing the class names with dashes
// If you want an array:
classesWithDash = [...classesWithDash];

Live Example:

 let classesWithDash = new Set(); document.querySelectorAll('*').forEach(element => { for (const cls of element.className.split(' ').filter(name => name.includes("-"))) { classesWithDash.add(cls); } }); // Now, `classesWithDash` is a set containing the class names with dashes // If you want an array: classesWithDash = [...classesWithDash]; console.log(classesWithDash);

 <div class="foo foo-bar"></div> <div class="another-one"></div> <div class="nodash"></div>

---

(I have never understood why Set doesn't have an addAll method, or at least accept multiple values to add like push does...)

Answer 2

The thing you are not realizing is that you are pushing an array of classes into your getClasses array. So you end up with an array of arrays, aka a 2-dimensional array.

Note, too, that you can do your extracting of classes and filtering to only those that contain dashes in one step, rather than having to process the list twice.

 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.includes('-')) 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>

Answer 3

Use document.querySelectorAll() with an attribute selector to get all elements with a class that includes ( =* ) an hyphen. Convert the results to an array using Array.from() . Now iterate the elements with Array.flatMap() , get the classlist and convert to an array, and filter out classes that don't include a hyphen. Use a Set to make the items unique, and spread back to an array.

 const result = [...new Set( // use a Set to get an array of unique items Array.from(document.querySelectorAll('[class*="-"]')) // select all elements with classes that contain hyphens.flatMap(el => Array.from(el.classList).filter(c => c.includes('-'))) // create an array of all classes with hyphens )] console.log(result)

 <div class="something ab something-else xy"></div> <div class="something"></div> <div class="ab cd"></div>