Множественная замена строк в JavaScript: избегаем ошибок

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

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

// Строки для замены
const map = { 'foo': 'bar', 'hello': 'world' };
// Исходная строка
const str = 'foo and hello';
// Создаем регулярное выражение
const regex = new RegExp(Object.keys(map).join('|'), 'g');

// Производим замену
const result = str.replace(regex, match => map[match]);
console.log(result); // Вывод: "bar and world"

Объект map выполняет функцию словаря замены, а метод replace() подменяет найденные совпадения.

Танцы с динамическими заменами

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

// Функция для замены
function replaceMultiple(str, map) {
  const regex = new RegExp(Object.keys(map).join('|'), 'g');
  return str.replace(regex, match => map[match]);
}

// Пример использования
const text = 'The quick brown fox jumps over the lazy dog';
const replacements = { 'quick': 'slow', 'brown': 'red', 'lazy': 'active' };
const newText = replaceMultiple(text, replacements);

console.log(newText); // Вывод: "The slow red fox jumps over the active dog"

Не потеряйте свои слова

Для точной замены только целых слов, используйте границы слов \b в регулярном выражении:

// Функция для точной замены
function replaceWholeWords(str, map) {
  const regex = new RegExp(`\\b(${Object.keys(map).join('|')})\\b`, 'g');
  return str.replace(regex, match => map[match]);
}

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

Безопасная замена

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

// Функция для безопасной замены
function safeReplace(str, map) {
  const regex = new RegExp(`\\b(${Object.keys(map).join('|')})\\b`, 'g');
  return str.replace(regex, match => map[match] || match);
}

Использование || match позволяет сохранить исходное слово, если оно отсутствует в объекте map.

Превзойдите сами себя с полифиллом

Совместимость со старыми версиями браузеров можно обеспечить посредством полифилла:

if (!String.prototype.replaceAll) {
  String.prototype.replaceAll = function(str, newStr) {
    return this.replace(new RegExp(str, 'g'), newStr);
  };
}

Этот полифилл добавляет метод replaceAll, при отсутствии которого он будет создан.

Хитрость с заполнителями

При наложении нескольких замен, воспользуйтесь заполнителями:

function sequentialReplace(str, order, map) {
  const placeholders = order.map((_, i) => `{{REPLACE${i}}}`);

  order.forEach((item, i) => {
    str = str.replaceAll(item, placeholders[i]);
  });

  placeholders.forEach((ph, i) => {
    str = str.replaceAll(ph, map[order[i]]);
  });

  return str;
}

Сначала мы заменяем исходные строки на уникальные заполнители, а затем сами заполнители — на новые строки.

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

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

JavaScript использует каждый инструмент для конкретной замены:

toolbox.replace('apple', '🍎'); // 🍏 трансформируется в 🍎
toolbox.replace('banana', '🧬'); // 🍌 становится 🧬
toolbox.replace('cherry', '🎯'); // 🍒 превращается в 🎯

И результат будет следующим:

До: ['apple', 'banana', 'cherry']
После: ['🍎', '🧬', '🎯']

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

Выразительность современного синтаксиса JavaScript делает код понятнее и более элегантным:

1. Стрелочные функции для сжатия кода:

   JS

   Скопировать код

   str.replace(regex, match => map[match]);

   Запустить код

2. Шаблонные строки для облегчения восприятия регулярных выражений:

   JS

   Скопировать код

   new RegExp(`\\b(${Object.keys(map).join('|')})\\b`, 'g');

   Запустить код

3. Деструктуризация и оператор расширения для продвинутого стиля кода:

   JS

   Скопировать код

   const [firstWord, ...restOfWords] = 'The quick brown fox'.split(' ');
   const newSentence = [firstWord.toUpperCase(), ...restOfWords].join(' ');

   Запустить код

Завершение

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

• Будьте внимательны к производительности при работе со строками большого объема.
• Пользуйтесь точными и эффективными регулярными выражениями, чтобы избежать нежелательных эффектов.

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

1. String.prototype.replace() — документация MDN для детального постижения метода replace().
2. Replace multiple strings with multiple other strings — обсуждение на Stack Overflow о замене строк.
3. Регулярные выражения — учебный ресурс по регулярным выражениям.
4. Arrayzing – The JavaScript array cheatsheet — справочник JavaScript функций, в том числе замене строк.
5. regex101: build, test, and debug regex — онлайн-инструмент для создания, тестирования и отладки регулярных выражений.
6. replace-in-file – npm — NPM-пакет для замены строк в файлах.