Получить набор классов в DOM, которые соответствуют заданному регулярному выражению

Question

Я динамически генерирую элементы:

<a class="gallery1" href="base64String"> 
    <img src="base64StringThumbnail">
</a>

, где суффикс числового значения к gallery изменяется, я не могу предсказать числовое значение заранее, поэтому регулярное выражение для класса будет "gallery\\d+". Я хотел бы получить только все классы без дубликатов, которые соответствуют этому регулярному выражению

Так что я мог бы написать что-то вроде этого:

$(document).ready(function () {
  for(const clazz in matchedClasses){
    $('.' + clazz).createGallery();
  }
});

Например, если у меня есть элементы с классами: gallery1, gallery2, gallery1, gallery3, gallery2 в DOM я бы получил: [gallery1, gallery2, gallery3] в любом порядке. для меня это просто в C# и Java, но я не знаю, как этого добиться в JS.

Answer 1

Вы можете выбрать все элементы с атрибутом querySelectorAll(), а начинается с селектора . Затем l oop через них, чтобы получить класс из элементов с .map(). Наконец, удалите дубликаты, используя Синтаксис и Set.

Попробуйте выполнить следующее:

var galleryList = document.querySelectorAll('[class^="gallery"]');
var res = [...new Set(Array.from(galleryList).map(g => g.getAttribute('class')))];
console.log(res);

<a class="gallery1" href="base64String"> 
  <img src="base64StringThumbnail">
</a>
<a class="gallery2" href="base64String"> 
  <img src="base64StringThumbnail">
</a>
<a class="gallery3" href="base64String"> 
  <img src="base64StringThumbnail">
</a>
<a class="gallery1" href="base64String"> 
  <img src="base64StringThumbnail">
</a>
<a class="gallery2" href="base64String"> 
  <img src="base64StringThumbnail">
</a>

Answer 2

Давайте рассмотрим следующий код, который представляет собой все классы, как вы сказали в переменной.

let allClasses = ['gallery1', 'gallery2', 'gallery1', 'gallery3', 'gallery2'];

Теперь, чтобы получить только ['gallery1', 'gallery2', 'gallery3'], сделайте вот так

let allClasses = ['gallery1', 'gallery2', 'gallery1', 'gallery3', 'gallery2'];

let resultClasses = Array.from(new Set(allClasses));

console.log(resultClasses); // ['gallery1', 'gallery2', 'gallery3']

Поскольку структура данных Set гарантирует уникальность своих значений