Метод 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

Совместимость с браузерами

DekstopMobileServer
Chrome — Full support1WebView Android — Full support1Node.js — Full support0.10.0
Edge — Full support12Chrome Android — Full support18 
Firefox — Full support1Firefox for Android — Full support4 
Internet Explorer — Full support4Opera Android — Full support10.1 
Opera — Full support4Safari on iOS — Full support1 
Safari — Full support1Samsung Internet — Full support1.0

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *