Javascript: string replace() method

regexp.exec(str)

The method returns a match for in the string . Unlike previous methods, it’s called on a regexp, not on a string.

It behaves differently depending on whether the regexp has flag .

If there’s no , then returns the first match exactly as . This behavior doesn’t bring anything new.

But if there’s flag , then:

• A call to returns the first match and saves the position immediately after it in the property .
• The next such call starts the search from position , returns the next match and saves the position after it in .
• …And so on.
• If there are no matches, returns and resets to .

So, repeated calls return all matches one after another, using property to keep track of the current search position.

In the past, before the method was added to JavaScript, calls of were used in the loop to get all matches with groups:

This works now as well, although for newer browsers is usually more convenient.

We can use to search from a given position by manually setting .

For instance:

If the regexp has flag , then the search will be performed exactly at the position , not any further.

Let’s replace flag with in the example above. There will be no matches, as there’s no word at position :

That’s convenient for situations when we need to “read” something from the string by a regexp at the exact position, not somewhere further.

regexp.test(str)

The method looks for a match and returns whether it exists.

For instance:

An example with the negative answer:

If the regexp has flag , then looks from property and updates this property, just like .

So we can use it to search from a given position:

Same global regexp tested repeatedly on different sources may fail

If we apply the same global regexp to different inputs, it may lead to wrong result, because call advances property, so the search in another string may start from non-zero position.

For instance, here we call twice on the same text, and the second time fails:

That’s exactly because is non-zero in the second test.

To work around that, we can set before each search. Or instead of calling methods on regexp, use string methods , they don’t use .

4. Key takeaway

The primitive approach to replace all occurrences is to split the string into chunks by the search string, the join back the string placing the replace string between chunks: . This approach works, but it’s hacky.

Another approach is to use with a regular expression having the global flag enabled.

Unfortunately, you cannot easily generate regular expressions from a string at runtime, because the special characters of regular expressions have to be escaped. And dealing with a regular expression for a simple replacement of strings is overwhelming.

Finally, the new string method replaces all string occurrences. The method is a proposal at stage 4, and hopefully, it will land in a new JavaScript standard pretty soon.

My recommendation is to use to replace strings.

Replacing String Content

The method replaces a specified value with another
value in a string:

Example

let text = «Please visit Microsoft!»;
let newText = text.replace(«Microsoft», «W3Schools»);

The method does not change the string it is called on. It returns a new string.

By default, the method replaces only the first match:

Example

let text = «Please visit Microsoft and Microsoft!»;
let newText = text.replace(«Microsoft», «W3Schools»);

By default, the method is case sensitive. Writing MICROSOFT (with
upper-case) will not work:

Example

let text = «Please visit Microsoft!»;
let newText = text.replace(«MICROSOFT», «W3Schools»);

To replace case insensitive, use a regular expression with an flag (insensitive):

Example

let text = «Please visit Microsoft!»;
let newText = text.replace(/MICROSOFT/i, «W3Schools»);

Note that regular expressions are written without quotes.

To replace all matches, use a regular expression with a flag (global match):

Example

let text = «Please visit Microsoft and Microsoft!»;
let newText = text.replace(/Microsoft/g, «W3Schools»);

You will learn a lot more about regular expressions in the chapter JavaScript Regular
Expressions.

Примитивные строковые типы и String Objects

Для начала мы проясним различие между двумя типами строк. JavaScript различает примитивную строку (неизменяемый тип) и объект String.

Чтобы понять различия между ними, инициализируем примитивную строку и объект-строку.

// Инициализируемпримитивнуюстроку
const stringPrimitive = "A new string.";

// ИнициализируемString Objects
const stringObject = newString("A new string.");  

Можно использовать оператор typeof, чтобы определить тип значения. В первом примере мы присвоили переменной строковое значение.

typeof stringPrimitive;

Вывод

string

Во втором примере мы использовали конструктор new String(), чтобы создать объект-строку и присвоить его переменной.

typeof stringObject;

Вывод

object

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

Методы и свойства String Objects доступны для всех строк. Но JavaScript осуществляет конвертацию строки в объект и обратно каждый раз, когда вызывается метод или свойство.

Window

Window Location
hash
host
hostname
href
origin
pathname
port
protocol
search
assign()
reload()
replace()

Window Navigator
appCodeName
appName
appVersion
cookieEnabled
geolocation
language
onLine
platform
product
userAgent
javaEnabled()
taintEnabled()

Window Screen
availHeight
availWidth
colorDepth
height
pixelDepth
width

Window Methods
closed
console
defaultStatus
document
frameElement
frames
history
innerHeight
innerWidth
length
localStorage
location
name
navigator
opener
outerHeight
outerWidth
pageXOffset
pageYOffset
parent
screen
screenLeft
screenTop
screenX
screenY
sessionStorage
self
status
top
alert()
atob()
blur()
btoa()
clearInterval()
clearTimeout()
close()
confirm()
focus()
getComputedStyle()
matchMedia()
moveBy()
moveTo()
open()
print()
prompt()
resizeBy()
resizeTo()
scrollBy()
scrollTo()
setInterval()
setTimeout()
stop()

JS Tutorial

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS LetJS ConstJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS String SearchJS String TemplatesJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS Array ConstJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop For InJS Loop For OfJS Loop WhileJS BreakJS IterablesJS SetsJS MapsJS TypeofJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS Arrow FunctionJS ClassesJS JSONJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved Words

Примеры

Пример: использование метода

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

function splitString(stringToSplit, separator) {
  var arrayOfStrings = stringToSplit.split(separator);

  console.log('Оригинальная строка: "' + stringToSplit + '"');
  console.log('Разделитель: "' + separator + '"');
  console.log('Массив содержит ' + arrayOfStrings.length + ' элементов: ' + arrayOfStrings.join(' / '));
}

// Строчка из «Бури» Шекспира. Перевод Миxаила Донского.
var tempestString = 'И как хорош тот новый мир, где есть такие люди!';
var monthString = 'Янв,Фев,Мар,Апр,Май,Июн,Июл,Авг,Сен,Окт,Ноя,Дек';

var space = ' ';
var comma = ',';

splitString(tempestString, space);
splitString(tempestString);
splitString(monthString, comma);

Пример сгенерирует следующий вывод:

Оригинальная строка: "И как хорош тот новый мир, где есть такие люди!"
Разделитель: " "
Массив содержит 10 элементов: И / как / хорош / тот / новый / мир, / где / есть / такие / люди!

Оригинальная строка: "И как хорош тот новый мир, где есть такие люди!"
Разделитель: "undefined"
Массив содержит 1 элементов: И как хорош тот новый мир, где есть такие люди!

Оригинальная строка: "Янв,Фев,Мар,Апр,Май,Июн,Июл,Авг,Сен,Окт,Ноя,Дек"
Разделитель: ","
Массив содержит 12 элементов: Янв / Фев / Мар / Апр / Май / Июн / Июл / Авг / Сен / Окт / Ноя / Дек

Пример: удаление пробелов из строки

В следующем примере метод ищет 0 или более пробелов, за которыми следует точка с запятой, за которой снова следуют 0 или более пробелов, и, если этот шаблон найден, удаляет пробелы из строки. Переменная является массивом, возвращённым в результате работы метода .

var names = 'Гарри Трамп ;Фрэд Барни; Хелен Ригби ; Билл Абель ;Крис Ханд ';

console.log(names);

var re = /\s*;\s*/;
var nameList = names.split(re);

console.log(nameList);

Пример напечатает две строки; на первой строке напечатана оригинальная строчка, а на второй — получившийся массив.

Гарри Трамп ;Фред Барни; Хелен Ригби ; Билл Абель ;Крис Ханд
Гарри Трамп,Фред Барни,Хелен Ригби,Билл Абель,Крис Ханд

Пример: возврат ограниченного числа подстрок

В следующем примере метод ищет 0 или более пробелов в строке и возвращает первые три найденных подстроки.

var myString = 'Привет, мир. Как дела?';
var splits = myString.split(' ', 3);

console.log(splits);

Вывод скрипта будет следующим:

Привет,мир.,Как

Пример: захват подгрупп

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

var myString = 'Привет 1 мир. Предложение номер 2.';
var splits = myString.split(/(\d)/);

console.log(splits);

Вывод скрипта будет следующим:

Привет ,1, мир. Предложение номер ,2,.

Пример: обращение строки при помощи метода

var str = 'фывапролд';
var strReverse = str.split('').reverse().join(''); // 'длорпавыф'
// split() возвращает массив, к которому применяются методы reverse() и join()

Добавление/удаление элементов

Мы уже знаем методы, которые добавляют и удаляют элементы из начала или конца:

• – добавляет элементы в конец,
• – извлекает элемент из конца,
• – извлекает элемент из начала,
• – добавляет элементы в начало.

Есть и другие.

Как удалить элемент из массива?

Так как массивы – это объекты, то можно попробовать :

Вроде бы, элемент и был удалён, но при проверке оказывается, что массив всё ещё имеет 3 элемента .

Это нормально, потому что всё, что делает – это удаляет значение с данным ключом . Это нормально для объектов, но для массивов мы обычно хотим, чтобы оставшиеся элементы сдвинулись и заняли освободившееся место. Мы ждём, что массив станет короче.

Поэтому для этого нужно использовать специальные методы.

Метод arr.splice(str) – это универсальный «швейцарский нож» для работы с массивами. Умеет всё: добавлять, удалять и заменять элементы.

Его синтаксис:

Он начинает с позиции , удаляет элементов и вставляет на их место. Возвращает массив из удалённых элементов.

Этот метод проще всего понять, рассмотрев примеры.

Начнём с удаления:

Легко, правда? Начиная с позиции , он убрал элемент.

В следующем примере мы удалим 3 элемента и заменим их двумя другими.

Здесь видно, что возвращает массив из удалённых элементов:

Метод также может вставлять элементы без удаления, для этого достаточно установить в :

Отрицательные индексы разрешены

В этом и в других методах массива допускается использование отрицательного индекса. Он позволяет начать отсчёт элементов с конца, как тут:

Метод arr.slice намного проще, чем похожий на него .

Его синтаксис:

Он возвращает новый массив, в который копирует элементы, начиная с индекса и до (не включая ). Оба индекса и могут быть отрицательными. В таком случае отсчёт будет осуществляться с конца массива.

Это похоже на строковый метод , но вместо подстрок возвращает подмассивы.

Например:

Можно вызвать и вообще без аргументов: создаёт копию массива . Это часто используют, чтобы создать копию массива для дальнейших преобразований, которые не должны менять исходный массив.

Метод arr.concat создаёт новый массив, в который копирует данные из других массивов и дополнительные значения.

Его синтаксис:

Он принимает любое количество аргументов, которые могут быть как массивами, так и простыми значениями.

В результате мы получаем новый массив, включающий в себя элементы из , а также , и так далее…

Если аргумент – массив, то все его элементы копируются. Иначе скопируется сам аргумент.

Например:

Обычно он просто копирует элементы из массивов. Другие объекты, даже если они выглядят как массивы, добавляются как есть:

…Но если объект имеет специальное свойство , то он обрабатывается как массив: вместо него добавляются его числовые свойства.

Для корректной обработки в объекте должны быть числовые свойства и :

Строковые методы, поиск и замена

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

Все методы, кроме replace, можно вызывать как с объектами типа regexp в аргументах, так и со строками, которые автоматом преобразуются в объекты RegExp.

Так что вызовы эквивалентны:

var i = str.search(/\s/)
var i = str.search("\\s")

При использовании кавычек нужно дублировать \ и нет возможности указать флаги. Если регулярное выражение уже задано строкой, то бывает удобна и полная форма

var regText = "\\s"
var i = str.search(new RegExp(regText, "g"))

Возвращает индекс регулярного выражения в строке, или -1.

Если Вы хотите знать, подходит ли строка под регулярное выражение, используйте метод (аналогично RegExp-методы ). Чтобы получить больше информации, используйте более медленный метод (аналогичный методу ).

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

function testinput(re, str){
   if (str.search(re) != -1)
      midstring = " contains ";
   else
      midstring = " does not contain ";
   document.write (str + midstring + re.source);
}

Если в regexp нет флага , то возвращает тот же результат, что .

Если в regexp есть флаг , то возвращает массив со всеми совпадениями.

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

Если Вы хотите получить первый результат — попробуйте r.

В следующем примере используется, чтобы найти «Chapter», за которой следует 1 или более цифр, а затем цифры, разделенные точкой. В регулярном выражении есть флаг , так что регистр будет игнорироваться.

str = "For more information, see Chapter 3.4.5.1";
re = /chapter (\d+(\.\d)*)/i;
found = str.match(re);
alert(found);

Скрипт выдаст массив из совпадений:

• Chapter 3.4.5.1 — полностью совпавшая строка
• 3.4.5.1 — первая скобка
• .1 — внутренняя скобка

Следующий пример демонстрирует использование флагов глобального и регистронезависимого поиска с . Будут найдены все буквы от А до Е и от а до е, каждая — в отдельном элементе массива.

var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var regexp = //gi;
var matches = str.match(regexp);
document.write(matches);

// matches = 

Метод replace может заменять вхождения регулярного выражения не только на строку, но и на результат выполнения функции. Его полный синтаксис — такой:

var newString = str.replace(regexp/substr, newSubStr/function)

Объект RegExp. Его вхождения будут заменены на значение, которое вернет параметр номер 2

Строка, которая будет заменена на .

Строка, которая заменяет подстроку из аргумента номер 1.

Функция, которая может быть вызвана для генерации новой подстроки (чтобы подставить ее вместо подстроки, полученной из аргумента 1).

Метод не меняет строку, на которой вызван, а просто возвращает новую, измененную строку.

Чтобы осуществить глобальную замену, включите в регулярное выражение флаг .

Если первый аргумент — строка, то она не преобразуется в регулярное выражение, так что, например,

var ab = "a b".replace("\\s","..") // = "a b"

Вызов replace оставил строку без изменения, т.к искал не регулярное выражение , а строку «\s».

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

Pattern	Inserts
	Вставляет «$».
	Вставляет найденную подстроку.
	Вставляет часть строки, которая предшествует найденному вхождению.
	Вставляет часть строки, которая идет после найденного вхождения.
or	Где или — десятичные цифры, вставляет подстроку вхождения, запомненную -й вложенной скобкой, если первый аргумент — объект RegExp.

Если Вы указываете вторым параметром функцию, то она выполняется при каждом совпадении.

В функции можно динамически генерировать и возвращать строку подстановки.

Первый параметр функции — найденная подстрока. Если первым аргументом является объект , то следующие параметров содержат совпадения из вложенных скобок. Последние два параметра — позиция в строке, на которой произошло совпадение и сама строка.

Например, следующий вызов возвратит XXzzzz — XX , zzzz.

function replacer(str, p1, p2, offset, s)
{
return str + " - " + p1 + " , " + p2;
}
var newString = "XXzzzz".replace(/(X*)(z*)/, replacer)

Как видите, тут две скобки в регулярном выражении, и потому в функции два параметра , .
Если бы были три скобки, то в функцию пришлось бы добавить параметр .

Следующая функция заменяет слова типа на :

function styleHyphenFormat(propertyName)
{
  function upperToHyphenLower(match)
  {
    return '-' + match.toLowerCase();
  }
  return propertyName.replace(//, upperToHyphenLower);
}

Описание

Этот метод не изменяет объект , на котором он вызывается. Он просто возвращает новую строку.

Для выполнения глобального поиска и замены либо включите флаг в регулярное выражение, либо, если первый параметр является строкой, включите флаг в параметр .

строка замены может включать следующие специальные шаблоны замены:

Шаблон	Замена
	Вставляет символ доллара «$».
	Вставляет сопоставившуюся подстроку.
	Вставляет часть строки, предшествующую сопоставившейся подстроке.
	Вставляет часть строки, следующую за сопоставившейся подстрокой.
или	Символы или являются десятичными цифрами, вставляет n-ную сопоставившуюся подгруппу из объекта в первом параметре.

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

Результат вызова функции (её возвращаемое значение) будет использоваться в качестве строки замены (обратите внимание: описанные выше специальные шаблоны замены в этом случае не применяются). Обратите внимание, что функция будет вызвана несколько раз для каждого полного сопоставления, если регулярное выражение в первом параметре является глобальным

Функция принимает следующие аргументы:

Возможное имя	Получаемое значение
	Сопоставившаяся подстрока (соответствует шаблону замены , описанному выше).
	n-ная сопоставившаяся подгруппа из объекта в первом параметре метода (соответствует шаблонам замены , и так далее, описанным выше). Например, если в качестве шаблона передано регулярное выражение , параметр будет значение сопоставления с подгруппой , а параметр  — с подгруппой .
	Смещение сопоставившейся подстроки внутри всей рассматриваемой строки (например, если вся строка равна , а сопоставившаяся подстрока равна , то этот аргумент будет равен 1).
	Вся рассматриваемая строка.

Точное число аргументов будет зависеть от того, был ли первым аргументом объект и, если был, сколько подгрупп в нём определено.

Следующий пример установит переменную в значение :

Модификаторы (флаги)

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

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

Модификатор	Что оно делает
	Ищет глобальное совпадение.
	Делает совпадение без учета регистра.
	Изменяет поведение и для сопоставления с границей новой строки (то есть началом или концом каждой строки в многострочной строке) вместо границы строки.
	Оценивает выражение только один раз.
	Изменяет поведение (точка) для соответствия всем символам, включая символы новой строки..
	Позволяет вам использовать пробел и комментарии в регулярном выражении для ясности.

В следующем примере показано, как использовать модификаторы и в регулярном выражении для выполнения глобального поиска без учета регистра с помощью метода JavaScript.

Аналогично, в следующем примере показано, как сопоставлять начало каждой строки в многострочной строке, используя модификатор anchor и с методом JavaScript .

Использование методов и свойств строк

Для манипулирования строками в Javascript как и во многих других языках программирования предусмотрена возможность использования методов(объектных функций) , , , …   и свойств , , … . Вызов методов и свойств осуществляется через оператор (точка). Вызов объектных функций может быть осуществлен не однократно, образуя тем самым цепочки методов.

var str = «Text»;
str.italics(); //Преобразование строки в курсив (<i>Text</i>)
//Цепочка методов (каждый метод вызывается из значения, которое возвратил предыдущий метод)
str.toUpperCase().big().bold() // Результат — <b><big>TEXT</big></b>

1 2 3 4

varstr=»Text»; str.italics();//Преобразование строки в курсив (<i>Text</i>) //Цепочка методов (каждый метод вызывается из значения, которое возвратил предыдущий метод) str.toUpperCase().big().bold()// Результат — <b><big>TEXT</big></b>

Применение методов и свойств к простым строковым литералам невозможно, поэтому если интерпретатор видит вызов метода из строки, то он автоматически преобразует ее в объект и делает вызов метода или свойства уже из строки — объекта.

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

var str = » Random text written «; //удалим пробелы с начала и конца строки
str.trim(); //Результат — «Random text written»
str; //Само значение строки не изменилось — » Random text written »

1 2 3

varstr=» Random text written «;//удалим пробелы с начала и конца строки str.trim();//Результат — «Random text written» str;//Само значение строки не изменилось — » Random text written «

Why

I’ve been working on removing jQuery dependency from multiple projects including lightGallery lately. Most of the projects use only 15% to 20% or less than 30% of the jquery methods
And in most of the cases, I didn’t want to support all the edge cases or legacy browsers. The hardest part was finding the jQuery methods in the existing project and writing the alternative vanilla js methods without making much changes in the codebase. So I wrote this library which automatically finds jquery methods in any particular JavaScript file and generates readable, chainable vanilla js alternatives. This can also be useful if you want to generate your own utility methods similar to jQuery.

Поиск в строке

• Чтобы определить вхождение слова или символа в строку, используйте функцию «indexOf». Она возвращает позицию найденной подстроки или «-1», если ничего не найдено.

  let s = 'Hello world!';
  
  if (s.indexOf('world') != -1) {
      console.log('world Is found');
  } else {
      console.log('world Isn\'t found');
  }
  

• Возможен поиск по регулярному выражению. Попробуем найти в строке число, хотя точно не знаем, есть оно или нет.

  let s = 'Happy new 2020 year! Next year — 2021.';
  let Regex = /(\d+)/g;
  let year;
  
  if (year = s.match(Regex)) { 
      console.log(year); // 2020
      console.log(year); // 2021
  } else { 
      console.log('not found');
  }
  

  Переменная «Regex» содержит регулярное выражение, со специальным правилом для поиска. В данном примере конструкция «(\d+)» обозначает последовательность цифр. В качестве результата возвращается массив со всеми найденными элементами. Если убрать директиву «g», то в результат попадет только первый найденный элемент.

  Регулярные выражения в js — это отдельная тема. Частично можете ознакомиться с ними из статьи по валидации полей.

Basic Concepts

The generated vanilla JS methods are chainable and can be applied to all matching elements like jQuery.

Note: The below code is just to demonstrate the basics concepts and not covered all scenarios.

export class Utils {
  constructor(selector) {
    this.elements = Utils.getSelector(selector);
    this.element = this.get();
    return this;
  }

  static getSelector(selector, context = document) {
    if (typeof selector !== 'string') {
      return selector;
    }
    if (isId(selector)) {
      return document.getElementById(selector.substring(1))
    }
    return context.querySelectorAll(selector);
  }

  each(func) {
    if (!this.elements) {
      return this;
    }
    if (this.elements.length !== undefined) {
      .forEach.call(this.elements, func);
    } else {
      func(this.element, );
    }
    return this;
  }

  siblings() {
    if (!this.element) {
      return this;
    }
    const elements = .filter.call(
      this.element.parentNode.children,
      (child) => child !== this.element
    );
    return new Utils(elements);
  }

  get(index) {
    if (index !== undefined) {
      return this.elementsindex;
    }
    return this.elements;
  }

  addClass(classNames = '') {
    this.each((el) => {
      // IE doesn't support multiple arguments
      classNames.split(' ').forEach((className) => {
        el.classList.add(className);
      });
    });
    return this;
  }
}

export default function $utils(selector) {
  return new Utils(selector);
}

Usage

<ul>
  <li class="jquery">jQuery</li>
  <li class="react">React</li>
  <li class="vue">Vue.js</li>
  <li class="angular">Angular</li>
  <li class="lit">Lit</li>
</ul>

.highlight {
  background-color red;
  color #fff;
}

$utils(".vue").siblings().addClass("highlight");

You can see that the method is depended on the method, so if you generate addClass method using the output file will contain and methods.

Similarly, all the examples you see below, will add it’s dependencies when you generate it using

Строка в качестве второго параметра

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

Шаблон	Замена
	Вставляет символ доллара «$».
	Вставляет всё найденное совпадение.
	Вставляет часть строки до совпадения.
	Вставляет часть строки после совпадения.
	n-ная группа захвата, где n – значение от О до 9. Например, $1 – это первая группа захвата, $2 – вторая, и т. д. Если захвата нет, ис­пользуется пустая строка.
	nn-ная группа захвата, где nn – значение от О1 до 91. Например, $01 – это первая группа захвата, $02 – вторая, и т. д. Если захвата нет, ис­пользуется пустая строка.

Пример использования скобок и $1, $2:

Выполнить код »
Скрыть результаты

Пример, с использованием подстроки, совпадающей со всем шаблоном $&:

Выполнить код »
Скрыть результаты

Замена содержимого строки

Метод заменяет указанное значение с другим значением в строке:

Пример

str = «Пожалуйста, посетите Microsoft!»;
var n = str.replace(«Microsoft», «Schoolsw3»);

Метод не изменяет строку она вызвана. Он возвращает новую строку.

По умолчанию метод заменяет только первое совпадение:

Пример

str = «Пожалуйста, посетите Microsoft и Microsoft!»;
var n = str.replace(«Microsoft», «Schoolsw3»);

По умолчанию метод чувствителен к регистру.
Записать MICROSOFT (в верхнем регистре) не получится:

Пример

str = «Пожалуйста, посетите Microsoft!»;
var n = str.replace(«MICROSOFT», «Schoolsw3»);

Чтобы заменить нечувствительность к регистру, используйте регулярное выражение
с флагом (нечувствительность):

Пример

str = «Пожалуйста, посетите Microsoft!»;
var n = str.replace(/MICROSOFT/i, «Schoolsw3»);

Обратите внимание, что регулярные выражения пишутся без кавычек. Чтобы заменить все совпадения, используйте регулярное выражение
с флагом (глобальное совпадение):

Чтобы заменить все совпадения, используйте регулярное выражение
с флагом (глобальное совпадение):

Пример

str = «Пожалуйста, посетите Microsoft и Microsoft!»;
var n = str.replace(/Microsoft/g, «Schoolsw3»);

Вы узнаете намного больше о регулярных выражениях в главе Регулярные выражения JavaScript.

Доступ к свойствам

ECMAScript 5 (2009) разрешает доступ к свойствам для строк:

Пример

var str = «ПРИВЕТ МИР»;
str;                   // возвращается П

Доступ к свойствам может быть немного непредсказуемым:

• Не работает в Internet Explorer 7 или более ранней версии.
• Это делает строки похожими на массивы (но это не так)
• Если символ не найден, [] возвращает значение undefined, а charAt () возвращает пустую строку.
• Он доступен только для чтения. str = «A» не выдает ошибки (но не работает!)

Пример

var str = «ПРИВЕТ МИР»;
str = «A»;            
// Не дает никакой ошибки, но и не работает
str;                   // возвращается П

Если вы хотите работать со строкой как с массивом, вы можете преобразовать ее в массив.

Функции шаблонизации

Можно использовать свою функцию шаблонизации для строк.

Название этой функции ставится перед первой обратной кавычкой:

Эта функция будет автоматически вызвана и получит в качестве аргументов строку, разбитую по вхождениям параметров и сами эти параметры.

Например:

В примере выше видно, что строка разбивается по очереди на части: «кусок строки» – «параметр» – «кусок строки» – «параметр».

• Участки строки идут в первый аргумент-массив .
• У этого массива есть дополнительное свойство . В нём находятся строки в точности как в оригинале. Это влияет на спец-символы, например в символ – это перевод строки, а в – это именно два символа .
• Дальнейший список аргументов функции шаблонизации – это значения выражений в , в данном случае их три.

Зачем ?

В отличие от , в содержатся участки строки в «изначально введённом» виде.

То есть, если в строке находится или или другое особое сочетание символов, то оно таким и останется.

Это нужно в тех случаях, когда функция шаблонизации хочет произвести обработку полностью самостоятельно (свои спец. символы?). Или же когда обработка спец. символов не нужна – например, строка содержит «обычный текст», набранный непрограммистом без учёта спец. символов.

Как видно, функция имеет доступ ко всему: к выражениям, к участкам текста и даже, через – к оригинально введённому тексту без учёта стандартных спец. символов.

Функция шаблонизации может как-то преобразовать строку и вернуть новый результат.

В простейшем случае можно просто «склеить» полученные фрагменты в строку:

Функция в примере выше делает то же самое, что обычные обратные кавычки. Но, конечно, можно пойти намного дальше. Например, генерировать из HTML-строки DOM-узлы (функции шаблонизации не обязательно возвращать именно строку).

Или можно реализовать интернационализацию. В примере ниже функция осуществляет перевод строки.

Она подбирает по строке вида шаблон перевода (где – место для вставки параметра) и возвращает переведённый результат со вставленным именем :

Итоговое использование выглядит довольно красиво, не правда ли?

Разумеется, эту функцию можно улучшить и расширить. Функция шаблонизации – это своего рода «стандартный синтаксический сахар» для упрощения форматирования и парсинга строк.

2. replace() with a global regular expression

The string method searches and replaces the occurrences of the regular expression with string.

To make the method replace all occurrences of the pattern you have to enable the global flag on the regular expression:

1. Append after at the end of regular expression literal:
2. Or when using a regular expression constructor, add to the second argument:

Let’s replace all occurrences of with :

javascript

The regular expression literal (note the global flag) matches the space .

replaces all matches of with , which results in .

You can easily make case insensitive replaces by adding flag to the regular expression:

javascript

The regular expression performs a global case-insensitive search (note and flags). matches , as well as .

Invoking replaces all matches of substrings with .

2.1 Regular expression from a string

When the regular expression is created from a string, you have to escape the characters because they have special meaning within the regular expression.

Because of that, the special characters are a problem when you’d like to make replace all operation. Here’s an example:

javascript

The above snippet tries to transform the search string into a regular expression. But is an invalid regular expression, thus is thrown.

Escaping the character solves the problem.

Nevertheless, does it worth escaping the search string using a function like to be used as a regular expression? Most likely not.

2.2 replace() with a string

If the first argument of is a string, then the method replaces only the first occurrence of :

javascript

replaces only the first appearance of a space.