Пошук уроків, статей та іншого контенту
Навчитеся замінювати збіги рядками, шаблонами підстановки та функціями-колбеками через replace і replaceAll.
replaceМетод replace створює та повертає новий рядок, у якому один або кілька збігів замінено іншим значенням.
Початковий рядок не змінюється:
const message = "Привіт, JavaScript!";
const result = message.replace("JavaScript", "TypeScript");
console.log(result); // "Привіт, TypeScript!"
console.log(message); // "Привіт, JavaScript!"Синтаксис:
string.replace(searchValue, replacement);searchValue — рядок або регулярний вираз;
replacement — рядок або функція-колбек.
Якщо searchValue — звичайний рядок, replace замінює лише перший збіг:
const text = "cat, cat, cat";
console.log(text.replace("cat", "dog"));
// "dog, cat, cat"Щоб замінити всі збіги регулярного виразу, потрібно використати прапорець g:
const text = "cat, cat, cat";
const result = text.replace(/cat/g, "dog");
console.log(result);
// "dog, dog, dog"Без g буде замінено тільки перший збіг:
const text = "cat, cat, cat";
console.log(text.replace(/cat/, "dog"));
// "dog, cat, cat"Прапорець i дає змогу ігнорувати регістр:
const text = "JavaScript javascript JAVASCRIPT";
console.log(text.replace(/javascript/gi, "JS"));
// "JS JS JS"Прапорці комбінуються. Наприклад, /word/gi шукає всі збіги незалежно від регістру.
replaceAllМетод replaceAll призначений для заміни всіх збігів:
const text = "cat, cat, cat";
console.log(text.replaceAll("cat", "dog"));
// "dog, dog, dog"На відміну від replace, replaceAll замінює всі входження навіть тоді, коли пошукове значення є рядком.
Метод також приймає регулярний вираз:
const text = "JavaScript javascript JAVASCRIPT";
const result = text.replaceAll(/javascript/gi, "JS");
console.log(result);
// "JS JS JS"Якщо передати в replaceAll регулярний вираз без прапорця g, JavaScript створить помилку:
const text = "one one";
// TypeError: String.prototype.replaceAll called with a non-global RegExp argument
text.replaceAll(/one/, "two");Правильний варіант:
const text = "one one";
console.log(text.replaceAll(/one/g, "two"));
// "two two"replace, а коли replaceAllreplace — коли потрібно замінити перший збіг або використати регулярний вираз із власною логікою;
replaceAll — коли потрібно однозначно замінити всі входження;
replace з прапорцем g також замінює всі збіги регулярного виразу.
Коли другим аргументом є рядок, у ньому можна використовувати спеціальні послідовності.
| Послідовність | Значення | |---|---| | $& | повний знайдений збіг | | `$` | частина рядка перед збігом | | $' | частина рядка після збігу | | $1, $2 | значення першої, другої та наступних груп | | $<name> | значення іменованої групи |
Наприклад, $& вставляє знайдений текст у заміну:
const text = "Помилка: 404";
const result = text.replace(/\d+/, "код $&");
console.log(result);
// "Помилка: код 404"Круглі дужки створюють групу захоплення. Значення групи можна вставити через $1, $2 тощо:
const date = "2026-07-26";
const result = date.replace(
/(\d{4})-(\d{2})-(\d{2})/,
"$3.$2.$1"
);
console.log(result);
// "26.07.2026"У цьому прикладі:
$1 — рік;
$2 — місяць;
$3 — день.
Порядок груп визначається порядком відкривальних круглих дужок у регулярному виразі.
Іменовані групи записуються у форматі (?<name>...), а в рядку заміни використовуються як $<name>:
const fullName = "Shevchenko Taras";
const result = fullName.replace(
/(?<lastName>\w+)\s+(?<firstName>\w+)/,
"$<firstName> $<lastName>"
);
console.log(result);
// "Taras Shevchenko"Іменовані групи роблять складні шаблони зрозумілішими, оскільки не потрібно запам’ятовувати номери груп.
Замість рядка другим аргументом можна передати функцію. JavaScript викличе її для кожного знайденого збігу.
const result = "2 apples and 3 oranges".replace(
/\d+/g,
(match) => String(Number(match) * 2)
);
console.log(result);
// "4 apples and 6 oranges"Колбек отримує такі аргументи:
function replacement(match, p1, p2, offset, string, groups) {
// ...
}match — повний знайдений збіг;
p1, p2 — значення груп захоплення;
offset — позиція збігу в початковому рядку;
string — весь початковий рядок;
groups — об’єкт з іменованими групами, якщо вони є.
Для регулярного виразу без груп колбек може мати коротший вигляд:
const text = "hello world";
const result = text.replace(/\w+/g, (word) => {
return word[0].toUpperCase() + word.slice(1);
});
console.log(result);
// "Hello World"const text = "2026-07-26 and 2025-12-31";
const result = text.replace(
/(\d{4})-(\d{2})-(\d{2})/g,
(match, year, month, day) => `${day}.${month}.${year}`
);
console.log(result);
// "26.07.2026 and 31.12.2025"Колбек зручніший за шаблон підстановки, коли заміна залежить від значень:
const text = "5, 10, 15";
const result = text.replace(/\d+/g, (number) => {
const value = Number(number);
return String(value * value);
});
console.log(result);
// "25, 100, 225"Для іменованих груп останнім аргументом колбека передається об’єкт groups:
const text = "Shevchenko Taras";
const result = text.replace(
/(?<lastName>\w+)\s+(?<firstName>\w+)/,
(match, offset, wholeString, groups) => {
return `${groups.firstName} ${groups.lastName}`;
}
);
console.log(result);
// "Taras Shevchenko"Проте позиційні аргументи стають менш очевидними, коли в регулярному виразі є групи. На практиці для складних шаблонів зручніше враховувати повний список аргументів:
const text = "Shevchenko Taras";
const result = text.replace(
/(?<lastName>\w+)\s+(?<firstName>\w+)/,
(match, lastName, firstName, offset, wholeString, groups) => {
return `${groups.firstName} ${groups.lastName}`;
}
);
console.log(result);
// "Taras Shevchenko"Регулярні вирази та колбеки корисні, коли значення потрібно не просто замінити, а перетворити.
const input = `
Телефони:
+380 (67) 123-45-67
+380 50 987 65 43
`;
const normalized = input.replace(
/\+380\s*\(?(\d{2})\)?\s*(\d{3})[-\s]?(\d{2})[-\s]?(\d{2})/g,
(match, operator, first, second, third) => {
return `+380${operator}${first}${second}${third}`;
}
);
console.log(normalized);Результат:
Телефони:
+380671234567
+380509876543Групи захоплення виділяють частини номера, а колбек формує єдиний нормалізований формат.
За допомогою колбека можна приховувати частину конфіденційного значення:
const email = "developer@example.com";
const masked = email.replace(
/^(.{2})([^@]+)(@.*)$/,
(match, firstCharacters, middle, domain) => {
return `${firstCharacters}${"*".repeat(middle.length)}${domain}`;
}
);
console.log(masked);
// "de********@example.com"У цьому прикладі:
перші два символи залишаються без змін;
частина перед @ замінюється на зірочки;
домен залишається без змін.
Регулярний вираз має спеціальні символи: ., *, +, ?, ^, $, (, ), [, ], {, }, |, \.
Якщо потрібно шукати саме символ крапки, його треба екранувати:
const text = "file.txt and image.txt";
console.log(text.replace(/\./g, "-"));
// "file-txt and image-txt"Крапка без екранування означає «будь-який символ»:
const text = "a.b axb";
console.log(text.replace(/./g, "X"));
// "XXXXXX"Якщо пошуковий текст надходить від користувача, не варто безпосередньо вставляти його в регулярний вираз. Спеціальні символи можуть змінити значення шаблону. У простих випадках, коли регулярний вираз не потрібен, безпечніше використати replaceAll із рядком:
const text = "price: $10, price: $20";
const result = text.replaceAll("$", "USD ");
console.log(result);
// "price: USD 10, price: USD 20"Прапорець m змінює поведінку якорів ^ і $: вони починають відповідати початку та кінцю кожного рядка, а не всього рядка.
const text = `name: Taras
name: Olena
name: Ivan`;
const result = text.replace(/^name:/gm, "user:");
console.log(result);
// user: Taras
// user: Olena
// user: IvanПрапорець g відповідає за всі збіги, а m — за роботу з окремими рядками.
const text = "A.B A.B";
console.log(text.replaceAll("A.B", "X"));
// "X X"У цьому випадку крапка є звичайним символом.
const text = "A.B AXB";
console.log(text.replaceAll(/A.B/g, "X"));
// "X X"У регулярному виразі крапка означає будь-який символ, тому збігаються і A.B, і AXB.
Щоб шукати буквальну крапку в регулярному виразі, використовуйте \.:
const text = "A.B AXB";
console.log(text.replaceAll(/A\.B/g, "X"));
// "X AXB"gconst text = "one one one";
console.log(text.replace(/one/, "two"));
// "two one one"Якщо потрібно замінити всі збіги, додайте g або використайте replaceAll:
console.log(text.replace(/one/g, "two"));
// "two two two"
console.log(text.replaceAll("one", "two"));
// "two two two"replaceAll із нерозповсюдженим регулярним виразом// Викличе TypeError
"one one".replaceAll(/one/, "two");Правильно:
"one one".replaceAll(/one/g, "two");Рядки в JavaScript незмінні. Методи replace і replaceAll повертають новий рядок:
let text = "hello";
text.replace("hello", "hi");
console.log(text);
// "hello"Потрібно зберегти результат:
let text = "hello";
text = text.replace("hello", "hi");
console.log(text);
// "hi"$1$1 працює лише тоді, коли регулярний вираз має першу групу захоплення:
const text = "2026-07-26";
console.log(text.replace(/\d{4}-\d{2}-\d{2}/, "$1"));
// "$1"У регулярному виразі немає групи, тому $1 не містить корисного значення.
Правильно:
console.log(
text.replace(/(\d{4})-(\d{2})-(\d{2})/, "$3.$2.$1")
);
// "26.07.2026"g та mg — замінює всі збіги;
m — змінює роботу ^ і $ у багаторядковому тексті.
Прапорець m сам по собі не робить заміну глобальною:
const text = `name: Taras
name: Olena`;
console.log(text.replace(/^name:/m, "user:"));
// user: Taras
// name: OlenaДля всіх рядків потрібні обидва прапорці:
console.log(text.replace(/^name:/gm, "user:"));
// user: Taras
// user: OlenaРегулярний вираз має вирішувати конкретну задачу, а не намагатися перевірити всі можливі випадки одразу. Якщо шаблон стає важким для читання:
розбийте обробку на кілька кроків;
використайте іменовані групи;
перенесіть логіку перетворення в колбек;
додайте тести для звичайних і граничних випадків.
replace за замовчуванням замінює лише перший збіг.
Регулярний вираз із прапорцем g дає змогу замінити всі збіги через replace.
replaceAll замінює всі входження рядка або глобального регулярного виразу.
Другим аргументом може бути рядок із шаблонами $&, $1, $<name> та іншими спеціальними послідовностями.
Функція-колбек дає змогу обчислювати заміну для кожного збігу.
Групи захоплення передають частини збігу в рядок заміни або колбек.
Методи не змінюють початковий рядок — вони повертають новий.
Під час роботи з регулярними виразами уважно перевіряйте прапорці g, i, m і екранування спеціальних символів.