Auto Regex Generator / Builder

Almost all developers sooner or later come across regular expressions. In almost 99% of cases, we absolutely do not like to write them, considering it a side job that is not related to programming.

Most of us, when faced with this problem for the first time, begin to type in search engines something like: auto regex generator and, to our great regret, realize that Google is broken all search results are services for checking the correctness of an already built regular expression (or I googled badly).

But how to write this most regular expression?

Basically, there were 2 answers to this question:

1. To learn the documentation on regular expressions and create a regular expression by yourself;
2. To ask someone more experienced to do it for you;

Now, I am happy to introduce the 3rd answer - UiRegex

Backstory

In one project, a rather interesting and complex request came from internal users. Technical support staff needed to set their own validation rules for certain fields for different users. The rules had to be changed frequently and very quickly.

Like any good developer, I naturally started by looking for ready-made solutions. Nothing suitable was found and I had to proceed with a very primitive implementation. On the complex, as usual, there was neither money nor time.

But this problem hooked me very much, and now, finally, I am glad to present to you the fruits of my labor.

Web service

I wanted to make it as simple as possible (for a wider range of people), so that not only programmers, but also people who are far from programming (moderators / administrators) could make their own validation rules.

Here is the interface itself:

As expected, it was difficult for new users to figure out what to do, so I added hidden tooltips.

The first thing that meets you is an "Examples" card and this is done specifically for easier understanding of how it works. I recommend choosing the example closest to your task. Also, you can simply switch between correct and incorrect examples. You can then modify the example you have chosen as you wish. Over time, the list of examples will expand:

Next comes the thing for which it was all started - the generated Regular Expression:

Here I would like to stop a little and tell you more.

At first, I wanted to create a tool that would not restrict users in creating polysyllabic regular expressions and at the same time make the interface as simple as possible. It is possible to create a regex with groups / subgroups, define optional parts (not required), specify specific characters (the rest will have a type determined), specify the type - "any symbol" and block certain characters in a specific part of the regex. You can quite simply create a regular expression not only for a word, but also for a phrase and even a sentence. Generation of regular expressions is available both in Latin and Cyrillic (separately and together). As additional localizations of the interface are added, it is planned to support regular expressions for other writings.

By the way, do not be afraid that the regular expression is always red. This does not symbolize an error, but is done only in order to focus your attention on this extremely important information.

Test value

Here, the entered test value is checked to match the generated regular expression. And it happens on the fly. You don't need to press anything. Thus, you can check many options much faster and more conveniently.

If the test value does not match the generated regular expression, a description of the generated rule / regular expression is displayed under the Test input field. Rule description displays as set of chips:

The generated regular expression can have not only required parts, but also optional ones. Red color is required, yellow is optional.

Regex Auto Generator / Builder (UI)

And finally, we got to the last block in order, but not in importance. I personally consider this block to be the core of the entire service. It is here that the Generator receives all the necessary input data, which it subsequently processes and produces a ready-made result. By the way, all logic is implemented only on the client. A web service has no server code at all.

It is extremely important to understand that the machine (not able to read minds) must receive at least some information in order to analyze it and give at least some result. The more correct and concise your examples are, the more correct and concise the result will be. The order of your examples makes absolutely no difference.

Regular expression generates "on the fly", in real time!

Save Regex

Now we can save our regex. Just in case, I want to clarify that it is stored only in the browser's memory (localstorage). When you click on the "Save Regex" button, a dialog window appears where you enter a name for your regular expression.

In fact, as in the case of default examples and our regex, it is not the generated rule that is stored, but just the input data, and every time you switch the custom regex, the Generator logic is triggered. This is very handy 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.

Update URL

By clicking on the "Update URL" button, the data is saved in the Url parameters. You can copy the URL, send someone a link and the other user will see exactly what you entered earlier. It's pretty convenient.

Technologies

This web service is built on UiWebKit web components and custom elements. There is no custom JS/TS code, only HTML custom elements. If you have questions about technologies and the implementation itself, then feel free to ask them.

I will be glad to receive constructive comments and questions about UiRegex and I will answer them with pleasure. If you notice a bug or have a suggestion for improvement, then please email me to [email protected] or [email protected].

Thanks to all! Enjoy UiRegex, take care of yourself, stay healthy and productive!