Выбор элемента с переменным атрибутом данных, однако некоторые с тире

Question

Итак, я делаю функцию для выбора элемента диапазона, по которому щелкают, в зависимости от его атрибута данных и его значения. Я сделал это

    function moveFilterElements(event) {

        if ($(event).hasClass('active')) {
            var dataAttributes = $(event).data(),
                dataKey = Object.keys(dataAttributes)[0],
                dataValue = dataAttributes[Object.keys(dataAttributes)[0]];
            $(event).parents('.filters-container').find('.label[data-' + dataKey + '=' + dataValue + ']').toggleClass('active');
            $(event).parents('.filters-container').find('.btn-show-filters').find('.label[data-' + dataKey + '=' + dataValue + ']').remove();
            updateFiltering();
        }
        else {
            var clonedActiveItem = $(event).clone(true);
            $(event).parents('.filters-container').find('.filters-selected').append(clonedActiveItem);
            clonedActiveItem.toggleClass('active');
            $(event).toggleClass('active');
            updateFiltering();
        }
    }

Атрибуты данных F.ex выглядят так: 'data-subject' - работает нормально.

«data-category-name» преобразуется в «categoryName» благодаря стандарту HTML DOM.

Я мог бы обойти это, просто назвав их «data-categoryname», но это также противоречит стандарту именования.

Так как мне обойти это? Нужно ли регулярное выражение, чтобы снова выделить слово? Это единственный способ?

Answer 1

Ваше предположение немного неверно.data-category-name становится только categoryName, если вы используете набор данных элемента.

Это не относится к getAttribute, хотя:

const div = document.querySelector( '#data_example' );
const category_from_dataset = div.dataset;
console.log( JSON.stringify( category_from_dataset ));
// When using the dataset, we need to use javascript camelcase to access the DOMStringMap
console.log( category_from_dataset.categoryName );
// When using getAttribute, we can use the written attribute name which will automaically covnert to the correct camelcase of the dataset.
const category_from_attribute = div.getAttribute( 'data-category-name' );
console.log( category_from_attribute );

<div id="data_example" data-category-name="examples">An Example</div>

---

Если вы не хотите заменять имена данных, вы можете сопоставить набор данных с функцией, которая изменяет заглавные буквы.Это, вероятно, будет проще, чем анализ необработанного HTML:

const dataset = [
  'categoryName',
  'categoryTotal',
  'camelCase',
  'snake_case'
];
const lowercase = dataset
  .map( str => {
    const capital_letters = str.match( /[A-Z]/g );
    if ( capital_letters ) {
      return capital_letters.reduce(( result, capital ) => {
        return result.replace( capital, `-${ capital.toLowerCase() }` );
      }, str );
    }
    else return str;
  });
console.log( lowercase );