Explaining Patterns and Matches in RegExr

RegExr 2.0 was released a little over 2 years ago. If you haven’t used it, it is a great way to test, preview, and share Regular Expressions. We’re committed to updating and improving RegExr, and in January we quietly pushed out some features to help inspect and explain patterns.

Check out RegExr here.

The New “Tools” Bar

Initially, RegExr only had one tool, the “substitution” panel, which let users show sample text with matches substituted using an expression. It was hidden by default, unless a pattern included a substitution expression. This tool has been renamed “replace”, and is now part of a larger “tools” bar, which we hope to continue growing in the future. In the meantime, it has a few other useful tools that I’ll describe below in more detail.

Replaces the old substitution panel

Replaces the old substitution panel

A List of Matches

An often-requested feature, the “list” panel shows just the list of matches, which can be customized with an expression. This provides a quick look at each full pattern match, as well as individual capture groups per match.

Shows a list of matches

Shows a list of matches

Details of Each Match

The match details was previously only discoverable by rolling over the match in the text panel at the top. A tooltip provided details such as the match text, the position in the text, and each capture group.
RegExr Details Tooltip

This works great for small matches, but could get unmanageable when matches had a lot of text or groups. The new panel shows a larger scrollable area and previews any match when it is clicked on. This also provides the opportunity to surface more information, such as the match number, length, and can more easily be selected and copied.

The new panel is larger and has more details

The new panel is larger and has more details

A Visual Explanation

Definitely the most requested feature is a better way to visualize a pattern, other than the text highlighting that RegExr has used since day one. While some tools have taken a very visual route, with a flow-chart-like diagram, RegExr has added a very useful hierarchical table, which breaks down the pattern into its components, and explains each one. We believe this highly-descriptive format is a great way to explain the pattern.

An easy to read breakdown of the pattern

An easy to read breakdown of the pattern

Other Stuff

This latest release also has a ton of bug fixes, and we removed the reliance on Flash for copy/paste. If you are the curious type, check out the RegExr repository in GitHub for a full history of changes. RegExr is open source, so we hope you will poke around, fork it, and maybe even make contributions of your own!

We have a rough internal roadmap for other features, such as RegExp flavours other than JavaScript (such as PHP), so stay tuned. If you have any other suggestions or reports, feel free to open an issue. We love community feedback and want to keep evolving RegExr to meet everyone’s needs.

Lanny McNie

As the dev mgr, Lanny oversees the technical day-to-day details of production and makes sure things get out the door.

@astrostyle

2 Comments

  1. Hi
    I found THE link to your regexr in the book
    Introducing Regular Expressions 🙂
    It used V1: it is ok.

    Is ther an off-line version (files for browser) for V2 ?

    Thank you

    Julian

  2. Great tool for learning how to RegEx, thanks for sharing this.

Leave a Reply

Your email address will not be published. Required fields are marked *