Візуальний генератор регулярних виразів

Всі розробники рано чи пізно стикаються з регулярними виразами. Практично в 100% випадків нам зовсім не подобається їх складати, вважаючи це побічної роботою, не пов'язаної з програмуванням.

Більшість з нас, вперше зіткнувшись з цією проблемою, починають забивати в пошукових системах щось типу: «regexp online generator» і до свого превеликий жаль усвідомлюють що гугл зламався всі результати пошуку є сервісами для перевірки коректності вже складеного регулярного виразу (або я погано гугл).

А як же скласти це саме регулярний вираз?
image
До недавнього часу існувало 2 відповіді на це питання:

  1. Вивчити документацію з регулярними виразами і скласти регулярку самому
  2. Попросити когось більш досвідченого зробити це за вас
Тепер, після декількох місяців розробки, радий представити і 3-ї відповідь:

» Генератор регулярних виразів

Історія
Давним давно, в одному проекті прийшов досить цікавий і складний запит від внутрішніх користувачів. Персоналу технічної підтримки потрібно було самим задавати правила валідації для певних полів, різним користувачам. Правила повинні були часто і дуже оперативно змінюватися.

Як і будь-який хороший розробник, ваш покірний слуга природно почав з пошуку вже готових рішень. Нічого підходящого не знайшлося, і довелося приступити до дуже примітивною реалізації. На складну, як завжди, не було ні коштів, ні часу.

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

Почнемо
Для початку вирішив зробити веб-сервіс. Хотілося зробити максимально просто (для більш широкого кола людей), щоб своє правило для валідації змогли скласти не тільки програмісти, але й люди які далекі від програмування (модератори/адміністратори).

Ось сам інтерфейс:



Як і очікувалося, новому користувачеві взагалі нічого незрозуміло і тому довелося розробити вступний інтерактивний курс:


Завжди виступаю проти модальних вікон і попапов, але в цьому випадку мені здається їх все ж целособразно використовувати. Можна назвати це «вітальним повідомленням».

А ось і сам інтерактивний курс, точніше його частина:



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

А що ж щодо функціоналу?
Перше, що кидається в очі — це «Приклади» і зроблено це неспроста. Для початку, я настійно рекомендую вибрати найбільш близький для вашої задачі приклад. Ви можете просто переключитися між некоректним і коректним варіантом для більш простого розуміння прикладів. Потім можете змінити вибраний вами приклад так, як самі побажаєте. З часом список прикладів буде розширюватися:


Далі йде те, заради чого все і затівалося — згенероване Регулярний Вираз:



Тут хотілося б трохи зупинитися і розповісти докладніше.

З самого початку мені хотілося створити інструмент не обмежує користувачів в створенні складних регулярок і в той же час зробити інтерфейс максимально простим. А на ділі, скільки разів кардинально змінювався інтерфейс я вже й з ліку збився. Також довелося кілька разів переписувати частина логіки самого генератора (ядро). І не тому що архітектура була погано продумана, а з-за того, що деякі варіанти просто не були враховані. А варіантів — безліч.

Ще хотілося б розповісти про можливості. На даний момент можна створювати регулярку з групами/підгрупами, визначати опціональні частини (не обов'язкові), вказувати конкретні символи (в інших визначатиметься тип), вказати тип — «будь-який символ» і блокувати певні символи в конкретній частині регулярки. Ви можете досить просто створити регулярку не тільки слова, але й словосполучення і пропозиції. Доступна генерація регулярок як латиницею так і кирилицею (окремо і разом). По мірі додавання додаткових локалізацій інтерфейсу, планується підтримка регулярок і для інших писемностей.

До речі, не лякайтеся що регулярний вираз завжди червоного кольору. Це символізує помилку, а зроблено лише для того, щоб акцентувати вашу увагу на цієї вкрай важливої інформації.

Далі по порядку йде «Тестове поле»

Тут відбувається перевірка введеного тестового значення на відповідність згенеровані регулярному виразу. І вона відбувається «на льоту». Нічого натискати не потрібно. Тим самим ви можете значно швидше і зручніше перевірити безліч варіантів.

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

Є варіант з описом правила у вигляді помилки, коли введене тестове значення не відповідає згенеровані правилом/регулярці:



На даному прикладі видно, як спрацьовує перевірка на заблоковані символи:

  • "@" до другої "@";
  • "--" в будь-якій частині імені домену другого рівня;
  • "-" в самому кінці домену другого рівня, непослредственно перед символом ".";
Опис заблокованих символів у правилі відображається не дуже зрозуміло. Трохи пізніше воно буде приведено до такого ж вигляду, як і опис основної частини правила.

Також є варіант з описом правила в окремому блоці, коли введене тестове значення відповідає згенеровані правилом/регулярці:



Хотілося б роз'яснити значення кольорів з частинами правила:

  1. зелений — правильно
  2. жовтий — опціонально
  3. червоний — некоректно
Згенероване регулярний вираз може мати не тільки обов'язкові частини, але також і опціональні. Хочу також зазначити, що автоматичне опис правила робилося саме для майбутнього плагіна, але відмінно показав себе і в даному веб-сервісі.

Ядро (UI)


Ось і нарешті ми дісталися до останнього блоку за порядком, але не за значенням. Я особисто вважаю цей блок — ядром всього сервісу. Саме тут Генератор отримує всі необхідні вхідні дані, які згодом обробляє і видає вже готовий результат. До речі, вся логіка реалізована тільки на клієнті. Веб сервіс взагалі не має серверного коду.

Спочатку вкрай важливо зрозуміти що машина не вміє читати думки повинна отримати хоч якусь інформацію, щоб проаналізувати її і видати хоч якийсь результат. Чим правильніше і лаконічніше будуть приклади, тим правильніше і лаконічніше буде результат. Порядок прикладів абсолютно ні на що не впливає.

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

А ти не забув зберегтися?
Після того, як ми натиснули кнопку «Генерувати», у нас сгенерировалось регулярний вираз. Тепер ми можемо зберегти його. На всякий випадок хочу уточнити що зберігається воно тільки в пам'яті браузера (localstorage).

При натисканні на кнопку «Зберегти» з'являється діалогове вікно:


Ви можете вручну ввести опис правила або перейти на автоматичне опис як в прикладі нижче. Також вам потрібно ввести назву правила:


Цей функціонал був розроблений з розрахунком на майбутній плагін, але згодився і в даному веб-сервісі.

Насправді, як у випадку з прикладами так і з одними правилами, зберігається не згенероване правило, а просто вхідні дані і кожен раз, коли ви перемикаєте правило спрацьовує логіка генератора. Це дуже зручно при виправленні помилок у логіці самого генератора. Тим самим навіть збережені правила будуть працювати з останньою версією вже виправленого генератора.

Додаткові можливості
Я розташував їх по пріоритету:

  1. Автоматичне збереження даних в Url параметри. І відбувається це відразу ж після натискання на кнопку «Генерувати», або при перемиканні прикладів або збережених правил. Ви можете скинути комусь посилання і при відкритті сторінки інший користувач побачить саме те, що ви вводили раннє. Це досить зручно.

  2. Повна локалізація всього контенту. Існуючі модулі локалізації мені дуже не подобалися, тому ваш покірний слуга створив свій велосипед дуже простий модуль. Всього десяток рядків коду. Мова зчитується з Url і записується в Url, зберігається в Localstorage. Особливо приємно додавати нові мови, т. к. текст береться тільки з одного дуже простого JSON файлу для відповідної мови. Віддав файлик перекладачам — отримав ще одну мову.

  3. Повідомлення про нової версії програми. Даний веб-сервіс — це одностраничное веб додаток (буквально). З особистого досвіду знаю що користувач може місяцями не перезавантажувати одностраничное додаток і це якраз правильно. Але що робити якщо вийшла нова версія? Як повідомити про це користувача? — Дуже просто. Був розроблений модуль, який опитує збережений JSON файл із заданим інтервалом часу і як тільки записана нова версія не відповідає попередньої — показується ось таке повідомлення:



Технології
Ось основний стек технологій з допомогою якого вдалося все це реалізувати:

  • TypeScript 2.0 + SystemJS
  • Angular 1.5 (з компонентами)
  • Angular-Material 1.x
  • IntroJS
Код написаний в повному Angular 2 Code Style (навіть з декораторами), що в майбутньому дозволить дуже просто мігрувати (чекаю тільки Material2).

Висновок
У подальших планах — зробити повноцінний плагін, який дозволить задавати правила валідації одночасно для клієнта й сервера прямо з інтерфейсу. Мені здається це буде дуже зручним і практичним рішенням. Потім можна розвинути цю ідею і створити навіть «Visual Form Builder» на основі як-би стандарту: «JSON Schema», з яким мені довелося попрацювати в свій час.

Якщо ви захочете зробити щось аналогічне, я буду тільки за і навіть допоможу радами. Вважаю що: «Сама ідея практично нічого не варто, варто її безпосередня реалізація».

На закінчення, хочу дозволити собі невеликий відступ. Якщо ти розробник-мрійник, як і автор статті, який отримує кайф від своєї роботи, особливо коли вона кидає тобі виклик і хоч трохи, але все ж вирішує проблеми інших людей, тоді ти швидше за все на правильному шляху. Гірше, коли такій людині доводиться гнатися за грошима, якимись матеріальними благами, щоб відповідати незрозумілим соціальним стандартам або виконувати нудну, нудну рутинну роботу, щоб прогодувати себе, свою сім'ю. Здається не правильним жертвувати своїми мріями, ідеями, прагненнями і часом на догоду простим папірців. Але в той же час автор статті нікого не спонукає прямо зараз все взяти і кинути. Кожен повинен зробити свій вибір сам і коли для цього настане дійсно відповідний час.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.