Метод replace() на языке Javascript
Метод replace() возвращает новую строку с некоторыми или всеми сопоставлениями с шаблоном, которые были заменены на заменитель. Шаблон может быть регулярным выражением или строкой, а заменитель функцией или строкой, вызываемой при каждом сопоставлении.
Синтаксис
str.replace(regexp|substr, newSubStr|function[, flags])
Параметры
- regexp. Объект регулярного выражения RegExp. Сопоставление заменяется возвращаемым значением второго параметра.
- substr. Строка, заменяемая на newSubStr. Учтите, будет заменено лишь первое вхождение искомой строки.
- newSubStr. Строка, заменяющая подстроку из первого параметра. Она поддерживает несколько специальных шаблонов замены.
- function. Функция, которая вызывается для создания новой подстроки (той, которая помещается вместо подстроки из первого параметра).
- flags. Важно: аргумент flags не работает в ядре v8 (движок JavaScript в NodeJs и Chrome). Строка, задающая комбинацию флагов регулярного выражения. Параметр flags в методе String.prototype.replace() выступает нестандартным расширением. Вместо использования данного параметра используйте объект RegExp с соответствующими флагами. Значение данного параметра, если он применяется, должно быть строкой, которая состоит из одного или более последующих символов,влияющих на обработку регулярного выражения следующим образом:
i
| игнорировать регистр |
m
| сопоставление по нескольким строкам |
g
| глобальное сопоставление |
y
| «липкий» поиск, сопоставление начинается с текущей позиции в строке |
- Возвращаемое значение. Новая строка с некоторыми или даже всеми сопоставлениями шаблона, заменёнными на заменитель.
Описание
Такой метод не изменяет объект String, где он вызывается. Он только возвращает новую строку. Чтобы выполнить глобальный поиск и замену можно выбрать один из способов:
- включите флаг g в регулярное выражение;
- включите флаг g в параметр flags, если первый параметр является строкой.
Передача строки в качестве второго параметра
Специальные шаблоны замены, которые могут использоваться для строки замены:
Шаблон | Замена |
$& | Вставляет сопоставившуюся подстроку. |
$n или $nn | Символы n или nn выступают десятичными цифрами, в первом параметре вставляет n-ную сопоставившуюся подгруппу из объекта RegExp. |
$$ | Вставляет символ доллара «$». |
$’ | Вставляет часть строки, идущей следующей за сопоставившейся подстрокой. |
$` | Вставляет часть строки, которая предшествует сопоставившейся подстроке. |
Передача функции в качестве второго параметра
В роли второго параметра можно передать функцию. В таком случае функция будет выполнена после сопоставления. Результат вызова функции будет использоваться как строка замены (важно: описанные выше специальные шаблоны замены в таком случае не применяются).
Внимание! Функция будет вызвана несколько раз для каждого полного сопоставления, в том случае если регулярное выражение в первом параметре будет глобальным.
Функция принимает такие аргументы:
Возможное имя | Получаемое значение |
p1, p2, … | n-ная сопоставившаяся подгруппа из объекта RegExp в первом параметре метода replace() (соответствует шаблонам замены $1, $2 и т.д, описанным выше). К примеру, если в качестве шаблона передано регулярное выражение /(\a+)(\b+)/, параметр p1 будет значение сопоставления с подгруппой \a+, а параметр p2 — с подгруппой \b+. |
string | Вся рассматриваемая строка. |
offset | Смещение сопоставившейся подстроки внутри всей рассматриваемой строки (к примеру, если вся строка равна ‘abcd’, а сопоставившаяся подстрока равна ‘bc’, то данный аргумент будет равен 1). |
match | Сопоставившаяся подстрока (она будет соответствовать шаблону замены $&, который описан выше). |
Точное число аргументов зависит от того, был ли первым аргументом объект RegExp и, если да, сколько подгрупп в нем определено. Данный пример установит переменную newString в значение ‘abc — 12345 — #$*%’:
functionreplacer(match, p1, p2, p3, offset, string){
// p1 — не цифры, p2 — цифры, p3 — не буквы и не цифры
return[p1, p2, p3].join(‘ — ‘);
}
var newString =’abc12345#$*%’.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
Примеры
Пример: использование флагов global и ignore с методом replace()
Рассмотрим пример, где регулярное выражения включает флаги для игнорирования регистра и глобального поиска, которые позволяют методу replace() заменить в строке все вхождения слова «яблоки» на слово «апельсины».
var re =/яблоки/gi;
var str =’Яблоки круглые и яблоки сочные.’;
var newstr = str.replace(re,’апельсины’);
console.log(newstr);// апельсины круглые и апельсины сочные.
Пример: передача регулярного выражения в метод replace()
В этом случае в метод replace() будет передаваться регулярное выражения вместе с флагом игнорирования регистра.
// Ночь перед Рождеством, Xmas — сокращение для Christmas
var str =’Twas the night before Xmas…’;
var newstr = str.replace(/xmas/i,’Christmas’);
console.log(newstr);// Twas the night before Christmas…
Пример выведет строку ‘Twas the night before Christmas…’
Пример: смена местами слов в строке
В этом примере скрип поменяет слова в строке местами. В качестве текста замены он применяет шаблоны замены $1 и $2.
var re =/([А-ЯЁа-яё]+)\s([А-ЯЁа-яё]+)/;
var str =’Джон Смит’;
var newstr = str.replace(re,’$2, $1′);
console.log(newstr);// Смит, Джон
Пример выведет строку ‘Смит, Джон’.
Пример: использование функции для изменения сопоставившихся символов
Рассмотрим пример, где все латинские буквы в верхнем регистре будут преобразованы в нижний, а перед буквой вставится дефис. Прежде, чем элемент встраивается на замену, над ним необходимо выполнить дополнительное преобразование.
Своим параметром функция замены принимает сопоставившийся кусок и перед возвратом применяет его для преобразования регистра и соединения с дефисом.
functionstyleHyphenFormat(propertyName){
functionupperToHyphenLower(match){
return’-‘+ match.toLowerCase();
}
return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
}
Вызов styleHyphenFormat(‘borderTop’) вернёт строку ‘border-top’.
Так как мы планируем провести дополнительные преобразования результата сопоставления до того момента, как будет выполнена окончательная подстановка, мы должны применять функцию. Таким образом перед использованием метода toLowerCase() нужно принудительно вычислить сопоставление. Если бы мы попробовали использовать сопоставление без функции, то данный метод не сработал бы.
var newString = propertyName.replace(/[A-Z]/g,’-‘+’$&’.toLowerCase());// не работает
Все потому, что часть ‘$&’.toLowerCase() сначала вычисляется в строковый литерал (результат как и раньше равен ‘$&’), и лишь затем его символы применяются как шаблон.
Пример: замена градусов по Фаренгейту на эквивалент в градусах по Цельсию
В примере, который будет приведен ниже, градусы по Фаренгейту заменяются на градусы по Цельсию. При этом градусы по Фаренгейту должны быть числом, которое заканчивается на букву F. Функция возвращает кол-во градусов по Цельсию, которые заканчиваются на букву С. К примеру, если входное число равно 212F, то функция вернет 100C. Если же число равняется 0F, функция вернет -17.77777777777778C.
Регулярное выражение test сопоставляется с любым числом, которое заканчивается на букву F. Кол-во градусов по Фаренгейту передается в функцию посредством ее второго параметра, p1.Функция переводит градусы по Фаренгейту, переданные в виде строки в функцию code>f2c(), в градусы по Цельсию. Дальше функция f2c() возвращает кол-во градусов по Цельсию. Данная функция работает приблизительно так же, как и флаг s///e в Perl.
functionf2c(x){
functionconvert(str, p1, offset, s){
return((p1 -32)*5/9)+’C’;
}
var s =String(x);
var test =/(\d+(?:\.\d*)?)F\b/g;
return s.replace(test, convert);
}
Пример: использование функции вместе с регулярным выражением для избавления от цикла for
Рассматриваемый нами пример принимает строку шаблона и преобразует её в массив объектов. Входные данные:
Строка, состоящая из символов x, — и _
x-x_
x—x—x—x—
x-xxx-xx-x-
x_x_x___x___x___
Выходные данные:
Массив объектов. Символ ‘x’ означает состояние ‘on’, символ ‘-‘ (дефис) означает состояние ‘off’, а символ ‘_’ (с нижним подчеркиванием) означает продолжительность состояния ‘on’.
[
{ on:true, length:1},
{ on:false, length:1},
{ on:true, length:2}
…
]
Код:
var str =’x-x_’;
var retArr =[];
str.replace(/(x_*)|(-)/g,function(match, p1, p2){
if(p1){ retArr.push({ on:true, length: p1.length });}
if(p2){ retArr.push({ on:false, length:1});}
});console.log(retArr);
Код сгенерирует массив из 3-х объектов в описанном формате без цикла for.
Спецификации
Статус | Спецификация | Комментарии |
Стандарт | ECMAScript 2015 (6th Edition, ECMA-262) Определение ‘String.prototype.replace’ в этой спецификации. | |
ECMAScript 5.1 (ECMA-262) Определение ‘String.prototype.replace’ в этой спецификации. | Стандарт | |
ECMAScript 3-е издание. | Стандарт | Изначальное определение. Реализована в JavaScript 1.2 |
Совместимость с браузерами
Dekstop | Mobile | Server |
Chrome — Full support1 | WebView Android — Full support1 | Node.js — Full support0.10.0 |
Edge — Full support12 | Chrome Android — Full support18 | |
Firefox — Full support1 | Firefox for Android — Full support4 | |
Internet Explorer — Full support4 | Opera Android — Full support10.1 | |
Opera — Full support4 | Safari on iOS — Full support1 | |
Safari — Full support1 | Samsung Internet — Full support1.0 |