String.replace() в JavaScript — заміна в рядку

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

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

На базовому рівні, replace() приймає два аргументи: підрядок, який потрібно замінити, та рядок, на який цей підрядок має бути замінений. Наприклад:

let text = "Привіт, світ!";
let newText = text.replace("світ", "друг");
console.log(newText); // Виведе "Привіт, друг!"

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

let text = "Яблуко, банан, яблуко";
let newText = text.replace(/яблуко/gi, "апельсин");
console.log(newText); // Виведе "Апельсин, банан, апельсин"

Тут використовується регулярний вираз /яблуко/gi, де g означає глобальну заміну (всі входження), а i - нечутливість до регістру.

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

Також replace() може використовувати функцію як другий аргумент для більш складних замін. Наприклад:

let text = "Розумний має вуха";
let newText = text.replace("вуха", (match) => match.toUpperCase());
console.log(newText); // Виведе "Розумний має ВУХА"

Тут метод replace() використовує функцію, яка перетворює знайдене слово в верхній регістр.

правити

Як замінити всі входження

replace() із рядком-шуканим замінює лише перше входження — сюрприз номер один цього метода.

Замінити всі можна двома шляхами:

• replaceAll('а', 'б') — сучасний і найчитабельніший;
• replace(/а/g, 'б') — регулярний вираз із прапорцем g; єдиний варіант, коли шукане — шаблон, а не точний рядок.

У рядку заміни працюють спецпослідовності: $& — усе знайдене, $1 — перша група дужок регулярного виразу. А другим аргументом може бути функція: вона отримує кожен збіг і повертає заміну — так роблять перетворення, які не записати шаблоном.

Сам рядок replace() не змінює — рядки в JavaScript незмінні взагалі. Він завжди повертає новий рядок, і його треба присвоїти.

правити

Порада

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

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

Порада

У методі replace() можна використовувати спеціальні символи у строках заміни, такі як $& для вставки знайденого фрагменту. Це особливо корисно, коли потрібно обернути знайдений текст у додаткові символи або HTML-теги.

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

Порада

Коли використовуєте регулярні вирази для глобальної заміни, усвідомлюйте, що це може вплинути на всі входження збігів у рядку. Переконайтеся, що ваш шаблон регулярного виразу точно відповідає тому, що ви хочете замінити, щоб уникнути небажаних змін у рядку.

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

Порада

Коли вам потрібно замінити більше, ніж один конкретний символ або рядок, використовуйте регулярні вирази. Вони дозволяють визначати шаблони для пошуку, забезпечуючи більшу гнучкість. Наприклад, використання /hello/g як першого аргументу в методі replace() дозволяє замінити всі входження слова "hello" у рядку.

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

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

Синтаксис

replace(pattern, replacement)

Параметри

pattern

Може бути рядком або об'єктом з методом Symbol.replace, зазвичай використовується регулярний вираз. Якщо значення не має методу Symbol.replace, воно буде приведено до рядка.

автор: Bond

правити

replacement

Може бути рядком або функцією, яка визначає, на що замінити відповідні збіги у початковому рядку.

автор: Bond

правити

Повернення

string

Повертає новий рядок, у якому одне, декілька або всі входження шаблону замінені на вказаний замінник. Якщо шаблон виявлений у вихідному рядку, він буде замінений на рядок або результат виконання функції, переданих у якості другого аргументу. Важливо пам'ятати, що оригінальний рядок залишається незмінним, а результатом є новий рядок із внесеними змінами.

автор: Bond

правити

Переглядачі

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

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

Переглядач
	1	1	1	4	12	5.5

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

Переглядач
	4.4	18	4	1

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

Переглядач
	0.10.0	1.0

Приклади

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

// Визначення вихідного рядка
let text = "Роза - це квітка. Роза чудово пахне.";

// Створення регулярного виразу для пошуку слова "роза" (незалежно від регістру)
let regex = /роза/gi;

// Заміна всіх входжень "роза" на "тюльпан"
let newText = text.replace(regex, "тюльпан");

console.log(newText);
// Виведе: "Тюльпан - це квітка. Тюльпан чудово пахне."

<header>
  <h2 class="title">String.prototype.replace()</h2>
  <p class="description">Замінює входження підрядка в рядку на інший рядок.</p>
</header>
<main>
  <div class="result">
    <input type="text" id="originalString" placeholder="Введіть початковий рядок" />
    <input type="text" id="stringToReplace" placeholder="Рядок для заміни" />
    <input type="text" id="replacementString" placeholder="Новий рядок" />
    <button onclick="replaceString()">Замінити</button>
    <p id="output">Результат: </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);
}

input[type="text"] {
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

#output {
  margin-top: 15px;
  font-weight: bold;
}

function replaceString() {
  var original = document.getElementById('originalString').value;
  var toReplace = document.getElementById('stringToReplace').value;
  var replacement = document.getElementById('replacementString').value;
  var result = original.replace(toReplace, replacement);
  document.getElementById('output').innerHTML = 'Результат: ' + result;
}
//# sourceURL=pen.js

// Визначення вихідного рядка
let originalString = "Привіт, світ!";

// Заміна слова "світ" на "всесвіт"
let replacedString = originalString.replace("світ", "всесвіт");

console.log(replacedString);
// Виведе: "Привіт, всесвіт!"