Regexponline - interactive analyzer and regular expression editor

There is one bearded joke: “if you have a problem and you are going to solve it using regular expressions, then you have two problems”. Indeed, regular expressions are a very powerful and flexible tool used to solve a very wide range of problems. But, as usual, to maintain balance, such a serious tool has a very unfriendly look.

(<([az]+[^>]*)>)(.*)(</\2>)

Such a newbie chupacabra leads to a tremulous horror, and even makes a knowledgeable person wrinkle his nose involuntarily. And your girlfriend generally decides that you are mad when they see you writing such a construction.


')
Once upon a time I also had to make friends with regular expressions. After reading Friedl and several articles on Habré, I, of course, began to understand this synthetic language. However, every time when I had to write another regular season, I quickly burrowed into a pile of brackets, slashes, points, pluses, question marks, and other well-known structures. Understand this mess was very difficult, especially if you go back to the task a month ago. I dreamed of a tool that would help me understand my own creation. Approximately suitable within the scope of the services a dozen googled, but they all brought little benefit. That's when I started developing this project.

So, regexponline is a tool that can visually depict the structure of a regular expression, parsing it into elementary components; demonstrate matching and non-matching parts of it; help in writing and debugging an expression that for some reason does not coincide with the desired line.

Let me demonstrate the work of the service first on a simple synthetic, but illustrative example, and then on the example of "from life".
For the first example, let's take this horror out of the box above and make sure that this is a quite meaningful expression that someone will probably come in handy someday.

Open the browser (preferably the latest version of chrome), enter the address http://regexponline.com/ . Voila The system interface consists of three logical blocks - from above we drive in lines on which we will test the regular expression, in the middle the actual regular itself (by default there will appear an expression already familiar to us), the structure of the regular expression and the text matching it will appear in the bottom. Try to mouse over any part of the regular season. In the lines immediately coincides with the highlighted part. All blocks are painted in different colors, the same color means one level of nesting (grouping occurs by parentheses, i.e. the bracket inside the bracket is one level of nesting). Gray color - zero nesting level, i.e. the whole regular expression or the entire line, pink - the first, green - the second, and so on. All lines and regulars are edited by double-clicking. In general, it is best to understand the structure of a regular expression by moving the mouse back and forth through all the blocks. Another more visible way is to click on the “expand regex” button. A regular expression will decompose into components, grouped by nesting level.

I think it has already become clear what kind of regular expression it is. It coincides with the parts of the lines, representing the opening and closing html-tag and content between them.

It is often convenient to give names to groups. Then at the output we get an array of matches, indexed not only in order, but also by these names. In regexponline, this is especially convenient. You just need to click on the desired group and in the pop-up that appears click "rename". The regular expression, of course, lengthens, but the meaning of each group immediately becomes clear. Look at the screenshot, unless there are still questions, what's what?



Another small but very handy feature is real-time editing. In this mode, all changes to the regular expression are applied on the fly, you do not need to refresh the page, you do not need to double-click, you do not need to press “OK” - corrected the regular schedule, after a second I saw the updated result. It is extremely convenient when debugging a poorly working regexp.

If, when refactoring someone else's code, you find a regular expression that makes it unclear what - open this service, copy-paste it there, and it will become much easier to understand.

For the second example, I suggest parsing the standard email validation task.

I am sure that many people faced the task of checking user input and making sure that the user indicated his postal address, and not "); DROP TABLE students; -. What were your first actions? Write your expression? Or google a ready solution on the Internet? Now you can combine these two approaches. The regexponline has a regular expressions directory. Anyone can add a pattern to it if they think it can be useful to a colleague in arms. Also, the result of any of your work can be saved on the server and get a link to it to return to work later, or to send to a friend (the “share” button).

So, in the catalog of expressions, find "Email", or use the link that I made specifically for you: http://regexponline.com/s/uv . In the regular expression that opens, which is frightening in its size and complexity, it becomes easy to understand by simply moving the mouse over it or clicking the expand regex button.

Friends, this is a young project, in which there is still much to be done, a lot of work to be done. As often happens, this tool was written "for myself", but then I thought that it could be useful to someone else. Hopefully, I will help someone to save an hour or two of time spent on tedious tinkering in the special characters of your regexp.

Thank you for your attention, I will be glad to your criticism, questions and suggestions.

The article was written as part of the Technopark Mail.Ru student article competition.