Regex UCR: Generating different Regex dialects

Olli Savolai
Aug 24, 2016 · 3 min read

How to keep Regex UCR’s UI simple, while supporting pretty much all the features Regex itself supports?

You might want to read Part 1 and Part 2 before this to understand what this is about.

Let’s get started with the simplest possible editing view.

Regex UCR has a default dialect called Simplified Regex, which is the smallest common denominator of all regex dialects.

When there is only stuff that works in all languages, we do not remind the user of the existence of dialects at all, allowing the user to concentrate on task at hand.

Editing existing regex

Ok, let’s say you already have a regex you want to edit. Say, you are identifying a decimal number in Python. Something like -3.53e4, a pretty small number.

Warning when selected dialect doesn’t support all features used

You paste it into the regex (text) area of Regex UCR. Your expression gets evaluated and translated automatically into the visual regex syntax.

We can’t handle named groups in the generic Simple Regex, so the editor

  • highlights unrecognized parts, and

So you select Python in the dropdown.


Incompatibility situation resolved

Ok, now Regex UCR is in Python regex mode. The warning is removed from the UI.

You can now edit either, and the change gets reflected in the other.


Debugging your regex

Now you want to verify your regex actually matches everything you think it does, and none that it shouldn’t. How would you go on doing that?

There is a button on a toolbar that says “Test”. You click on it.

There is field to enter some sample text. Also, you can see a button that says “generate random text that matches”. So you do.

The app generates matches for the regex. In many cases you can see already from this that this isn’t quite what you needed, without having to actually think of different samples yourself. Because producing samples is boring.

Thanks to Byron Houwens and Sam Sullivan for the discussion that led to the design for multiple dialects.

If you think it’s your thing, to make more detailed mockups of how a great regex debugger will work, or even to implement that or the above, please join us!

Contact me to join our Slack channel if you want to work together on this. Our github repository is also now open. So far we have a React-based skeleton UI built. We warmly welcome any help bridging the gap from design to code.

See also: Part 4: Plans forward — licensing and architecture first steps

Main stories about regex UCR: Part 1, Part 2

Usability and being human — interaction reimagined

How do we create positive experiences that encourage learning and creativity? Also: Regex You Can Read (Regex UCR) and related efforts live here. It’s a new visual syntax and UI for regex. It allows humans to concentrate on the actual matching.

Olli Savolai

Written by

Usability, robust empathy. http://savolai.net/

Usability and being human — interaction reimagined

How do we create positive experiences that encourage learning and creativity? Also: Regex You Can Read (Regex UCR) and related efforts live here. It’s a new visual syntax and UI for regex. It allows humans to concentrate on the actual matching.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade