Визуализатор регулярных выражений
Превращайте регулярные выражения в интерактивные железнодорожные диаграммы, изучайте разбор AST и тестируйте совпадения в реальном времени — 100 % бесплатно и на стороне клиента.
Type any regular expression to see its railroad diagram, AST breakdown, and live match highlighting - entirely in your browser with no data sent to any server.
Quick Reference
.Any char (except \n)\dDigit [0-9]\wWord char [a-zA-Z0-9_]\sWhitespace^Start of string/line$End of string/line\bWord boundary(…)Capturing group(?:…)Non-capturing group(?<n>…)Named group(?=…)Positive lookahead(?!…)Negative lookahead*Zero or more (greedy)+One or more (greedy)?Zero or one{n,m}Between n and m times|Alternation (OR)[…]Character class[^…]Negated class\1Back-referenceВозможности
- Интерактивная железнодорожная диаграмма: смотрите, как ваше регулярное выражение отображается в виде профессиональной железнодорожной/синтаксической диаграммы в реальном времени. Каждый токен — литералы, группы, кванторы, альтернативы и опережающие проверки — показан как навигируемая визуальная дорожка.
- Разбор AST с деревом токенов: изучайте сворачиваемое абстрактное синтаксическое дерево со всеми разобранными узлами — последовательностями, альтернативами, именованными группами, кванторами, обратными ссылками — с понятными описаниями, помогающими точно определить, что делает каждая часть вашего выражения.
- Тестирование совпадений в реальном времени с подсветкой: вставьте тестовую строку и сразу увидьте подсвеченные совпадения. Таблица групп захвата показывает каждое совпадение с его именованными и нумерованными значениями групп, помогая проверить корректность до выхода шаблона в продакшен.
- 100 % бесплатно — без регистрации и без сервера: весь разбор, построение диаграмм и оценка совпадений выполняются прямо в браузере с помощью встроенного движка регулярных выражений JavaScript. Данные не покидают устройство, что делает инструмент безопасным для чувствительных шаблонов, например правил аутентификации или валидаторов персональных данных.
Сценарии использования
- Отладка шаблонов: сразу находите несогласованные группы, ловушки жадных кванторов и проблемы с порядком альтернатив без запуска кода — просто взглянув на визуальную диаграмму.
- Ревью кода: делитесь ссылкой на визуализированное регулярное выражение при ревью pull request, чтобы коллеги проверяли замысел, не разбирая в уме сырые escape-последовательности.
- Аудит безопасности: проверяйте шаблоны валидации ввода на риски катастрофического возврата (ReDoS). Дерево AST сразу делает видимыми вложенные кванторы и неоднозначные альтернативы.
- Изучение регулярных выражений: новички могут вводить простые шаблоны и постепенно добавлять возможности, видя, как каждая группа символов, квантор или группа влияют на диаграмму.
- Создание документации: экспортируйте или делайте снимки железнодорожных диаграмм для документации API, вики или технических статей, чтобы объяснять сложную логику валидации без длинных текстов.
- Кроссплатформенное тестирование: проверяйте поведение шаблона сразу на нескольких примерах строк и проверяйте извлечение именованных групп захвата, используемых в маршрутизации URL, парсерах логов или разборе CSV.
Как работает железнодорожная диаграмма
Железнодорожная (или синтаксическая) диаграмма представляет формальную грамматику как набор путей. Шаблон читается слева направо: каждый токен — это подписанный блок, соединённый линиями. При выборе (альтернатива через | ) пути вертикально разветвляются и снова соединяются после вариантов. Если токен необязателен или повторяется, над элементом рисуется дуга цикла, обозначающая квантор. Это соответствует мысленной модели, которой пользуются большинство разработчиков при работе с регулярным выражением: слева направо, с ветвлениями для выбора и циклами для повтора.
Разбор AST
Рядом с диаграммой вкладка разбора AST показывает полное абстрактное синтаксическое дерево, разобранное из вашего шаблона. У каждого узла есть тип (последовательность, альтернатива, группа, квантор, литерал, класс символов, escape, якорь, обратная ссылка) и понятное описание. Дерево полностью сворачивается, поэтому можно сосредоточиться на отдельных подшаблонах, не теряя контекст.
Тестирование совпадений в реальном времени
Вкладка «Тест и совпадения» позволяет вставить пример входных данных и сразу увидеть, какие части строки соответствуют вашему шаблону. Совпадения подсвечиваются прямо в строке, а таблица групп захвата показывает каждую нумерованную и именованную группу из каждого совпадения — те же данные, которые получает код вашего приложения при вызове String.prototype.matchAll() или RegExp.prototype.exec() .
Поддерживаемый синтаксис
Визуализатор поддерживает полный набор возможностей регулярных выражений ECMAScript, включая классы символов ( [a-z] , [^0-9] ), сокращённые escape-последовательности ( \d , \w , \s ), якоря ( ^ , $ , \b ), захватывающие и незахватывающие группы, именованные группы через , опережающие проверки ( (?=…) , (?!…) ), ретроспективные проверки ( (?<=…) , (?<!…) ), обратные ссылки ( \1 , \k<имя> ) и все кванторы, включая «ленивые» варианты ( *? , +? , ?? ).
Часто задаваемые вопросы
Железнодорожная (или синтаксическая) диаграмма представляет регулярное выражение как сеть путей, читаемую слева направо. Варианты (альтернативы) разветвляются на параллельные дорожки и снова сливаются. Повторяющиеся элементы (кванторы) показываются дугой цикла над блоком. Визуализация напрямую отражает то, как движок регулярных выражений проходит по шаблону.
Всё работает полностью в вашем браузере. Парсер — на чистом TypeScript, диаграмма рендерится в SVG с помощью React, а движок совпадений — встроенный JavaScript RegExp. Данные не отправляются на сервер, поэтому инструмент безопасен для чувствительных шаблонов.
Визуализатор поддерживает всю грамматику регулярных выражений ECMAScript: классы символов, сокращённые escape-последовательности (\d, \w, \s), якоря, группы (захватывающие, незахватывающие, именованные), опережающие и ретроспективные проверки, обратные ссылки и все кванторы, включая «ленивые» варианты. Шаблоны можно вводить как обычный текст или в нотации /шаблон/флаги.
Перейдите на вкладку «Тест и совпадения» и вставьте пример входных данных в текстовое поле. Совпадения подсвечиваются прямо в строке в реальном времени. Таблица ниже показывает каждое совпадение с его нумерованными и именованными группами захвата — ровно те данные, которые получает ваше приложение при вызове exec() или matchAll().
Вкладка абстрактного синтаксического дерева (AST) показывает сворачиваемое дерево каждого разобранного узла — последовательность, альтернатива, группа, квантор, литерал, класс символов, escape, якорь и обратная ссылка — с понятным описанием каждого узла.
Да, частично. Дерево AST делает сразу заметными вложенные кванторы и неоднозначные альтернативы — две самые частые причины катастрофического возврата (ReDoS). Обнаружение шаблонов вроде (?:a+)+ на диаграмме помогает выявить опасность до выхода в продакшен.
Флаги меняют то, как движок обрабатывает шаблон. Инструмент поддерживает: g (глобальный — найти все совпадения), i (без учёта регистра), m (многострочный — ^ и $ совпадают с границами строк) и s (dot-all — . совпадает с переводами строк). Переключайте флаги кнопками рядом с полем ввода или указывайте их в нотации /шаблон/флаги.