RegExper: Regular Expressions Explained

What does this code snippet do?…

/^[0-9a-zA-Z]+@[0-9a-zA-Z]+[\.]{1}[0-9a-zA-Z]+[\.]?[0-9a-zA-Z]+$/

Those with several years development expertise will realize it’s a regular expression. But even the most astute guru will take a few moments to determine that it checks the validity of an email address. Only a superior subset of that group will comprehend that it’s fairly superficial and won’t check all possibilities.

Regular expressions are extremely powerful search patterns which can be used for string matching and replacement. They’re supported in the majority of languages including JavaScript, PHP, Perl, Java, C#, Python and Ruby.

Individual rules are normally straight-forward, e.g. [a-z] matches a single lowercase character and c.t matches a three letter string starting with ‘c’ and ending with ‘t’ — such as ‘cat’. However, when rules are combined, an indecipherable string of seemingly random codes starts to appear. The one above is relatively simple compared to many you’ll find in the wild.

Creating your own regular expressions is difficult enough and many of us resort to using the force. But it’s easy compared to parsing someone else’s code — which is normally written by someone who has an irrational aversion to comments!

Fortunately, Jeff Avallone has created a solution to your regex woes. RegExper transforms meaningless JavaScript-based expressions into a graphical representation:

Admittedly, you’ll still need a reasonable understanding of pattern matching, but it’s far more evident the expression is analyzing an email address.

Behind the scenes, RegExper is a Ruby application which translates regular expressions into an SVG image. The SVG is embedded in the page, but it should be possible to extract or copy it for use in your own documentation.

If you’d like to make improvements or automate the process, the project is open source and available to download or fork from github.com/javallone/regexper.

RegExper is incredibly clever. While there are plenty of tools to help you devise and test regular expressions, very few allow you to parse or reverse-engineer existing code. I’ve not found any which does it quite so prettily either.

Add RegExper to your toolkit and you’ll be parsing regular expressions with renewed enthusiasm. Probably.