От создателя: 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 const search = ‘duck’;
const replaceWith = ‘goose’;
const result = ‘duck duck go’.split(search).join(replaceWith);
result; // => ‘goose goose go’
| 12345 | const 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’.
Вот обобщенная вспомогательная функция, которая употребляет разбиение и объединение:
Модуль произвольного меню для OpenCart 3. Часть 1
JavaScript function 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’
| 1234567 | function 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 const searchRegExp = /duck/g;
const replaceWith = ‘goose’;
const result = ‘duck duck go’.replace(searchRegExp, replaceWith);
result; // => ‘goose goose go’
| 123456 | const 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 const searchRegExp = /duck/gi;const replaceWith = ‘goose’;
const result = ‘DUCK duck go’.replace(searchRegExp, replaceWith);
result; // => ‘goose goose go’
| 12345 | const 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’ и так дальше.
Веб-компоненты проще, чем вы думаете
‘DUCK duck go’.replace(/duck/gi, ‘goose’) подменяет все вхождения подстрок /duck/gi без учета регистра на ‘goose’.
Хотя постоянные выражения подменяют все вхождения строки, на мой взор, этот подход очень тяжкий.
2.1 Постоянное выражение из строки
Внедрение подхода с постоянными выражениями неловко, когда строчка поиска определяется во время выполнения. При разработке постоянного выражения из строки вы должны экранировать знаки — [ ] / { } ( ) * + ? . ^ $ |.
Вот вам наглядный пример задачи:
JavaScript const search = ‘+’;
const searchRegExp = new RegExp(search, ‘g’); // Throws SyntaxErrorconst replaceWith = ‘-‘;
const result = ‘5+2+1’.replace(searchRegExp, replaceWith);
| 12345 | const 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 const search = ‘duck’;const replaceWith = ‘goose’;
const result = ‘duck duck go’.replace(search, replaceWith);
result; // => ‘goose duck go’
| 12345 | const 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 const search = ‘duck’
const replaceWith = ‘goose’;
const result = ‘duck duck go’.replaceAll(search, replaceWith);
result; // => ‘goose goose go’
| 123456 | const 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.
Источник
Вам также может понравиться