Как получить все классы, содержащие дефис / тире (?), Примененные к любому элементу DOM, и сохранить их в массив в JavaScript?

Question

Как получить все классы, содержащие дефис / тире (?), Примененные к любому элементу DOM, и сохранить их в массив в JavaScript?

Мой ошибочный подход:

  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

Ваша попытка довольно близка к работе. Проблема в том, что вы помещаете массив в getClasses, а не в отдельные классы, и ни у строк, ни у массивов нет стандартного метода contains (есть includes, что, вероятно, и имеет в виду),Кроме того, если вам нужны только те, которые содержат -, вы можете отфильтровать их раньше:

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 Пример:

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>

---

(я никогда не понимал, почему Set не имеет метода addAll, или по крайней мере принимает несколько значений дляadd как push делает ...)

Answer 2

Используйте document.querySelectorAll() с селектором атрибута , чтобы получить все элементы с классом, который включает (=*) дефис. Преобразуйте результаты в массив, используя Array.from(). Теперь итерируйте элементы с Array.flatMap(), получите classlist и преобразуйте в массив, и отфильтруйте классы, которые не содержат дефис. Используйте набор, чтобы сделать элементы уникальными, и распределите их обратно в массив.

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 a-b something-else x-y"></div>
<div class="something"></div>
<div class="a-b c-d"></div>

Answer 3

Вы не понимаете, что вы помещаете массив классов в ваш 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.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>