Выбрать все теги с именем данных - Получить значение - Установить класс

Question

У меня есть некоторый HTML-код, в котором я динамически печатал несколько элементов, некоторые из которых содержат определенный атрибут data.Поскольку мой язык шаблонов не может эффективно использовать регулярные выражения, мне нужно использовать JavaSript (или JQuery), чтобы выбрать значения данных, построить строку, а затем добавить эту строку как класс к этому исходному элементу.

Пример HTML:

<div class="item" data-ses-cat="This Cool Thing (Yes)"></div>

Пример желаемого HTML после JavaScript:

<div class="item this-cool-thing-yes" data-ses-cat="This Cool Thing (Yes)"></div>

Мне просто нужно добавить класс к all теги, которые содержат data-ses-cat, затем получают значение для этого атрибута данных, запускают регулярное выражение, а затем добавляют эту новую строку в качестве класса.

Я чувствую, что все должно быть довольно просто, но я давно не касался JQuery.

Спасибо за любую помощь!

Answer 1

Удалите все символы, которые не являются буквенно-цифровыми или пробелами, затем введите их в нижнем регистре, затем разделите пробелом и присоедините к тире.

$('.item[data-ses-cat]').each(function(){
  var newClass = $(this).data('ses-cat')
      .replace( /[^a-zA-Z0-9 ]/g, '' )
      .toLowerCase()
      .split( ' ' )
      .join( '-' );
  
  this.classList.add( newClass );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item" data-ses-cat="This Cool Thing (Yes)">Test</div>

А из ваших комментариев приведена версия, в которой используются функции стрелок.

$('.item[data-ses-cat]').each((index, element)=>{
  var newClass = $(element).data('ses-cat')
      .replace( /[^a-zA-Z0-9 ]/g, '' )
      .toLowerCase()
      .split( ' ' )
      .join( '-' );
  
  element.classList.add( newClass );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item" data-ses-cat="This Cool Thing (Yes)">Test</div>

Answer 2

Ванильная версия кода JS будет выглядеть примерно так:

function processElement(element) {
    const clazz =
      element.dataset.sesCat.toLowerCase()
        .replace(/\(\)/g, '') // Remove brackets.
        .replace(/ /g, '-'); // Replace spaces with dashes.
    element.classList.add(clazz);
}

const sesCatElements = document.querySelectorAll('[data-ses-cat]');
sesCatElements.forEach(processElement);

Конечно, вы можете настроить свой RegExp именно так, как вы хотите.

Вот некоторая информация окак API набора данных работает.

А вот как вы работаете с именами классов CSS .