Замена всех вхождений подстроки в строке - довольно распространенная задача при работе со строковыми значениями в JavaScript.

Чтобы визуализировать проблему, решим одну простую задачу. Для начала создадим переменную testString:

const testString = 'abc foo def foo xyz foo';

Наша цель: заменить все подстроки foo на bar.

Многие начинающие разработчики наивно попытаются воспользоваться функцией replace():

const result = testString.replace('foo', 'bar')

Однако, при этом произойдет замена только первого экземпляра подстроки foo, то есть получится такой результат:

abc bar def foo xyz foo

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

Если у Вас есть опыть работы с языком Java (не JavaScript), Вам покажется логичным использовать что-то наподобие replaceAll(). К сожалению, в JavaScript нет такой функции.

Тем не менее, существуют два простых метода, позволяющих заменить все экземпляры подстроки с помощью JavaScript.

Итак, первый из них - сочетание функций split() и join():

const result = testString.split('foo').join('bar'); 

Этот метод отлично работает. Результат соответствует ожидаемому:

abc bar def bar xyz bar

Разберем, что мы сделали: мы преобразовали строку в массив, удалив подстроку foo, которая выступила в качестве разделителя, а затем объединили массив в строку, создав новые разделители bar.

Второй метод возвращает нас к функции… replace(), но в этом случае мы будем использовать регулярное выражение , добавим / с каждой стороны искомой подстроки и, что важно, модификатор g, который указывает на глобальное совпадение (то есть будут заменены все найденные подстроки foo в строке):

const result = testString.replace(/foo/g, 'bar');

И этот метод тоже отлично работает.

Следует заметить, что метод с использованием replace будет работать значительно быстрее метода split-join.

Спасибо за внимание.

Перевод статьи Arek Jaworski “Replace all occurrences of a string in JavaScript”.