Regexponline – интерактивный анализатор и редактор регулярных выражений

в 15:39, , рубрики: Регулярные выражения, метки:

Есть одна бородатая шутка: «если у вас есть проблема, и вы собираетесь решать ее с использованием регулярных выражений, то у вас есть две проблемы». Действительно, регулярные выражения – очень мощный и гибкий инструмент, применяемый для решения весьма широкого круга задач. Но, как водится, для поддержания баланса, такой серьёзный инструмент имеет весьма недружелюбный вид.

(<([a-z]+[^>]*)>)(.*)(</2>)

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

image

Когда-то и мне пришлось по долгу службы подружиться с регулярными выражениями. Прочитав Фридла и несколько статей на Хабре, я, конечно, начал понимать этот синтетический язык. Тем не менее, каждый раз, когда приходилось написать очередную регулярку, я быстро закапывался в нагромождении скобок, слешей, точек, плюсов, знаков вопроса, и других хорошо вам знакомых конструкциях. Разобраться в этой каше было очень сложно, особенно если возвращаешься к задаче месячной давности. Я мечтал об инструменте, который помог бы мне разобраться в собственном творении. Приблизительно подходящих по смыслу сервисов нагуглилось с десяток, но все они приносили мало пользы. Как раз тогда я и начал разрабатывать этот проект.

Итак, regexponline – инструмент, способный наглядно изобразить структуру регулярного выражения, разобрав его по элементарным компонентам; продемонстрировать совпадающие и не совпадающие его части; помочь в написании и отладке выражения, которое почему-то не совпадает с нужной строчкой.

Позвольте мне продемонстрировать работу сервиса сначала на простом синтетическом, но наглядном примере, а потом на примере «из жизни».
Для первого примера возьмём этот ужас из рамочки сверху и убедимся, что это вполне осмысленное выражение, которое кому-то наверняка когда-нибудь пригодится.

Открываем браузер (желательно хром свежей версии), вводим адрес http://regexponline.com/. Вуаля. Интерфейс системы состоит из трёх логических блоков – сверху вбиваем строчки, на которых будем тестировать регулярное выражение, посередине собственно саму регулярку (по умолчанию там появится уже знакомое нам выражение), снизу в виде таблицы будет показываться структура регулярного выражения и совпавший с ним текст. Попробуйте навести мышку на любую часть регулярки. В строчках тут же подсветится совпадающая часть. Все блоки раскрашены в разные цвета, одинаковый цвет означает один уровень вложенности (группировка происходит по скобкам, т.е. скобка внутри скобки – это один уровень вложенности). Серый цвет – нулевой уровень вложенности, т.е. всё регулярное выражение или вся строчка целиком, розовый – первый, зелёный – второй, и так далее. Все строчки и регулярка редактируются по двойному клику. В общем, лучше всего понять структуру регулярного выражения можно, поводив мышкой туда-сюда по всем блокам. Другой, более наглядный способ – нажать на кнопку «expand regex». Регулярное выражение разложится на составляющие, сгруппированные по уровню вложенности.

Думаю, уже стало понятно, что это за регулярное выражение. Оно совпадает с частями строк, представляющими из себя открывающий и закрывающий html-тег и контент между ними.

Очень часто бывает удобно присваивать группам имена. Тогда на выходе мы получаем массив совпадений, проиндексированных не только по порядку, но и этим именам. В regexponline это делать особенно удобно. Надо просто кликнуть на нужную группу и в появившемся поп-апе нажать «rename». Регулярное выражение, конечно, удлиняется, зато сразу становится понятен смысл каждой группы. Посмотрите на скриншот, разве тут ещё остаются вопросы, что к чему?

image

Ещё одна небольшая, но очень удобная фича – редактирование в реальном времени. В этом режиме все изменения регулярного выражения применяются прямо на лету, не нужно обновлять страницу, не нужно двойного клика, не нужно жать «ОК» — поправил регулярку, через секунду увидел обновлённый результат. Крайне удобно при отладке плохо работающего регэкспа.

Если при рефакторинге чужого кода вы нашли регулярное выражение, которое делает непонятно что – открывайте этот сервис, копипастите его туда, и разобраться станет намного проще.

Для второго примера предлагаю разобрать стандартную задачу валидации email.

Уверен, многие сталкивались с задачей проверить пользовательский ввод и удостовериться, что юзер указал свой почтовый адрес, а не ‘);DROP TABLE students;--. Какие у вас были первые действия? Писать своё выражение? Или нагуглить готовое решение в интернете? Теперь можно сочетать эти два подхода. В regexponline есть каталог регулярных выражений. Любой может в него добавить свой паттерн, если считает, что он может пригодиться коллеге по оружию. Также, результат любой вашей работы можно сохранить на сервере и получить на него ссылку, чтобы вернуться к работе позже, или чтобы отправить другу (кнопочка «share»).

Итак, в каталоге выражений найдите «Email», или используйте ссылку, которую я сделал специально для вас: http://regexponline.com/s/uv. В открывшемся регулярном выражении, устрашающим своими размерами и сложностью, становится легко разобраться, просто поводив по нему мышкой или нажав кнопку «expand regex».

Друзья, это молодой проект, в котором ещё многое предстоит сделать, многое доработать. Как часто бывает, этот инструмент писался «для себя», но потом я подумал, что это может быть полезно и кому-то ещё. Надеюсь, кому-нибудь я помогу сэкономить час-другой времени, потраченного на утомительное ковыряние в спецсимволах вашего регэкспа.

Спасибо за внимание, буду рад вашей критике, вопросам и предложениям.

Статья написана в рамках конкурса статей студентов проекта Технопарк Mail.Ru

Автор: jphoenix

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js