Работа с многострочными шаблонами regex в JavaScript

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

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

const regex = /<startTag>([\s\S]*?)<\/endTag>/;

Замените startTag и endTag на настоящие теги. Для извлечения содержимого, размещенного между тегами, примените метод regex.exec():

const str = `<startTag>line1\nline2</startTag>`;
const match = regex.exec(str);
console.log(match ? match[1] : 'Совпадений не обнаружено');

Шаблон [\s\S]*? соответствует всем символам, включая перевод строки, обеспечивая захват содержимого, не прибегая при этом к "жадной" вариации.

"Dotall" или "multiline": что выбрать?

В текстах, распределенных на несколько строк, возникает необходимость выбора между флагами dotall (/s) и multiline (/m). Они служат разным целям. Флаг /s позволяет точке в шаблоне (.) соответствовать символам перевода строки. Это позволяет захватывать весь многострочный текст:

let regex = /<tag>.*?<\/tag>/s;

Эта функциональность была представлена в стандарте ECMAScript 2018. Соответственно, она может не поддерживаться в устаревших браузерах. В этом случае на помощь приходит [\s\S]:

let regex = /<tag>[\s\S]*?<\/tag>/;

Не забывайте контролировать "жадность" квантификатора, используя *?, чтобы избежать захвата ненужного содержимого. Всегда проверяйте, что флаг /s активен при составлении выражения:

const pattern = '<tag>.+?</tag>';
const flags = 's';
const regex = new RegExp(pattern, flags);
console.log(regex.dotAll);

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

Чтобы избежать ошибок, помните о следующем:

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

Применение Regex: реальные сценарии

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

1. Сбор данных: Извлекайте информацию из HTML/XML-документов, словно археолог, отыскивающий артефакты.
2. Шаблонизация: Находите и заменяйте плейсхолдеры реальными данными в процессе работы с конструктором.
3. Анализ логов: Выбирайте нужные записи из лог-файлов, состоящих из множества строк.

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

Представьте процесс извлечения текста между тегами, как операцию над фрагментом кода (💻):

- Есть код: `💻Здесь скрыт секретный код...💻 еще не использованный код...`
- Нам нужно найти фрагменты кода между символами 💻.

Применяем regex и флаг multiline:

let regex = /💻([\s\S]*?)💻/m;
let secretCode = `💻Здесь скрыт секретный код...💻`.match(regex)[1];

Результат работы:

``markdown Извлеченный код:Здесь скрыт секретный код...` // 💡 Прекрасно! Секретный код успешно извлечен!

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

1. Регулярные выражения – JavaScript | MDN — неоценимый ресурс по теме регулярных выражений в JavaScript.
2. regex101: создание, тестирование и отладка регулярных выражений — площадка, на которой можно практиковаться в создании регулярных выражений.
3. Регулярные выражения :: Элегантный JavaScript — глубокое погружение в тему регулярных выражений из книги "Элегантный JavaScript".
4. Шаблоны и флаги — подробное руководство по шаблонам и флагам в JavaScript регулярных выражениях.
5. Regexper — визуальный помощник для понимания вашего regex.
6. Regulex：визуализатор JavaScript регулярных выражений — инструмент для наглядного представления структуры регекса.