Применение regex JavaScript для сопоставления строк по шаблону

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

Когда вам необходимо работать с многострочными данными, вы можете использовать флаг /s или паттерн [\s\S], оба варианта позволяют включить в поиск строки "переноса".

Если использовать флаг /s, точка будет соответствовать любому символу, включая "переносы строк":

const regex = /pattern/s;

В случае недоступности флага /s стоит использовать [\s\S], указывающий на любой символ:

const regex = /pattern[\s\S]*/;

Основы многострочного поиска

Чтобы осуществить поиск по нескольким строкам, воспользуйтесь флагом s или паттерном [\s\S] в ситуациях, когда флаг s не поддерживается.

const multilineRegex = /^Multi[\s\S]*string!$/;

Регулирование "жадности" в регулярных выражениях

Для того чтобы регулярное выражение захватывало наименьшее возможное количество символов, используйте "нежадные" модификаторы *? или +?.

const nonGreedyRegex = /<pre>[\s\S]+?<\/pre>/;

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

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

const start = performance.now();
const match = largeText.match(regexPattern); 
const end = performance.now();
console.log(`Поиск занял ${end – start} миллисекунд`);

Ошибки и способы их предупреждения

Избегайте использования . или (.|[\r\n]) из-за возможного снижения производительности; дайте предпочтение [\s\S] или флагу s.

Методы DOM вместо регулярных выражений

Рекомендуется использовать методы DOM или jQuery для извлечения элементов <pre> из DOM, вместо регулярных выражений.

const preElements = document.getElementsByTagName("pre");
const preElements = $('pre');

Учёт переносов строки в регулярных выражениях

Чтобы учесть все типы переносов строк, добавьте \r в шаблон.

Эволюция многострочных регулярных выражений

Появившийся в ECMAScript 2018 флаг s существенно упростил осуществление многострочного поиска в JavaScript.

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

При работе со сложными HTML-структурами используйте методы DOM.

Завершая работу с многострочным поиском

Сочетание "нежадных" квантификаторов, флага s и глобального поиска позволяет извлечь содержимое тегов <pre> из нескольких строк:

const preContentRegex = /<pre>.*?<\/pre>/gs;

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

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

" Первый этаж: Кухня, Гостиная
 Второй этаж: Спальня, Ванная"

С флагом многострочного поиска /m вы осматриваете дом за одно обходное движение:

let regex = /^Second Floor.+/m;

И вы немедленно находите результат:

" Второй этаж: Спальня, Ванная"

🎯 Миссия выполнена: многострочное совпадение найдено!

Совместимость и учёт производительности

Избегайте применения устаревших методов, таких как [^], и следите за обеспечением производительности при их использовании.

Альтернативы регулярным выражениям в JavaScript

В JavaScript существуют также другие полезные инструменты для работы со строками: .split(), .indexOf(), .includes() и методы массива .filter(), .map(), .reduce().

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

1. Регулярные выражения – JavaScript | MDN — подробное руководство по работе с регулярными выражениями.
2. RegExp.prototype.exec() – JavaScript | MDN — детализированная документация по методу exec.
3. Справочник по RegExp в JavaScript — примеры и разъяснения методов и свойств RegExp.
4. Регулярные выражения :: Выразительный JavaScript — доступное объяснение регулярных выражений.
5. Шаблоны и флаги — введение в шаблоны и флаги регулярных выражений.
6. regex101: создание, тестирование и отладка регулярных выражений — инструмент для тестирования регулярных выражений в режиме онлайн.