Visual Support for Working with Regular Expressions

Regular expressions are a cool thing—until you wrote your first expression with more than a dozen of characters. Then, regular expressions basically become a mess: just after you wrote expression, you likely already forgot what the initial [^[\]] meant and why you needed .*?(\w*). It particularly becomes nasty, when there is a bug in the expression and you can’t find it. That was what actually happened to us. We spent an afternoon and night debugging a long, but not too complicated expression just to locate a simple bug. It was after that encounter that we decided to do something about it. We developed RegViz, a tool to visually debug regular expressions. The requirements were clear quite soon: The tool should

  • improve the readability of regular expressions,
  • help to debug and test the expression, and
  • be easy to use without requiring any explanation.

As we could not simply change the syntax of regular expressions, the tool needed to be build on top of the already existing regular expression infrastructure. In the following, I briefly introduce RegViz and its features, but also want to give an overview of alternative tools—some of the them had been around before, others were developed in parallel to RegViz. As RegViz is a quite visual approach, I focus more on tools that include a visualization of some sort or at least advanced syntax highlighting. Although the problem is far from being solved, I think the support for handling regular expressions made a big leap recently.


RegViz

http://regviz.org

RegViz Screenshot RegViz follows the standard layout of a regular expressions tool: you have a text field for typing the regular expression itself, and an additional field for a sample text, which is used to test the expression. What makes RegViz special—besides the lean user interface—are the visual elements that are overlaid on top of the expression and sample text. Within the expression, these clarify the role of the individual characters as well as the overall structure of the expression. In the sample text, they highlight matches and subgroups within the matches. Additionally, test cases can be simply defined by marking parts of the sample text as targets to be matched. RegViz works for JavaScript regular expressions. Like most of the other tools presented here, RegViz is an online tool and can be used without requiring any registration or payment. If you want to learn more, you can also have a look into our paper on RegViz.


 Debuggex

https://www.debuggex.com/

Debuggex has the same basic layout consisting of two text field for the regular expression and the sample text. In addition to that, there is a diagram that visualizes the regular as a kind of state chart or automaton representation. The cursor is synchronized between the regular expression text field and the visualization and thereby helps to align the two representations. Some color-coding is used for the text to show the nesting of the regular expression as well as matches in the text. Test cases can be defined in an additional part of the interface. Debuggex supports JavaScript, Perl (PCRE), and Python regular expressions.


RegexBuddy

http://www.regexbuddy.com/

RegexBuddy Screenshot RegexBuddy is probably the most established tool presented here. Unlike the others, it is not a free web application, but a commercial desktop program. The user interface looks a bit complicated, but provides many helpful views and feature providing deep support for writing and debugging regular expressions. For instance, one view explains the regular expression in natural language text, another shows the stepwise parsing process in detail. Often very practical, matched strings can be replaced by other strings or variants of the match. RegexBuddy is extremely versatile as it supports more than a dozen different dialects of regular expressions.


 regular expressions 101

http://regex101.com/

The focus of regular expressions 101 is on providing a natural language text explanation and a colorful highlighting of the syntax and matches. Like RegViz and Debuggex, it is a free web-based tool with the classic two text fields. It also allows to add test cases in a separate view and to replace matches in the sample text. Supported languages are JavaScript, Perl (PCRE), and Python.


 RegExr

http://www.regexr.com/

RegExr Screenshot

RegExr is a lean and responsive variant of a basic regular expression tool with a good color coding of the regular expression. A particularly nice interactive feature is the mouse over popup that explains the expression and highlights groups or matches. RegExr includes a replace mode and supports JavaScript.


 Other Tools

and many more.

Advertisements
This entry was posted in Tools and tagged , , . Bookmark the permalink.

5 Responses to Visual Support for Working with Regular Expressions

  1. timseverien says:

    I’ve made a really simple one as well: https://timseverien.com/projects/regexhelper/

  2. Greg says:

    Also try Regex Pixie

  3. Wow, I didn’t realise there were so many: Rubular.com is excellent and is my first port of call for anything more complex than #[0-9]#, there’s also PHPLiveRegex.com which has support for examples in preg_match|match_all|replace|.

  4. paddy3118 says:

    I am a good rather than beginner regexp user and for my needs I find Kodos, http://kodos.sourceforge.net/ the best Python regex debugger for my needs.

    Kodos works on Linux and windows, my development platforms, and because it is a program rather than a web app, nothing is being sent to outside sites which is better for security. Kodos allows fairly large chunks of example text to be loaded which helps when developing a parser, and spits out example Python code.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s