3 способа заменить все вхождения строки в JavaScript

3 способа заменить все вхождения строки в JavaScript Сайтостроение

3 способа заменить все вхождения строки в JavaScript

От создателя: JavaScript не предоставляет обычной метод заменить все вхождения строк. Драматичность заключается в том, что Java, который послужил источником вдохновения для JavaScript в 1-ые деньки, употребляет способ replaceAll() для строк с 1995 года!

В этом посте описываются 2 обходных пути для подмены всех вхождений строк в JavaScript: разбиение и объединение строк, и replace() в сочетании с постоянным выражением.

В конце, вы прочтете о новеньком предложении String.prototype.replaceAll() (на шаге 3), которое реализует способ replaceAll() для строк.

1. Разбивка и объединение массива

1-ый подход для подмены всех вхождений строки состоит из 2 шагов:

Разбить строчку на части по строке поиска.

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

К примеру, давайте заменим + на — в строке ’1+2+3′. Поначалу ’1+2+3′ делится на +, что дает [‘1’, ‘2’, ‘3’] раздельно. Потом эти части соединяются через — меж ними, что дает ’1-2-3′. Ах так вы сможете употреблять способы split() и join() для заслуги этого в JavaScript:

JavaScript

12345const search = ‘duck’;const replaceWith = ‘goose’; const result = ‘duck duck go’.split(search).join(replaceWith);result; // => ‘goose goose go’

‘duck duck go’.split(‘duck’) разбивает строчку на части: [», ‘ ‘, ‘ go’].

Потом эти части соединяются [», ‘ ‘, ‘ go’].join(‘goose’), с добавлением ‘goose’ меж ними, что дает строчку ‘goose goose go’.

Вот обобщенная вспомогательная функция, которая употребляет разбиение и объединение:

READ
Модуль произвольного меню для OpenCart 3. Часть 1

JavaScript

1234567function replaceAll(string, search, replace) {  return string.split(search).join(replace);} replaceAll(‘abba’, ‘a’, ‘i’);          // => ‘ibbi’replaceAll(‘go go go!’, ‘go’, ‘move’); // => ‘move move move!’replaceAll(‘oops’, ‘z’, ‘y’);          // => ‘oops’

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

2. replace() с глобальным постоянным выражением

String.prototype.replace(regExp, replaceWith) отыскивает вхождения при помощи постоянного выражения regExp, а потом подменяет все совпадения на строчку replaceWith.

Вы должны включить глобальный флаг в постоянном выражении, чтоб способ replace() подменял все вхождения шаблона. Ах так создать:

В постоянных выражениях литералы добавляют g опосля раздела флагов: /search/g

В случае конструктора постоянного выражения используйте аргумент флага: new RegExp(‘search’, ‘g’)

Давайте заменим все вхождения ‘duck’ на ‘goose’:

JavaScript

123456const searchRegExp = /duck/g;const replaceWith = ‘goose’; const result = ‘duck duck go’.replace(searchRegExp, replaceWith); result; // => ‘goose goose go’

Литерал постоянного выражения /duck/g соответствует строке ‘duck’ и имеет включенный глобальный режим.

‘duck duck go’.replace(/duck/g, ‘goose’) подменяет все вхождения подстрок /duck/g на ‘goose’.

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

JavaScript

12345const searchRegExp = /duck/gi;const replaceWith = ‘goose’; const result = ‘DUCK duck go’.replace(searchRegExp, replaceWith); result; // => ‘goose goose go’

Опять поглядим на постоянное выражение: /duck/gi. Постоянное выражение включило поиск без учета регистра i, вместе с глобальным флагом g. /duck/gi соответствует ‘duck’, также ‘DUCK’, ‘Duck’ и так дальше.

READ
Веб-компоненты проще, чем вы думаете

‘DUCK duck go’.replace(/duck/gi, ‘goose’) подменяет все вхождения подстрок /duck/gi без учета регистра на ‘goose’.

Хотя постоянные выражения подменяют все вхождения строки, на мой взор, этот подход очень тяжкий.

2.1 Постоянное выражение из строки

Внедрение подхода с постоянными выражениями неловко, когда строчка поиска определяется во время выполнения. При разработке постоянного выражения из строки вы должны экранировать знаки — [ ] / { } ( ) * + ? . ^ $ |.

Вот вам наглядный пример задачи:

JavaScript

12345const search = ‘+’; const searchRegExp = new RegExp(search, ‘g’); // Throws SyntaxErrorconst replaceWith = ‘-‘; const result = ‘5+2+1’.replace(searchRegExp, replaceWith);

Приведенный выше фрагмент кода пробует конвертировать строчку поиска ‘+’ в постоянное выражение. Но ‘+’ является недопустимым постоянным выражением, потому выдается SyntaxError: Invalid regular expression: /+/.

Внедрение знака ‘+’ решает делему. Для обычной подмены всех вхождений задачка, сплетенная с постоянными выражениями и экранированием строки поиска, является очень сложной.

2.2 replace() строчку

Если 1-ый аргумент replace(search, replaceWith) является строчкой, то способ подменяет лишь 1-ое вхождение в search.

JavaScript

12345const search = ‘duck’;const replaceWith = ‘goose’; const result = ‘duck duck go’.replace(search, replaceWith); result; // => ‘goose duck go’

‘duck duck go’.replace(‘duck’, ‘goose’) подменяет лишь 1-ое вхождение ‘duck’ на ‘goose’.

3. Способ replaceAll()

В конце концов, новое предложение String.prototype.replaceAll () (на шаге 3) переносит replaceAll() способ на строки. Строковый способ replaceAll(search, replaceWith) подменяет все вхождения строки search на replaceWith без каких-то обходных способов.

Давайте заменим все вхождения ‘duck’ на ‘goose’:

JavaScript

123456const search = ‘duck’const replaceWith = ‘goose’; const result = ‘duck duck go’.replaceAll(search, replaceWith); result; // => ‘goose goose go’

‘duck duck go’.replaceAll(‘duck’, ‘goose’) подменяет все вхождения строки ‘duck’ на ‘goose’. Это обычное решение.

3.1 Разница меж replaceAll() и replace()

Строковые способы replaceAll(search, replaceWith) и replace(search, replaceWith) ведут себя идиентично, кроме 2-ух моментов:

Если аргумент search является строчкой, replaceAll() подменяет все вхождения из search на replaceWith, в то время как replace() лишь 1-ое вхождение

Если аргумент search является неглобальным постоянным выражением, replaceAll() генерирует исключение TypeError.

4. Заключение

Подмена всех вхождений строк обязана быть обычной задачей. Но в JavaScript издавна не было способа создать это. Один из подходов заключается в том, чтоб разбить строчку на кусочки при помощи строки поиска, соединить их назад строчку, размещая строчку подмены меж кусочками: string.split(search).join(replaceWith). Этот подход работает, но он является хаком.

Иной подход заключается в внедрение String.prototype.replace() с постоянным выражением с включенным глобальным поиском: string.replace(/SEARCH/g, replaceWith).

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

В конце концов, способ String.prototype.replaceAll() может просто заменить все вхождения строки впрямую: string.replaceAll(search, replaceWith). Это предложение на 3-ем шаге, но, надеюсь, оно скоро покажется в новеньком эталоне JavaScript.

Я рекомендую употреблять replaceAll() для подмены строк. Для вас пригодится полифилл, чтоб употреблять способ.

Создатель: Dmitri Pavlutin

Редакция: Команда webformyself.

Источник

Оценить статью
Блог о самом интересном.