Замена нескольких символов в строке одним вызовом JavaScript

Быстрый ответ

Чтобы одновременно заменить несколько символов с помощью функции replace() в JavaScript, делаем это при помощи регулярных выражений с классом символов ([]) и глобальным флагом (/g). Вот как это выглядит на практике:

let str = "FooBar123";
let newStr = str.replace(/[o1]/g, '_');
console.log(newStr); // "F__Bar_23"

В данном примере мы заменили все вхождения буквы 'o' и цифры '1' в строке str на символ подчёркивания.

Замена символов один к одному

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

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

let text = "Привет, мир! Сегодня #солнечно или _облачно?";
const replacements = { '#': 'очень', '_': 'частично' };

let newText = text.replace(/#|_/g, (match) => replacements[match]);
console.log(newText); // "Привет, мир! Сегодня очень солнечно или частично облачно?"

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

Подробнее об этом расскажет наш спикер на видео

Поместите логику в функцию replaceAll

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

function replaceAll(str, chars) {
  let re = new RegExp(Object.keys(chars).join('|'), 'g');
  return str.replace(re, (match) => chars[match]);
}

let result = replaceAll("Привет! Утро или #вечер?", {'#': 'вечер'});
console.log(result); // "Привет! Утро или вечер?"

Цепочки вызовов replace — когда их стоит применять?

Прежде чем применять цепочку вызовов метода .replace(), оцените возможные последствия для производительности и читаемости вашего кода. Цепочки подходят для простых или нерегулярных замен, но для сложных случаев лучше поискать другие решения.

Сочетание регулярных выражений и отображения объектов для удобных масштабируемых замен

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

let story = "Черепаха # и заяц _.";
let replacementMap = { '#': 'медленная', '_': 'быстрая' };

let newStory = story.replace(/#|_/g, (matched) => replacementMap[matched]);
console.log(newStory); // "Медленная черепаха и быстрый заяц."

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

Продвинутые замены: Вишенка на торте

Гибкие замены с использованием групп захвата и обратных ссылок

Группы захвата (()) в сочетании с обратными ссылками привносят гибкость в процесс замены по образцу:

let greeting = "Привет, Анна, пока, Анна.";
let renamedGreeting = greeting.replace(/(Привет|пока) Анна/g, '$1 Мария');
console.log(renamedGreeting); // "Привет, Мария, пока, Мария."

Здесь $1 будет соответствовать первой захваченной группе – "Привет" или "пока".

Важность производительности: оптимизация регулярных выражений

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

Регулярные выражения в действии: утверждения look-ahead и look-behind

Для выполнения условных замен применяйте утверждения вида look-ahead ((?=...)) и look-behind ((?<=...)):

let prices = "Стоимость: $30 или €25";
let updatedPrices = prices.replace(/(?<=\$)30/g, '35').replace(/(?<=€)25/g, '30');
console.log(updatedPrices); // "Стоимость: $35 или €30"

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

Визуализация

Представьте, что вы — шеф-повар. У вас есть разные ингредиенты и вы можете заменить их все одновременно. Вот как это выглядит в коде:

let dish = "Хлеб, Сыр, Салат";
dish = dish.replace(/Хлеб|Сыр|Салат/g, (match) => {
  switch (match) {
    case 'Хлеб': return 'Помидор';
    case 'Сыр': return 'Ветчина';
    case 'Салат': return 'Соус';
    default: return match; // на случай возникновения новых блюд 😉
  }
});
// За один присест мы обновляем блюдо: теперь в нём Помидор, Ветчина и Соус!

До и после добавления специй:

До: [🍞, 🧀, 🥬]
После: [🍅, 🍖, 🌶️]

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

Полезные материалы