Множественная замена строк в 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;
}
Сначала мы заменяем исходные строки на уникальные заполнители, а затем сами заполнители — на новые строки.
Визуализация
Представьте себе, что у вас есть набор инструментов для изменения строк:
Исходные строки | Инструменты замены |
---|---|
'apple' | 🍏 → 🍎 |
'banana' | 🍌 → 🧬 |
'cherry' | 🍒 → 🎯 |
JavaScript использует каждый инструмент для конкретной замены:
toolbox.replace('apple', '🍎'); // 🍏 трансформируется в 🍎
toolbox.replace('banana', '🧬'); // 🍌 становится 🧬
toolbox.replace('cherry', '🎯'); // 🍒 превращается в 🎯
И результат будет следующим:
До: ['apple', 'banana', 'cherry']
После: ['🍎', '🧬', '🎯']
Использование современного синтаксиса
Выразительность современного синтаксиса JavaScript делает код понятнее и более элегантным:
Стрелочные функции для сжатия кода:
JSСкопировать кодstr.replace(regex, match => map[match]);
Шаблонные строки для облегчения восприятия регулярных выражений:
JSСкопировать кодnew RegExp(`\\b(${Object.keys(map).join('|')})\\b`, 'g');
Деструктуризация и оператор расширения для продвинутого стиля кода:
JSСкопировать кодconst [firstWord, ...restOfWords] = 'The quick brown fox'.split(' '); const newSentence = [firstWord.toUpperCase(), ...restOfWords].join(' ');
Завершение
Производительность и читаемость — ключевые аспекты:
- Будьте внимательны к производительности при работе со строками большого объема.
- Пользуйтесь точными и эффективными регулярными выражениями, чтобы избежать нежелательных эффектов.
Полезные материалы
- String.prototype.replace() — документация MDN для детального постижения метода
replace()
. - Replace multiple strings with multiple other strings — обсуждение на Stack Overflow о замене строк.
- Регулярные выражения — учебный ресурс по регулярным выражениям.
- Arrayzing – The JavaScript array cheatsheet — справочник JavaScript функций, в том числе замене строк.
- regex101: build, test, and debug regex — онлайн-инструмент для создания, тестирования и отладки регулярных выражений.
- replace-in-file – npm — NPM-пакет для замены строк в файлах.