DOMTokenList.replace()

Метод replace() интерфейса DOMTokenList заменяет существующий класс на новый класс. Если первый не существует, то replace() сразу же возвращает false, без добавления нового класса в список классов.

tokenList.replace(oldToken, newToken);

oldToken

DOMString - класс, который вы хотите заменить.

newToken

DOMString класс, которым вы хотите заменить класс oldToken.

Boolean, которое будет true, если oldToken был успешно заменён, или false в противном случае.

В следующем примере мы получаем список классов, установленных в элементе <span> как DOMTokenList, используя Element.classList. Затем мы заменяем класс в списке и записываем список в Node.textContent, принадлежащий <span>.

В HTML:

<span class="a b c"></span>

В JavaScript:

let span = document.querySelector("span");
let classes = span.classList;

let result = classes.replace("c", "z");
console.log(result);

if (result) {
  span.textContent = classes;
} else {
  span.textContent = 'token not replaced successfully';
}

Результат выглядит так:

Следующий полифил добавит метод replace в класс DOMTokenList.  Следующий код будет работать только с IE10-11. Чтобы использовать с более ранними версиями IE, обратитесь к полифилу по element.classList#Polyfill

DOMTokenList.prototype.replace = function (a, b) {
    if (this.contains(a)) {
        this.add(b);
        this.remove(a);
        return true;
    }
    return false;
}