Remove CSS classes by ReGexp, jQuery plugin

7 апреля, 2021

Если ваш фронтент базируется на jQuery, то вы часто встречались с необходимостью удаления CSS классов не по полному названию, а по подстроке. Также часто возникает потребность выбрать все элементы на странице, у которых классы содержат определенную подстроку. Эта статья является маленькой шпаргалкой, она показывает, как эти опреации можно оформить в виде JQuery плагина, и потом свободно использовать их по необходимости.

Удалить классы элемента по простым подстрокам или ReGexp шаблону

$.fn.removeClassRegEx = function(regex) {
  var classes = $(this).attr('class');
  if (!classes || !regex) return false;
  var classArray = [];
  classes = classes.split(' ');
  for (var i = 0, len = classes.length; i < len; i++)
    if (!classes[i].match(regex)) classArray.push(classes[i]);
  $(this).attr('class', classArray.join(' '));
};

Пример : пусть имеется элемент с таким набором классов — ‘test subclass-1 subclass-2’

<div class="test subclass-1 subclass2"></div>
$( '.test' ).removeClassRegEx( 'ub' );

Теперь элелент имеет только один класс ‘test’ class.

Заметьте, что здесь вы можете использовать JS RegExp конструкции

$( '.test' ).removeClassRegEx( /class(-)?[0-1]/ );

Результат:

<div class="test"></div>

Выбрать DOM элементы по подстрокам в CSS классах

Эта операция гораздо проще, она базируется на нативных CSS селекторах

var set = $( '[class*="ubclas"]' );

Эта строка возвращает все элементы, у которых набор имен классов содержит одно или более вхождение подстроки ‘ubсlas’

Categorised in: js

Categories