DOMTokenList.replace()

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

Синтаксис

tokenList.replace(oldToken, newToken);

Параметры

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

Возвращает значение

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

Примечание: В старых браузерах replace() возвращает void.

Примеры

В следующем примере мы получаем список классов, установленных в элементе <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;
}

Спецификации

Спецификация Статус Комментарий
DOM
Определение 'replace()' в этой спецификации.
Живой стандарт Первоначальное определение

Совместимость с браузерами

BCD tables only load in the browser