JS метод DOMTokenList.replace()

Загальний опис

Метод replace() об'єкта DOMTokenList використовується для заміщення одного існуючого токена іншим у списку класів елемента. Основна суть цього методу полягає в тому, щоб забезпечити зручний спосіб заміни одного класу на інший без необхідності вручну видаляти старий клас і додавати новий. Це особливо корисно при динамічних змінах класів елементів, наприклад, при зміні стану інтерфейсу користувача, створенні анімацій або реакції на дії користувача.

Метод replace() приймає два аргументи: токен, який потрібно замінити, і новий токен, який має зайняти його місце. Якщо перший токен присутній у списку класів, він буде видалений і замінений другим токеном. Якщо першого токена немає у списку, метод не робить нічого і не викликає помилок. Це забезпечує безпечне використання методу без необхідності перевірки наявності класу перед заміною.

Розглянемо базовий приклад використання методу replace(). Припустимо, у нас є HTML-елемент з кількома класами:

<div id="myElement" class="class1 class2"></div>

Ми хочемо замінити клас class1 на class3. Використовуючи метод replace(), це можна зробити наступним чином:

const element = document.getElementById('myElement');
element.classList.replace('class1', 'class3');

Після виконання цього коду елемент матиме класи class3 і class2 замість class1 і class2.

У випадку, коли токен для заміни відсутній, метод не викликає помилок. Наприклад:

const element = document.getElementById('myElement');
element.classList.replace('nonexistentClass', 'newClass');

У цьому прикладі, оскільки nonexistentClass відсутній у списку класів, жодних змін не відбудеться.

Метод replace() також можна використовувати для динамічних змін стилів у відповідь на події. Наприклад, можна змінити клас елемента при натисканні кнопки:

const button = document.getElementById('toggleButton');
button.addEventListener('click', () => {
    const element = document.getElementById('myElement');
    element.classList.replace('inactive', 'active');
});

У цьому прикладі при кожному натисканні кнопки клас inactive буде замінений на active, що дозволяє динамічно змінювати стиль елемента.

Ще один корисний випадок використання методу replace() – це робота з анімаціями та переходами. Наприклад, можна змінювати класи, щоб запускати анімації при певних умовах:

const element = document.getElementById('myElement');

function startAnimation() {
    element.classList.replace('start', 'animate');
}

element.addEventListener('animationend', () => {
    element.classList.replace('animate', 'end');
});

startAnimation();

У цьому прикладі спочатку клас start замінюється на animate, що запускає анімацію. Після завершення анімації клас animate замінюється на end, що може сигналізувати про завершення анімації та виконати відповідні дії.

Завдяки своїй простоті і зручності метод replace() є потужним інструментом для управління класами елементів у JavaScript. Він дозволяє легко замінювати класи, забезпечуючи чистий і зрозумілий код, що особливо важливо при створенні динамічних і інтерактивних веб-інтерфейсів. Від простих операцій до складних маніпуляцій з класами, метод replace() надає ефективні рішення для різних завдань веб-розробки.

правити

Порада

Переконайтеся, що токен, який ви замінюєте, існує. Метод replace() не викличе помилку, якщо токен відсутній, але заміна не відбудеться. Це може призвести до неочікуваних результатів у вашому коді, тому перед використанням методу можна перевірити наявність токена за допомогою методу contains(). Наприклад:

const element = document.getElementById('myElement');
if (element.classList.contains('oldClass')) {
    element.classList.replace('oldClass', 'newClass');
}

автор: Bond правити

Порада

Використовуйте метод replace() для динамічних змін класів, щоб забезпечити плавні переходи та анімації. Це дозволить змінювати стан елементів без необхідності вручну видаляти та додавати класи, що робить код більш чистим і зрозумілим. Наприклад, при зміні стану кнопки:

const button = document.getElementById('toggleButton');
button.addEventListener('click', () => {
    const element = document.getElementById('myElement');
    element.classList.replace('inactive', 'active');
});

автор: Bond правити

Порада

Застосовуйте метод replace() для підтримки єдиного стану елемента. Коли ви використовуєте цей метод, ви гарантуєте, що старий клас буде замінений новим, зберігаючи послідовність станів елемента. Це особливо корисно для елементів, які мають взаємовиключні стани. Наприклад:

const element = document.getElementById('statusIndicator');
element.classList.replace('error', 'success');

автор: Bond правити

Порада

Комбінуйте метод replace() з іншими методами DOMTokenList, щоб досягти складніших маніпуляцій з класами. Наприклад, можна спочатку перевірити наявність класу, потім замінити його, а після цього додати новий клас залежно від певної умови:

const element = document.getElementById('myElement');
if (element.classList.contains('oldClass')) {
    element.classList.replace('oldClass', 'newClass');
    element.classList.add('additionalClass');
}

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

replace(oldToken, newToken)

Параметри

oldToken

Рядок, що представляє клас, який потрібно замінити.

автор: Bond

правити

newToken

Рядок, що представляє новий клас, на який буде замінено oldToken.

автор: Bond

правити

Повернення

boolean

Повертає логічне значення, яке дорівнює true, якщо oldToken був успішно замінений, або false, якщо ні.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	61	49	10.1	48	17	—

Підтримка: мобільні переглядачі

Переглядач
	61	61	49	10.3

Приклади

+ запропонувати свій приклад у пісочниці

<div id="myElement">Демонстраційний елемент</div>

const element = document.getElementById('myElement');

// Елемент спочатку має клас 'original'
element.classList.add('original');

// Замінюємо клас 'original' на 'updated'
element.classList.replace('original', 'updated');

<header>
  <h2 class="title">String.prototype.replace()</h2>
  <p class="description">Метод замінює частини рядка на вказане значення, що збігається з регулярним виразом або рядком.</p>
</header>
<main>
  <div class="result">
    <!-- Поля для введення тексту та налаштувань заміни -->
    <label for="inputText">Введіть текст:</label>
    <textarea id="inputText" rows="4" placeholder="Введіть ваш текст тут..."></textarea>

    <label for="searchText">Знайти слово або фразу:</label>
    <input type="text" id="searchText" placeholder="Слово або фраза для заміни">

    <label for="replaceText">Замінити на:</label>
    <input type="text" id="replaceText" placeholder="Новий текст">

    <!-- Кнопка для виконання заміни -->
    <button id="replaceButton">Замінити</button>

    <!-- Відображення результату -->
    <h3>Результат:</h3>
    <p id="outputText">Результат з'явиться тут...</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

textarea, input[type="text"] {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

#replaceButton {
  padding: 10px 15px;
  border: none;
  background-color: #3498db;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

#outputText {
  margin-top: 15px;
  font-weight: bold;
  color: #333;
  white-space: pre-wrap;
}

const inputText = document.getElementById('inputText');
const searchText = document.getElementById('searchText');
const replaceText = document.getElementById('replaceText');
const replaceButton = document.getElementById('replaceButton');
const outputText = document.getElementById('outputText');

// Функція для виконання заміни тексту
replaceButton.addEventListener('click', function () {
  const text = inputText.value;
  const searchValue = searchText.value;
  const replaceValue = replaceText.value;

  // Використання методу replace для заміни
  const newText = text.replace(new RegExp(searchValue, 'g'), replaceValue);

  // Виведення результату на екран
  outputText.textContent = newText;
});
//# sourceURL=pen.js

<input type="text" id="classInput" placeholder="Введіть класи для заміни">
<button id="replaceClassesBtn">Замінити класи</button>
<div id="myElement" class="box highlight bordered"></div>

<script>
const element = document.getElementById('myElement');
const classInput = document.getElementById('classInput');
const replaceClassesBtn = document.getElementById('replaceClassesBtn');

replaceClassesBtn.addEventListener('click', () => {
  const classesToReplace = classInput.value.split(' ');
  const newClasses = classInput.value.split(' ');

  classesToReplace.forEach((oldClass, index) => {
    element.classList.replace(oldClass, newClasses[index]);
  });

  classInput.value = '';
});
</script>