Как найти и заменить префикс имени класса на jQuery?

Question

У меня есть куча имен классов, таких как md:block и sm:flex

Мне нужно:

1. Найти все классы, которые начинаются с ' md 'или' sm '.
2. Добавлять' -панель 'после каждого' md 'и' sm '.
3. Получите md-panel:block и sm-panel:flex.

Первая попытка в комментариях: { ссылка }

Вторая попытка :

/*
Add / remove prefixes to DOM element classes. Requieres JQuery.
https://gist.github.com/carloscabo/e0374676c614dd6e6ea19ad4b9ecf9a4
by Carlos Cabo 2016. MIT License.
How it works:
  1. Loops over the group of elements
  2. For each element if it has any class that matches the regex:
    a. If the prefix is NOT present -> adds
    b. If the prefix IS present -> removes
$jquery_selector, conatining group of elements where replacement will be done
regex, refired to the classname, all classes matching this selector in the group of elements will be un/prefixed
prefix, string that will be added / removed from matching classes
add, true = add prefix ( default value)
     flase = remove prefix
Adding 'pre-' to all classnames matched in regex:
addRemoveClassPrefix(
  $('#imgs-slider, #imgs-slider [class^=swiper]'), // JQuery selector: Group of elements where to be executed
  /^swiper/,                                      // RegEx: All classNames starting with 'swiper'
  'pre-'                                          // Add this prefix
);
Removing 'pre-' to all classnames matched in regex:
addRemoveClassPrefix(
  $('[class^=pre-swiper]'), // JQuery selector: Group of elements where to be executed
  /^pre-swiper/,           // RegEx: All classNames starting with 'swiper'
  'pre-'                   // Add this prefix
);
*/

function addRemoveClassPrefix( $jquery_selector, regex, prefix ) {
  if ($jquery_selector.length) {
    $jquery_selector.each( function(idx, el) {
      var
        $el = $(el),
        classes = $el.attr('class').split(' '),
        new_class;
      for (var i = 0; i < classes.length; i++) {
        if (regex.test( classes[i] )) {
          new_class = ( classes[i].indexOf( prefix ) === 0 ) ? classes[i].replace( prefix, '') : prefix+classes[i] ;
          $el.addClass( new_class ).removeClass( classes[i] );
        }
      }
    });
  }
}

Я нашел это (https://gist.github.com/carloscabo/e0374676c614dd6e6ea19ad4b9ecf9a4), которое почти делает то, что я хочу. Но у меня есть 3 проблемы, которые я не могу понять.

1. Как установить регулярное выражение в / * md / без превращения его в комментарий в коде.
2. Как установить несколько вещей в регулярном выражении. / * sm / * md /?

3. Как изменить его так, чтобы он разделялся в середине имени класса и добавлял первую часть + префикс + последнюю часть. Я попробовал это:

   new_class = ( classes[i].indexOf( prefix ) === 0 ) ? classes[i].split('-panel:').join(':') : classes[i].split(':').join('-panel:');

Мне нужно, чтобы все «md: value» превратилось в «md-panel: value» и наоборот. Любая помощь будет принята с благодарностью.

Answer 1

Фигурное решение:)

$('[class*="sm:"], [class*="md:"]').attr("class", function(i, val) {
  return val.split(":").join("-panel:");
});

Answer 2

Используйте hasclass и замените

$('this').hasClass('md').replace('md-panel')