Замена пары символов в JavaScript: метод replace() и группы

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

Для реализации функционала метода .replace() в JavaScript, используйте комбинацию регулярных выражений и функций замены. Например, в регулярных выражениях $1 обозначает первую захваченную группу.

let str = "123-456";
let newStr = str.replace(/(\d+)-(\d+)/, (match, group1, group2) => `${group1}:${group2}`);
console.log(newStr); // "123:456"

В данном примере \d+ служит шаблоном для поиска последовательностей цифр. Переменные group1 и group2 хранят значения захваченных групп, а ${group1}:${group2} обеспечивает замену дефиса на двоеточие.

Обработка захваченных групп и методов замены

Применение захваченных групп

Захваченные группы в регулярных выражениях, обозначаемые скобками ( ), дают возможность выделить и использовать определённые фрагменты текста. $n обозначает номер захваченной группы.

let input = "Word_Smashing_Together";
let output = input.replace(/_(.*?)_/g, "<$1>");
console.log(output); // Word<Smashing>Together

Использование "ленивого" квантификатора .*? позволяет минимизировать сегмент между двумя подчёркиваниями.

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

Безопасное преобразование HTML

При преобразовании строк в HTML-содержимое важно использовать < и > вместо < и > для избежания ошибочной интерпретации HTML-тегов:

let input = "Enter <matrix>, Exit &lt;matrix&gt;";
let output = input.replace(/<(.+?)>/g, '&lt;$1&gt;');
console.log(output); // Enter &lt;matrix&gt;, Exit &lt;matrix&gt;

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

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

let story = "I have 10 coins and 5 notes.";
let edit = story.replace(/(\d+) (\w+)/g, (match, amount, item) => {
  let unit = item.endsWith('s') ? item.slice(0, -1) : item;
  return `${amount} piece${amount > 1 ? 's' : ''} of ${unit}`;
});
console.log(edit); // I have 10 pieces of coin and 5 pieces of note.

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

Рассмотрим работу JavaScript как деятельность редакционной команды:

manuscript.replace(/(draft)/g, 'revision');

Каждое упоминание слова «черновик» заменяется на слово «редакция», упрощая тем самым процесс редактирования текста:

До: "*Черновики* ожидают правки."
После:  "*Редакции* ожидают правки."

Команда редакторов тщательно работает над корректировкой каждого упоминания «черновика».

Практическое применение в различных сценариях

Перекрывающиеся совпадения

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

let text = "__highlight__ this __word__";
let updatedText = text.replace(/__(.*?)__/g, "<em>$1</em>");
console.log(updatedText); // "<em>highlight</em> this <em>word</em>"

Роль глобального поиска

Глобальный флаг g обеспечивает обработку всех вхождений шаблона в строке.

let phrase = "Repeat, Repeat, Repeat";
console.log(phrase.replace(/Repeat/, "Echo")); // "Echo, Repeat, Repeat" – в чьей-то песне зациклился припев.
console.log(phrase.replace(/Repeat/g, "Echo")); // "Echo, Echo, Echo" – эхо разносится по всей комнате!

Тестирование регулярных выражений

Регулярные выражения следует тщательно проверять перед их использованием, с помощью различных онлайн-инструментов для тестирования.

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

1. String.prototype.replace() – JavaScript | MDN — подробное описание метода replace().
2. Groups and backreferences – JavaScript | MDN — информация о группах и обратных ссылках в регулярных выражениях.
3. Capturing groups — доступное объяснение работы с группами в регулярных выражениях.
4. JavaScript RegExp Object – Using Regular Expressions with Client Side Scripting — гид по использованию групп и обратных связей в JavaScript.
5. Regular Expressions :: Eloquent JavaScript — ресурс, посвященный регулярным выражениям.
6. Strings • JavaScript for impatient programmers (ES2022 edition) — справочная информация по методам работы со строками, включая replace().