LearnJS

replace() в JavaScript

replace() заменяет найденный фрагмент строки на другое значение.

let message = 'Я изучаю HTML';
let result = message.replace('HTML', 'JavaScript');

console.log(result);

Результат:

Я изучаю JavaScript

Метод нашел фрагмент ‘HTML’ и вернул новую строку, где вместо него стоит ‘JavaScript’.

Что делает replace()

replace() ищет в строке одно совпадение и заменяет его.

let text = 'Привет, Иван';

console.log(text.replace('Иван', 'Анна'));

Результат:

Привет, Анна

Чаще всего метод используют, когда нужно исправить часть текста, заменить слово или убрать небольшой фрагмент строки.

Синтаксис

Основная запись выглядит так:

string.replace(searchValue, newValue);

searchValue - что ищем в строке.

newValue - на что заменяем найденный фрагмент.

let text = 'Цена: 100 рублей';

console.log(text.replace('100', '150'));

Результат:

Цена: 150 рублей

Замена первого совпадения

Если искать обычную строку, replace() заменит только первое совпадение.

let text = 'кот и кот';

console.log(text.replace('кот', 'пес'));

Результат:

пес и кот

В строке два слова ‘кот’, но метод заменил только первое. Для замены всех обычных совпадений чаще используют replaceAll().

Если совпадение не найдено

Если нужного фрагмента нет, replace() вернет строку без изменений.

let text = 'JavaScript';

console.log(text.replace('HTML', 'CSS'));

Результат:

JavaScript

Замена на пустую строку

Если заменить фрагмент на пустую строку, он исчезнет из результата.

let text = 'JavaScript!';

console.log(text.replace('!', ''));

Результат:

JavaScript

Так можно убрать один лишний символ или небольшой фрагмент.

Замена с регулярным выражением

Первым аргументом можно передать не только строку, но и регулярное выражение.

let text = 'Телефон: 123-45-67';

console.log(text.replace(/\d/g, '*'));

Результат:

Телефон: ***-**-**

Флаг g говорит заменить все совпадения, найденные регулярным выражением. Если регулярные выражения пока не знакомы, достаточно запомнить: с обычной строкой replace() заменяет только первое совпадение.

Строка не меняется

replace() не изменяет исходную строку. Он возвращает новую строку.

let text = 'Я изучаю HTML';

text.replace('HTML', 'JavaScript');

console.log(text);

Результат:

Я изучаю HTML

Чтобы использовать результат дальше, его нужно сохранить.

let text = 'Я изучаю HTML';
let result = text.replace('HTML', 'JavaScript');

console.log(result);

Результат:

Я изучаю JavaScript

Итого

replace() нужен, чтобы заменить часть строки и получить новую строку.

  • replace(searchValue, newValue) ищет фрагмент и заменяет его.
  • С обычной строкой метод заменяет только первое совпадение.
  • Если совпадение не найдено, строка вернется без изменений.
  • Замена на пустую строку удаляет найденный фрагмент из результата.
  • Исходная строка не меняется.