Visual Regular Expression Generator
All developers sooner or later encounter regular expressions. In almost 100% of cases, we absolutely do not like to compose them, considering this as a side job, not related to programming.
Most of us, when faced with this problem for the first time, start scoring something like “regexp online generator” in search engines and, to our great regret, realize thatGoogle has broken all search results are services for checking the correctness of an already composed regular expression (or bad googled).
Until recently, there were 2 answers to this question:
')
Now, after several months of development, I am pleased to present the third answer:
» Regular expression generator
A long time ago, in one project came a rather interesting and complex request from internal users. Technical support staff themselves had to set validation rules for specific fields to different users. The rules were often and very quickly changed.
Like any good developer, your humble servant naturally began by searching for ready-made solutions. There was nothing suitable and I had to start a very primitive implementation. On the complex, as usual, there was no time or money.
But this problem very much hooked him and now, finally, he is glad to present you the fruits of his labors.
First decided to make a web service. I wanted to make it as simple as possible (for a wider circle of people), so that not only programmers could make up their rule for validation, but also people who are far from programming (moderators / administrators).
Here is the interface itself:
As expected, the new user doesn’t understand anything at all and therefore had to develop an introductory interactive course:
I always oppose modal windows and popups, but in this case it seems to me to use them all the same. Call it a “welcome message.”
And here is the interactive course itself, or rather its part:
You can also turn on the display of individual prompts, regardless of whether you take an introductory course or opt out.
The first thing that catches your eye is the "Examples" and it is not without purpose. To begin with, I strongly recommend choosing the example closest to your task. You can simply switch between the incorrect and correct option for easier understanding of the examples. Then you can change your chosen example as you wish. Over time, the list of examples will expand:
Next is what it was all about and was started - the generated Regular Expression :
Here I would like to stop and tell more.
From the very beginning, I wanted to create a tool that does not restrict users in creating polysyllabic regulars and at the same time make the interface as simple as possible. But in fact, how many times the interface has changed dramatically, I have already lost my account. We also had to rewrite several times the part of the logic of the generator itself (the core). And not because the architecture was poorly thought out, but due to the fact that some of the options were simply not taken into account. And the options - a huge set.
I would also like to talk about the possibilities. At the moment, you can create a regular schedule with groups / subgroups, define optional parts (optional), specify specific characters (the rest will determine the type), specify the type - “any character”, and block certain characters in a specific part of the regular schedule. You can quite simply create a regular calendar not only for words, but also for phrases and even sentences. The generation of regulars is available both in Latin and Cyrillic (separately and together). As additional interface localizations are added, support for regulars is planned for other scripts.
By the way, do not be afraid that the regular expression is always red. This does not symbolize a mistake, but was done only to focus your attention on this extremely important information.
Next in order is the "Test Field"
Here, the entered test value is checked for compliance with the generated regular expression. And it happens on the fly. You do not need to press anything. Thereby, you can check out many options much faster and more conveniently.
A description of the automatically generated rule is displayed below the input field.
There is a variant with the description of the rule as an error, when the entered test value does not match the generated rule / regular schedule:
This example shows how the test for blocked characters works:
The description of blocked characters in the rule is not very clear. A little later, it will be reduced to the same form as the description of the main part of the rule.
There is also a variant with the description of the rule in a separate block, when the entered test value corresponds to the generated rule / regular schedule:
I would like to clarify the meaning of colors with parts of the rule:
The generated regular expression can have not only mandatory parts, but also optional parts. I also want to note that the automatic description of the rule was made specifically for the future of the plug-in, but it also showed itself perfectly in this web service.
Finally, we got to the last block in order, but not by value. I personally consider this unit to be the core of the entire service. It is here that the Generator receives all the necessary input data, which subsequently processes and produces the ready result. By the way, all the logic is implemented only on the client. The web service has no server code at all.
At first, it is extremely important to understand that the machinedoes not know how to read thoughts should receive at least some information in order to analyze it and to give out at least some result. The more correct and concise the examples are, the more correct and concise will be the result. The order of the examples absolutely does not affect anything.
Here it can be very long and tedious to tell what and how to enter, but it seems to me that it will be much easier to understand with the help of examples, of which there are quite a few. And in general, the material with a description of how and what works is enough for another big article.
After we clicked the Generate button, we generated a regular expression. Now we can save it. Just in case, I want to clarify that it is stored only in the browser’s memory (localstorage).
When you click on the "Save" button, a dialog box appears:
You can manually enter a description for the rule or switch to an automatic description as in the example below. You also need to enter a name for the rule:
This functionality was designed with the expectation of a future plugin, but it was useful in this web service.
In fact, as in the case with examples and with user rules, not the generated rule is saved, but simply the input data and every time you switch the rule, the generator logic works. This is very useful when fixing bugs in the logic of the generator itself. Thus, even the saved rules will work with the latest version of the already corrected generator.
I prioritized them:
Here is the main technology stack with which we managed to implement all this:
The code is written in full Angular 2 Code Style (even with decorators), which in the future will make it very easy to migrate (I am only waiting for Material2).
In the future plans - to make a full-fledged plugin that will allow you to set validation rules for the client and for the server directly from the interface. I think this will be a very convenient and practical solution. Then you can develop this idea and even create a “Visual Form Builder” based on what would be the standard: “JSON Schema”, which I had to work with in due time.
If you want to do something similar, I will only be behind and will even help with advice. I think that: “The idea itself is practically worthless, its direct implementation is worth it.”
In conclusion, I want to allow myself a small digression. If you are a dreamer developer, like the author of an article who gets a buzz from her work, especially when she challenges you even a little, but still solves other people's problems, then you are most likely on the right path. Worse, when such a person has to strive for money, some material goods, in order to meet incomprehensible social standards or perform boring, stupid and routine work in order to simply feed himself, his family. It seems wrong to sacrifice your dreams, ideas, aspirations and time to please simple pieces of paper. But at the same time, the author of the article does not prompt anyone to take everything and leave it right now. Everyone must make their choice on their own, and when this is the right time for that.
Most of us, when faced with this problem for the first time, start scoring something like “regexp online generator” in search engines and, to our great regret, realize that
But how to make this most regular expression?
Until recently, there were 2 answers to this question:
')
- Examine the documentation for regular expressions and create a regular schedule for yourself.
- Ask someone more experienced to do it for you.
Now, after several months of development, I am pleased to present the third answer:
» Regular expression generator
Story
A long time ago, in one project came a rather interesting and complex request from internal users. Technical support staff themselves had to set validation rules for specific fields to different users. The rules were often and very quickly changed.
Like any good developer, your humble servant naturally began by searching for ready-made solutions. There was nothing suitable and I had to start a very primitive implementation. On the complex, as usual, there was no time or money.
But this problem very much hooked him and now, finally, he is glad to present you the fruits of his labors.
Let's start
First decided to make a web service. I wanted to make it as simple as possible (for a wider circle of people), so that not only programmers could make up their rule for validation, but also people who are far from programming (moderators / administrators).
Here is the interface itself:
As expected, the new user doesn’t understand anything at all and therefore had to develop an introductory interactive course:
I always oppose modal windows and popups, but in this case it seems to me to use them all the same. Call it a “welcome message.”
And here is the interactive course itself, or rather its part:
You can also turn on the display of individual prompts, regardless of whether you take an introductory course or opt out.
And what about the functional?
The first thing that catches your eye is the "Examples" and it is not without purpose. To begin with, I strongly recommend choosing the example closest to your task. You can simply switch between the incorrect and correct option for easier understanding of the examples. Then you can change your chosen example as you wish. Over time, the list of examples will expand:
Next is what it was all about and was started - the generated Regular Expression :
Here I would like to stop and tell more.
From the very beginning, I wanted to create a tool that does not restrict users in creating polysyllabic regulars and at the same time make the interface as simple as possible. But in fact, how many times the interface has changed dramatically, I have already lost my account. We also had to rewrite several times the part of the logic of the generator itself (the core). And not because the architecture was poorly thought out, but due to the fact that some of the options were simply not taken into account. And the options - a huge set.
I would also like to talk about the possibilities. At the moment, you can create a regular schedule with groups / subgroups, define optional parts (optional), specify specific characters (the rest will determine the type), specify the type - “any character”, and block certain characters in a specific part of the regular schedule. You can quite simply create a regular calendar not only for words, but also for phrases and even sentences. The generation of regulars is available both in Latin and Cyrillic (separately and together). As additional interface localizations are added, support for regulars is planned for other scripts.
By the way, do not be afraid that the regular expression is always red. This does not symbolize a mistake, but was done only to focus your attention on this extremely important information.
Next in order is the "Test Field"
Here, the entered test value is checked for compliance with the generated regular expression. And it happens on the fly. You do not need to press anything. Thereby, you can check out many options much faster and more conveniently.
A description of the automatically generated rule is displayed below the input field.
There is a variant with the description of the rule as an error, when the entered test value does not match the generated rule / regular schedule:
This example shows how the test for blocked characters works:
- "@" to the second "@";
- "-" in any part of the second-level domain name;
- "-" at the very end of the second-level domain, immediately before the ".";
The description of blocked characters in the rule is not very clear. A little later, it will be reduced to the same form as the description of the main part of the rule.
There is also a variant with the description of the rule in a separate block, when the entered test value corresponds to the generated rule / regular schedule:
I would like to clarify the meaning of colors with parts of the rule:
- green is correct
- yellow - optional
- red - incorrect
The generated regular expression can have not only mandatory parts, but also optional parts. I also want to note that the automatic description of the rule was made specifically for the future of the plug-in, but it also showed itself perfectly in this web service.
Core (UI)
Finally, we got to the last block in order, but not by value. I personally consider this unit to be the core of the entire service. It is here that the Generator receives all the necessary input data, which subsequently processes and produces the ready result. By the way, all the logic is implemented only on the client. The web service has no server code at all.
At first, it is extremely important to understand that the machine
Here it can be very long and tedious to tell what and how to enter, but it seems to me that it will be much easier to understand with the help of examples, of which there are quite a few. And in general, the material with a description of how and what works is enough for another big article.
Did you remember to save?
After we clicked the Generate button, we generated a regular expression. Now we can save it. Just in case, I want to clarify that it is stored only in the browser’s memory (localstorage).
When you click on the "Save" button, a dialog box appears:
You can manually enter a description for the rule or switch to an automatic description as in the example below. You also need to enter a name for the rule:
This functionality was designed with the expectation of a future plugin, but it was useful in this web service.
In fact, as in the case with examples and with user rules, not the generated rule is saved, but simply the input data and every time you switch the rule, the generator logic works. This is very useful when fixing bugs in the logic of the generator itself. Thus, even the saved rules will work with the latest version of the already corrected generator.
Additional features
I prioritized them:
- Automatic saving of data in url parameters . And it happens immediately after clicking on the "Generate" button, or when switching examples or saved rules. You can drop someone a link and when opening the page another user will see exactly what you entered earlier. It is quite convenient.
- Full localization of all content . I strongly disliked the existing localization modules, so your humble servant created his
bike avery simple module. Only ten lines of code. The selected language is read from Url and is recorded in Url, stored in Localstorage. It is especially nice to add new languages, because Text is taken from only one very simple JSON file for the corresponding language. I gave the file to the translators - I got another language. - Notification of a new version of the application . This web service is a one-page web application (literally). From personal experience, I know that the user can not restart a one-page application for months and that’s just right. But what to do if a new version is released? How to notify the user about this? - Very simple. A module was developed that polls the saved JSON file at a specified time interval and as soon as the recorded new version does not match the previous one, the following notification is shown:
Technology
Here is the main technology stack with which we managed to implement all this:
- TypeScript 2.0 + SystemJS
- Angular 1.5 (with components)
- Angular-Material 1.x
- IntroJS
The code is written in full Angular 2 Code Style (even with decorators), which in the future will make it very easy to migrate (I am only waiting for Material2).
Conclusion
In the future plans - to make a full-fledged plugin that will allow you to set validation rules for the client and for the server directly from the interface. I think this will be a very convenient and practical solution. Then you can develop this idea and even create a “Visual Form Builder” based on what would be the standard: “JSON Schema”, which I had to work with in due time.
If you want to do something similar, I will only be behind and will even help with advice. I think that: “The idea itself is practically worthless, its direct implementation is worth it.”
In conclusion, I want to allow myself a small digression. If you are a dreamer developer, like the author of an article who gets a buzz from her work, especially when she challenges you even a little, but still solves other people's problems, then you are most likely on the right path. Worse, when such a person has to strive for money, some material goods, in order to meet incomprehensible social standards or perform boring, stupid and routine work in order to simply feed himself, his family. It seems wrong to sacrifice your dreams, ideas, aspirations and time to please simple pieces of paper. But at the same time, the author of the article does not prompt anyone to take everything and leave it right now. Everyone must make their choice on their own, and when this is the right time for that.
Source: https://habr.com/ru/post/315442/
All Articles