Метод String Replace() в JavaScript: замена в строке

В этом руководстве вы узнаете, как использовать метод JavaScript String replace() для замены подстроки в строке на новую.

Синтаксис:

let newStr = str.replace(substr, newSubstr);

Метод JavaScript String replace() возвращает новую строку с подстрокой ( substr ), замененной новой ( newSubstr ).

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

Примеры

В следующем примере функция replace() используется для замены JS в строке ‘JS will, JS will rock you’ новой подстрокой вJavaScript :

let str = 'JS will, JS will rock you!';
let newStr = str.replace('JS','JavaScript');

console.log(newStr);

Выход:

JavaScript will, JS will rock you!

Как видно из вывода, только первое вхождение подстроки JS было заменено новой подстрокой JavaScript.

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

Использование регулярных выражений

Метод replace() полностью поддерживает регулярные выражения:

let newStr = str.replace(regexp, newSubstr);

В этом синтаксисе метод replace() находит все совпадения в строке str, заменяет их на newSubstr и возвращает новую строку ( newStr ).

В следующем примере используется глобальный флаг ( g ) для замены всех вхождений JS в str на JavaScript :

let str = 'JS will, JS will rock you!';
let newStr = str.replace(/JS/g,'JavaScript');

console.log(newStr);

Выход:

JavaScript will, JavaScript will rock you!

Если вы хотите игнорировать случаи поиска и замены, вы можете использовать флаг игнорирования ( i ) в регулярном выражении следующим образом:

let str = 'JS will, Js will rock you!';
let newStr = str.replace(/JS/gi,'JavaScript');

console.log(newStr);

Выход:

JavaScript will, JavaScript will rock you!

Использование функции замены

Вместо того, чтобы передавать newSubstr во второй параметр метода replace(), вы можете передать функцию замены следующим образом:

let newStr = str.replace(substr | regexp, replacer);

В этом синтаксисе метод будет вызыватьreplacer функцию замены после выполнения сопоставления. Затем он использует результат этой функции в качестве строки замены.

Если вы используете глобальный флаг( g ) в регулярном выражении, метод replace() будет replacer функцию замены для каждого совпадения. Например, если есть три совпадения, метод трижды вызовет функцию replacer().

Синтаксис:

function replacer(match, p1, p2, ..., offset, string);

Ниже приведены значения каждого параметра:

• match : это совпавшая подстрока.
• p1, p2, … pn — это n-я строка, найденная группой захвата в скобках, предоставленной регулярным выражением.
• offset : это смещение совпадающей подстроки во всей искомой строке.
• string : проверяется вся строка.

В следующем примере функция replace() используется для преобразования подстрок apples и bananas в верхний регистр. Она передает функцию-заменитель в функцию replace() :

let str = "I like to eat, eat, eat apples and bananas";
let re = /apples|bananas/gi;

let newStr = str.replace(re,(match) => { 
    console.log({match}); 
    return match.toUpperCase();
});

console.log(newStr);

Выход:

{match: "apples"}
{match: "bananas"}
I like to eat, eat, eat APPLES and BANANAS

Заключение

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