Debuggex is an online Regex testing tool that allows visualization of Regex match algorithms. The visualization feature is good both for the learners who do some Regex exploration and for the experienced users who might want to track the Regex match forward or back. It is also useful for an instant Regex pattern match by highlighting, thus eliminating the need for pressing any buttons to run Regex patterns. This tool is one of a dozen online Regex testers.
Regex algorithm visualization for a better clue
The Debuggex central diagram gives a visual representation of the Regex algorithm. All the matches are highlighted in the test string (down the screen under the purple line). At the right-bottom area one can see the random matches of our current Regex. All of the visual section gets updated in real time as we input our regular expression.
The ball slider on the purple line gives the step by step match algorithm pattern application. Just move it along the algorithm execution line (black-purple) and you’ll see how it will shift the cursor (1.) in the test string and the corresponding one in the central diagram.
The red underline (2.), controlled by the black triangle slider, appears wherever no match is expected. This gives us a clue as to where and why no match happens, thus helping us to improve the target Regex.
Another useful visualization feature is the upper ball slider on the blue line. If we slide it along just before a symbol (in the central diagram or in Regex pattern), then in the bottom test string there will appear a blue marker pointing to all possible positions in our match where we are potentially expecting this symbol. See the image at right.
This 4 minute video tutorial is helpful to get even better acquainted with this tool.
The online Regex makes it possible to copy a permalink for the current Regex and the test string; just hit ‘Permalink’ on the page header and copy the link from the address line.
As for the shortcomings, I mention the lack of named group functionality, and that only a limited number of flags (regex pattern modifiers) are possible for use.
This online visual Regex debugging tool is very useful in composing and altering Regexes on the fly. I think it is a good help for the hugely complicated Regexes markup too.