Как из класса убрать модификатор через js?

Question

[Дмитрий Афанасьев]

У меня есть много классов подобных этому

toggle-....
toggle-....
toggle-....
toggle-....

как мне через JS пройтись по всему документу и убрать у них только эти значения в классах Например:
Чтобы такой класс "toggle-menu-navigagation" стал: "menu-navigagation" ?

Answer 1

[0xD34F]

Что надо убрать: const classPrefix = 'toggle-';.

Как получить соответствующие элементы:

// вариант попроще - хватаем всё, что содержит указанную подстроку; так можно нарваться
// на выполнение бессмысленной работы, будут отобраны элементы, у которых ничего
// не будет удалено - это если подстрока находится не в начале класса, например xxx-toggle-xxx
const elements = document.querySelectorAll(`[class*="${classPrefix}"]`);

// вариант посложнее, поуродливее, но без обработки лишнего - хватаем элементы,
// у которых класс начинается с указанной подстроки, или содержит указанную подстроку,
// а перед ней ещё есть пробел
const elements = document.querySelectorAll(`[class^="${classPrefix}"], [class*=" ${classPrefix}"]`);

Убираем:

const reg = RegExp(`(^|\\s)${classPrefix}`);
elements.forEach(n => n.className = n.className.split(reg).join(' ').trim());

// или

elements.forEach(function(n) {
  n.classList.value = n.classList.value.replace(this, '$1');
}, RegExp(`(^| )${classPrefix}`, 'g'));

// или

for (const { classList: cl } of elements) {
  for (const n of [...cl]) {
    if (n.startsWith(classPrefix)) {
      cl.remove(n);
      cl.add(n.slice(classPrefix.length));
    }
  }
}

Answer 2

[Никита Егоров]

const array = document.querySelectorAll('[class*="toggle-"]') // Взято из варианта @0xD34F 

Array.from(array).forEach(el => {
		const name = el.className.split('toggle-').join('')
    el.classList.remove(el.className)
    el.classList.add(name)
})

Рабочий пример - https://jsfiddle.net/Svupol/34jmxL97/10/