JavaScript метод String.prototype.replace()

Определение и применение

JavaScript метод replace() выполняет внутри строки поиск с использованием регулярного выражения (объект RegExp), или строкового значения и возвращает новую строку, в которой будут заменены найденные значения.

При именованных группах строка замены поддерживает $<name>, а функция замены получает дополнительный последний аргумент groups. Не участвовавшая в совпадении группа передаётся как undefined. В строке, возвращённой функцией замены, шаблоны вроде $& не интерпретируются.

Поддержка браузерами

Спецификация: ecma262

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьjavascript.builtins.String.replace
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
replace✓1✓12✓1✓4✓1✓18✓4✓10.1✓1✓1.0✓4.4✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

JavaScript синтаксис

JavaScript
string.replace(searchValue, newValue);

Спецификация

ECMAScript: String.prototype.replace()

Значения параметров

String: справочные сведения
Параметр Описание
searchValue Объект регулярного выражения или строковое значение. Если аргумент является строкой, а не регулярным выражением, то метод replace() выполняет буквальный поиск строки, а не преобразует его в регулярное выражение с помощью вызова конструктора new RegExp(regexp). Строковый шаблон заменяет только первое вхождение; для замены всех вхождений используйте replaceAll() или регулярное выражение с флагом g.
newValue

Строка, определяющая текст для замены, или функция, которая вызывается для генерации текста замены. Строка замены может включать следующие специальные шаблоны замены:

String: справочные сведения
Символы Замена
$1, $2, …, $99 Текст, соответствующий подвыражению с номером от 1 до 99 внутри регулярного выражения regexp (объекта RegExp).
$& Вставляет сопоставившуюся подстроку.
$` Вставляет часть строки, предшествующую сопоставившейся подстроке (текст слева от найденной подстроки).
$' Вставляет часть строки, следующую за сопоставившейся подстрокой (текст справа от найденной подстроки).
$$ Осуществляет вставку символа доллара.

Обратите внимание на то, что если аргумент является функцией, то она будет вызываться для каждого найденного соответствия, а возвращаемая ею строка будет использоваться в качестве текста для замены.
Функция принимает следующие аргументы:

  • Первый аргумент, передаваемый функции это строка, которая соответствует шаблону (соответствует шаблону замены $&).
  • Следующие за ним аргументы это строки, соответствующие любым подвыражениям внутри шаблона (подобных аргументов может быть от ноля и более).
  • Следующий аргумент представляет из себя целое число, указывающее позицию внутри строки, в которой было найдено соответствие.
  • При отсутствии именованных групп последний аргумент функции замены содержит копию строки по которой происходит замена (содержит ссылку на саму строку).

Важный момент заключается в том, что точное число аргументов зависит от того, был ли первый аргумент объектом RegExp, если да, то сколько подгрупп в нём определено.

Примеры, попробуйте сами

Использование флагов g и i с методом replace()

В примере «Замена без учёта регистра» показан результат вызова метода.

Замена без учёта регистра

Измените исходную строку или аргумент метода и сравните результат после запуска.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Замена без учёта регистра</title>
  </head>
  <body>
    <p>Результат выполнения выводится в консоль.</p>
  </body>
</html>
main.js
JavaScript
const str = 'Ты кто такой? Что ты делаешь?' // инициализируем строковое значение
const newstr = str.replace(/ты/gi, 'вы')
console.log(newstr) // "вы кто такой? Что вы делаешь?"

Перестановка слов местами

В примере «Перестановка захваченных групп» показан результат вызова метода.

Перестановка захваченных групп

Измените исходную строку или аргумент метода и сравните результат после запуска.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Перестановка захваченных групп</title>
  </head>
  <body>
    <p>Результат выполнения выводится в консоль.</p>
  </body>
</html>
main.js
JavaScript
const str = 'Boris Britva' // инициализируем строковое значение
const newstr = str.replace(/(\w+)\s(\w+)/, '$2 $1')
console.log(newstr) // Britva Boris

Перевод первых букв всех слов в верхний регистр с помощью функции замены

В примере «Функция замены для каждого слова» показан результат вызова метода.

Функция замены для каждого слова

Измените исходную строку или аргумент метода и сравните результат после запуска.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Функция замены для каждого слова</title>
  </head>
  <body>
    <p>Результат выполнения выводится в консоль.</p>
  </body>
</html>
main.js
JavaScript
const str = 'андрей, артем, иван, вазген' // инициализируем строковое значение

const func = (word) => word.substring(0, 1).toUpperCase() + word.substring(1) // инициализируем функцию замены

const newstr = str.replace(/([^\s]+)/g, func)

console.log(newstr) // "Андрей, Артем, Иван, Вазген"

Определенный символ в качестве разделителя числа

В примере «Разделение разрядов числа» показан результат вызова метода.

Разделение разрядов числа

Измените исходную строку или аргумент метода и сравните результат после запуска.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Разделение разрядов числа</title>
  </head>
  <body>
    <p>Результат выполнения выводится в консоль.</p>
  </body>
</html>
main.js
JavaScript
const num = 123456789 // инициализируем числовое значение
const re = /\B(?=(\d{3})+(?!\d))/g // инициализируем регулярное выражение

const newstr = num.toString().replace(re, ',') // запятые в качестве разделителя числа
const newstr2 = num.toString().replace(re, ' ') // пробелы в качестве разделителя числа

console.log(newstr) // "123,456,789"
console.log(newstr2) // "123 456 789"