Regex You Can Read: How It Works (a Syntax and App for Building Regexes)

Regex UCR is to be an app which removes guesswork from regex composing.

Simplified email matching in new visual regex syntax (not for production use; there’s a sensible way to do this)

Keep all the good parts of regex, namely the terseness, depth of functionality, and the fact that it’s widely available. It’s the same regex without the syntax issues or the memorization of special case after another.

The first story about this regex editing design got 87K visits, >400 comments on reddit and hacker news, and a few tweets.

(If you just want to use it already, go here to enter your email and we’ll let you know.)

Input and Editing

When you want to match a literal, you type it. Typed content gets added into a blue box if we are in/near one, otherwise a new blue box gets created.

Three samples of how cursor size varies depending on its location in the structure

The UI provides you with any command when you need it, and guides you through on how to use it. You select the dialect you want, compose the logic, and Regex UCR takes care of the rest.

Consecutive literal characters are concatenated inside a single blue box.

Ctrl+Space Menu

Whenever you press Ctrl+Space, you get a menu. This menu is context dependent: It will present the choices on top that make most sense where the cursor currently is.

In this example we are inside a group so by default it will suggest quantifiers at the top of the list.

We will also show this menu when typing backslash \ , opening parenthesis or bracket ( [ or closing parenthesis or bracket ) ]. Perhaps others, too (full stop, dash). We will prepopulate the search menu with that character in question.

You can just type backslash expressions like you would in traditional regex. You just add an enter key press after finding the command you want in the menu, to confirm the item selected in the menu is indeed what you want. The corresponding literal is also available in the menu, of course.

The menu will immediately narrow down the menu contents when you start typing. You can search both among traditional regexes (presented in grey below title) or the titles, so effectively you can just go ctrl+space and wing it.

There are two cursors, one in each view.

Decimal number matching: All the blue boxes are matched literally against themselves, everything else is functional regex one way or another.

When you move your cursor in visual view or traditional (text) view, you can see the cursor move in the other view, respectively. You can freely edit either view, and immediately see changes in the other.

Any character typed outside the Ctrl+Space menu is treated as a literal. If you want to match * or . you can just type them in the visual view as such. They will appear in a blue box — either creating a new one, or added to an existing one. (Any char and quantifiers are added via the ctrl+space menu)

It’s worth noting that this is not yet another regex generator. The two way live conversion ensures you can simply use this to edit any regex you want. There is no lock-in: You can go back and forth between syntaxes freely.

Give it to me

To get early access perks in our crowdfunding campaign, and to know when you can try this in action, go here to enter your email.

How you can help

Let’s do this together. I mean really together. Listen to what’s in you that wants to become visible. If you think this project needs that, I’d be really happy to hear about it.

Regex UCR will primarily be a web app. In the long term, the goal is to have an IDE plugin as well.

What we most urgently need implementation wise, is a generalizable way of parsing different dialects: Tokenizing them so we can reason about individual symbols, their sequences, and hierarchy. Any suggestions on approaches, libraries and frameworks that might work for this are more than welcome. A parser combinator maybe, since regex itself can’t handle hierarchy? See also: Generating different Regex dialects and Regex UCR: Plans forward — licensing and architecture first steps

Skills in urgent demand

We’re still on the lookout for more people to join us. Particularly, at the moment you would likely need to:

• understand parsing regexes, have ideas on the implementation of the data structures needed, or on generating regexes from the syntax.
• you know React and the JS universe well
• have any experience (or willingness to learn!) doing usability tests, user research, or can see the remaining gaps in the current design spec — and are itching to fill them in
• are skillful with regex itself and can help us gather data about different dialects and how different elements correspond
• have crowdfunding expertise, know video production, or can offer other strategical help
• further down the road, something like community manager and test lead come to mind as well

Contact me to join our Slack channel if you want to work together on this and get write access to our github repository as well. (Pull requests are welcome too — so far we are small enough to grant people direct access as well.) We warmly welcome any help bridging the gap from design to code.

Read more about technical aspects and responsibilities available at: Regex UCR: Plans forward — licensing and architecture first steps

Cheers!

If you liked this, click the 💚 below. It helps others discover this on Medium. Feel free to comment below: Any questions, suggestions or comments are welcome, as always.

Most importantly though, enter your email to be notified when big things happen :) And do contact me to join our Slack channel if you’re interested in working and playing with us.

Update 2017–04–30: switched the first example editing to the simpler email matching example