Regexponline - an interactive regular expression analyzer and 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 appearance.


    Such a beginner’s chupacabra is in awe, and even makes a knowing person involuntarily wrinkle his nose. And your girlfriend will decide that you are crazy when she sees you writing such a design.


    Once upon a time I had to make friends with regular expressions on duty. Having read Fridl and several articles on Habré, of course, I began to understand this synthetic language. Nevertheless, every time I had to write another regular season, I quickly buried myself in a heap of brackets, slashes, dots, pluses, question marks, and other constructions that you are familiar with. To understand this porridge was very difficult, especially if you return to the task a month ago. I dreamed of an instrument that would help me figure out my own creation. About a dozen services were googled with a dozen, but all of them brought little benefit. Just then I began to develop this project.

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

    Let me demonstrate the operation of the service first with a simple synthetic, but illustrative example, and then with the “from life” example.
    For the first example, we take this horror from the box above and make sure that this is a completely meaningful expression that someone will probably someday use.

    Open the browser (preferably chrome fresh version), enter the address Voila. The system interface consists of three logical blocks - on top we drive in the lines on which we will test the regular expression, in the middle of the regular expression itself (by default there will appear an already familiar expression), the structure of the regular expression and the text matching with it will be shown below in the form of a table. Try moving your mouse over any part of the regular season. The lines immediately highlight the matching part. All blocks are painted in different colors, the same color means one level of nesting (grouping occurs in parentheses, i.e. the bracket inside the bracket is one level of nesting). Gray color - zero level of nesting, i.e. the entire regular expression or the entire line, pink - the first, green - the second, and so on. All lines and regulars are edited by double-clicking. Generally, You can best understand the structure of a regular expression by moving the mouse back and forth in all blocks. Another, more visual way is to click on the “expand regex” button. The regular expression will decompose into components grouped by level of nesting.

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

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


    Another small but very convenient feature is real-time editing. In this mode, all changes to the regular expression are applied directly 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 regularity, after a second I saw an updated result. It is extremely convenient when debugging a poorly working regexp.

    If during the refactoring of someone else’s code you find a regular expression that makes it incomprehensible what - open this service, copy and paste it there, and it will become much easier to figure it out.

    For the second example, I propose to parse the standard email validation task.

    I am sure that many people were faced with the task of checking user input and making sure that the user indicated his mailing address, and not '); DROP TABLE students; -. What were your first actions? Write your expression? Or google a turnkey solution on the Internet? Now you can combine these two approaches. Regexponline has a regex directory. Anyone can add his own pattern to it if he believes that he 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 (“share” button).

    So, find “Email” in the expression directory, or use the link I made specifically for you: The regexp that opens is awesome with its size and complexity, it becomes easy to figure it out by simply moving the mouse over it or clicking the expand regex button.

    Friends, this is a young project in which much remains to be done, much to be finalized. As often happens, this tool was written "for myself", but then I thought that it could be useful to someone else. I hope someone helps me save an hour or two of the time spent tiring picking in the special characters of your regexp.

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

    This article was written as part of a contest for students of the Mail.Ru Technopark project

    Also popular now: