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

Метод String.prototype.replace()

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

Метод replace заменяет некоторые или все вхождения подстроки в строку. Он принимает два параметра — строку или регулярное выражение, которое нужно заменить, и собственно заменитель, который может быть строкой или функцией, возвращающей строку. А возвращает возвращает функция replace новую строку — результат замены (исходная строка при этом не меняется).

Строка в качестве шаблона

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


var str = "The quick brown fox jumped over the lazy dog.";
var pattern = 'the';
console.log(a.replace(pattern, "THE")); 
<<< The quick brown fox jumped over THE lazy dog.

В этом варианте будет заменено только второе вхождение «the», так как первое не удовлетворяет шаблону (при поиске учитываеся регистр).

Регулярное выражение в качестве шаблона

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

Рассмотрим предыдущий пример, но с регулярным выражением:


var str = "The quick brown fox jumped over the lazy dog.";
var pattern = /the/i;
console.log(a.replace(pattern, "THE")); 
<<< THE quick brown fox jumped over the lazy dog.

На этот раз заменено первое вхождение. Флаг i в регулярном выражении означает поиск без учета регистра, значит первое вхождение удовлетворяет шаблону.

Глобальный поиск

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


var str = "The quick brown fox jumped over the lazy dog.";
var pattern = /the/gi;
console.log(a.replace(pattern, "THE"));
<<< THE quick brown fox jumped over THE lazy dog.

В примере выше будут заменены все вхождения “the” без учета регистра.

Специальные ссылки в заменителе

В строке-заменителе можно использовать некоторые специальные шаблоны:

  • $& — ссылка на текущую подстроку, удовлетворяющую шаблону
  • $` — ссылка на текст слева от текущей подстроки, удовлетворяющей шаблону
  • $' — ссылка на текст справа от текущей подстроки, удовлетворяющей шаблону
  • $n — ссылка на n-ую удовлетворяющую шаблону группу.

Рассмотрим пример использования таких ссылок:


var value = "My number is 212-555-1234.";
var pattern = new RegExp("(\\d+)", "g");

var result = value.replace(
    pattern,
    "|-- [$&] [$`] [$'] --|"
);

console.log(result);
<<< My number is |-- [212] [My number is ] [-555-1234.] --|-|-- [555] [My number is 212-] [-1234.] --|-|-- [1234] [My number is 212-555-] [.] --|.

В этом примере у нас есть три подстроки, удовлетворяющие шаблону: “212”, “555” и “1234”. Каждое из этих вхождений мы заменили на строку вида: "|-- [<текущая подстрока, удовлетворяющая шаблону>] [<текст слева>] [<текст справа>] --|".

Пример использования шаблона $n:


var value = "My number is 212-555-1234.";
var pattern = new RegExp( "(\\d+)-(\\d+)-(\\d+)", "g" );

var result = value.replace(
    pattern,
    "|-- [$1] [$2] [$3] --|"
);

console.log(result);
<<< My number is |-- [212] [555] [1234] --|.

В этом примере мы изменили шаблон — теперь он имеет три группировки. Такому шаблону удовлтворяет сразу весь номер телефона. Заменяем его на строку вида: «|— [<первая_сопоставившаяся_группа>] [вторая_сопоставившаяся_группа] [третья_сопоставившаяся_группа] —|».

Функция в качестве заменителя

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

Рассмотрим пример. Допустим мы хотим отображать в верхнем регистре названия животных в строке:


var a = "The quick brown fox jumped over the lazy dog.";
var pattern = /fox|dog/ig;

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


console.log(a.replace(pattern, function(match) {
    return match.toUpperCase();
}));
<<< The quick brown FOX jumped over the lazy DOG.

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


var prices = {
    "pr_1": "$1.99",
    "pr_2": "$9.99",
    "pr_3": "$5.00"
};

// Шаблон
var template = '<div>' + 
    '<span id="pr_1"></span><br />' + 
    '<span id="pr_2"></span><br />' + 
    '<span id="pr_3"></span><br />' + 
    '</div>';

// Подставим цены из объекта prices в шаблон
console.log(template.replace(
    /(<span id=")(.*?)(">)(<\/span>)/g,
    function(match,$1, $2, $3, $4) {
        return $1 + $2 + $3 + prices[$2] + $4;
    }
));

Заключение

Мы рассмотрели несколько интересных вариантов использования метода String.prototype.replace(). Как мы убедились, сочетание функции replace с регулярными выражениями — довольно мощный механизм. Еще больше примеров использования String.prototype.replace() можно посмотреть в документации.

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться