JavaScript replace() — заміна в рядку: перше і всі входження
Загальний опис
Метод 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 незмінні взагалі. Він завжди повертає новий рядок, і його треба присвоїти.
- Порада
-
Якщо потрібно більше контролю над процесом заміни, використовуйте функцію як другий аргумент у
автор: Bondreplace(). Це дозволяє вам маніпулювати замінюваним текстом на льоту, наприклад, змінювати регістр букв або додавати додаткові символи. - Порада
-
У методі
автор: Bondreplace()можна використовувати спеціальні символи у строках заміни, такі як$&для вставки знайденого фрагменту. Це особливо корисно, коли потрібно обернути знайдений текст у додаткові символи або HTML-теги. - Порада
-
Коли використовуєте регулярні вирази для глобальної заміни, усвідомлюйте, що це може вплинути на всі входження збігів у рядку. Переконайтеся, що ваш шаблон регулярного виразу точно відповідає тому, що ви хочете замінити, щоб уникнути небажаних змін у рядку.
автор: Bond - Порада
-
Коли вам потрібно замінити більше, ніж один конкретний символ або рядок, використовуйте регулярні вирази. Вони дозволяють визначати шаблони для пошуку, забезпечуючи більшу гнучкість. Наприклад, використання
автор: Bond/hello/gяк першого аргументу в методіreplace()дозволяє замінити всі входження слова "hello" у рядку.
Синтаксис
replace(pattern, replacement)Параметри
pattern-
Може бути рядком або об'єктом з методом
автор: BondSymbol.replace, зазвичай використовується регулярний вираз. Якщо значення не має методуSymbol.replace, воно буде приведено до рядка. replacement-
Може бути рядком або функцією, яка визначає, на що замінити відповідні збіги у початковому рядку.
автор: Bond
Повернення
string-
Повертає новий рядок, у якому одне, декілька або всі входження шаблону замінені на вказаний замінник. Якщо шаблон виявлений у вихідному рядку, він буде замінений на рядок або результат виконання функції, переданих у якості другого аргументу. Важливо пам'ятати, що оригінальний рядок залишається незмінним, а результатом є новий рядок із внесеними змінами.
автор: Bond
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 4 | 12 | 5.5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
| Переглядач |  |
 |
|---|---|---|
| 0.10.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому більш складному прикладі ми використовуємо String.prototype.replace() з регулярним виразом для заміни всіх входжень певного слова у тексті, незалежно від регістру. Регулярні вирази роблять replace() значно потужнішим і гнучкішим інструментом.
// Визначення вихідного рядка
let text = "Роза - це квітка. Роза чудово пахне.";
// Створення регулярного виразу для пошуку слова "роза" (незалежно від регістру)
let regex = /роза/gi;
// Заміна всіх входжень "роза" на "тюльпан"
let newText = text.replace(regex, "тюльпан");
console.log(newText);
// Виведе: "Тюльпан - це квітка. Тюльпан чудово пахне."
У цьому прикладі користувач вводить оригінальний рядок, рядок, який потрібно замінити, і новий рядок для заміни. Після натискання кнопки, скрипт замінює підрядок на новий рядок у вказаному рядку, і результат відображається на сторінці. Це демонструє динамічну взаємодію з методом replace() у JavaScript.
У цьому прикладі ми використовуємо метод String.prototype.replace() для заміни слова у рядку. Цей метод чудово підходить для простих замін, наприклад, коли потрібно замінити певне слово або фразу на іншу.
// Визначення вихідного рядка
let originalString = "Привіт, світ!";
// Заміна слова "світ" на "всесвіт"
let replacedString = originalString.replace("світ", "всесвіт");
console.log(replacedString);
// Виведе: "Привіт, всесвіт!"
Коментарі
Коментарів ще немає — будьте першим!