Метод replace в JavaScript

В этой статье мы разберём, как использовать метод replace в JavaScript для замены строки или подстроки.

Как заменить строку или подстроку с помощью метода replace

Метод replace в js можно использовать для замены строки или подстроки в строке. Он принимает два аргумента и возвращает новую строку:

1. Строка или регулярное выражение, подлежащее замене.
2. Строка, которая заменит соответствующую строку, или регулярное выражение.

// Синтаксис
string.replace(searchValue, replaceValue)

В приведённом выше синтаксисе string — это строка, для которой вы хотите выполнить замену. Параметр searchValue — это либо строка, либо регулярное выражение (regexp), которое вы хотите найти в string. Параметр replaceValue — это строка, которая заменит searchValue.

Что касается этого примера, то он позволит заменить только первое совпадение (подстроку). Если необходимо провести замену всех совпадающих подстрок, потребуется метод replaceAll().

Примеры использования метода js string replace

Это заменит «color» в строке и вернёт новую строку, присвоенную переменной newString.

let originalString = 'The color of the sky changes throughout the day.';

let newString = originalString.replace('color', 'colour');

console.log(newString);

Кроме того, в ситуации, когда в строке имеется более одной такой подстроки, стоит применять метод replaceAll().

let originalString = 'The color of the sky changes throughout the day, and sometimes the color of the clouds creates a beautiful contrast. The color of a flower can indicate its species, and the color of clothing can affect someone's mood.';

let newString = originalString.replaceAll('color', 'colour');

console.log(newString);

Это заменит все экземпляры «color» в строке и вернёт новую строку, присвоенную переменной newString.

Как заменить несколько строк и подстроку с помощью метода replace в JavaScript

Стоит отметить, что иногда может потребоваться изменить более одной строки или подстроки в одной строковой переменной. Например, в тексте ниже нам надо заменить «color» на «colour», а «JS» на «JavaScript».

let originalString = 'Using JS, you can change the color of a webpage's background, text, and elements.'

Это можно сделать с помощью цепочки нескольких методов replace(), как можно посмотреть в примере ниже.

let originalString = 'Using JS, you can change the color of a webpage's background, text, and elements.';

let newString = originalString
    .replace('color', 'colour')
    .replace('JS', 'JavaScript');

console.log(newString);

Во-первых, такой подход позволит вернуть новую строку с заменёнными обоими подстроками. Во-вторых, может потребоваться заменить несколько строк или подстрок одной строкой. Например, заменить, слова «quick», «fox» и «brown», одной строкой — «hello».

let originalString = 'The quick brown fox jumps over the lazy dog.';
let newString = originalString.replace(/quick|brown|fox/g, 'hello');

console.log(newString); // 'The hello hello hello jumps over the lazy dog.'

Как использовать replace в JavaScript с регулярными выражениями

В JavaScript можно использовать метод replace() с регулярными выражениями для замены строк и подстрок с большей гибкостью. Например:

let originalString = 'Today is a sunny day. I love sunny days!';
let newString = originalString.replace(/sunny/g, 'cloudy');

console.log(newString); // 'Today is a cloudy day. I love cloudy days!'

В этом примере регулярное выражение /sunny/g соответствует всем вхождениям подстроки «sunny» в переменной originalString. Флаг g указывает, что все совпадения подлежат замене. Заменяющая строка «cloudy» будет подставлена вместо всех совпадающих подстрок, в результате чего на выходе получается переменная newString с новым значением строки.

Регулярные выражения также можно использовать для сопоставления шаблонов или групп символов. Например:

let originalString = 'My phone number is (123) 456-7890';
let newString = originalString.replace(/\D/g, '');

console.log(newString); // '1234567890' 

В приведённом выше примере регулярное выражение /\D/g соответствует всем нецифровым символам в originalString. Флаг \D соответствует любому символу, который не является цифрой, а флаг g указывает, что все соответствия в строке должны быть заменены.

Читайте также: ООП на JavaScript.

Замена регулярными выражениями с учётом регистра

Вообще говоря, регулярные выражения позволяют выполнять расширенный поиск и операции замены. Например, используя флаг i, можно заменять только строки и подстроки, регистр которых совпадает.

const originalString = 'I love JavaScript and javascript loves me';
const newString = originalString.replace(/JavaScript/i, 'Python');

console.log(newString); // 'I love Python and javascript loves me'

В примере выше метод replace() заменяет первое вхождение слова «JavaScript» на «Python» в переменной originalString. Флаг /i используется для выполнения поиска без учёта регистра.

Кроссбраузерность

Метод replace в JavaScript имеет полную поддержку всеми современными браузерами.