Hi! In this post, I am present to you what I have built to simplify creating regular expressions for JavaScript: Regex Nodes.

Warning: The presented project is still work in progress and some features might be missing or may not work as intended. It does not work on mobile devices. See the github project for more information on which features are planned.

What are Regular Expressions?

Regular expressions are used to find certain patterns inside a given text. For example, it can be used to extract all images from an html page. The way to use regular expressions in JavaScript is to just type a textual representation of the pattern inbetween two slashes:

const regex = /<img.*?>/gim
htmlSourceCode.search(regex)

This code will search the htmlSourceCode for any occurrence of <img followed by the lowest repetition (*?) of any character (.), followed by a >. After the slash, we tell JavaScript to be case insensitive and to look for multiple matches, not just for the first.

The Approach of the Editor

The editor visualizes all components of a regex with a separate "Node".
Those atomic components can be composed by connecting the properties of the nodes. That way, you can compose complex regular expressions
without having to deal with overly complex text lines.

The following image shows the editor with the aforementioned regular expression.

In the center, the white rectangles describe the hierarchy of the expression.
The rightmost node is the top-level operator, which combine the atomic nodes on the left hand side to a single regular expression.

To edit a regular expression, simply visit the online editor, paste the expression /<img.*?>/gim where it says "Add Nodes" at the top, and then click the first suggestion. Be aware that padding spaces in the regular expression will not be ignored and may lead to unexpected results.

To see how this specific regex works, you will also have to edit the example text by clicking the button at the top right and then paste some HTML, as the default example text does not contain any image tags.

Why Nodes?

Nodes are more verbose than a textual regex, but enable you to understand even the most complex expressions. Also, the design of the editor will naturally prevent you from accidentally producing an incorrect regular expression.

This really sets regex nodes apart from other regex tools, where the user must first come up with a regular expression that will be checked afterwards.

Getting Started

As I have not yet done any user experience research on the interface design, I will just list the basic functionality here, in case you're stuck and don't see how to do a specific thing. However, learning by trying before looking things up is what I would recommend.

1. Select a node by clicking with your left mouse button. Selecting a node will display its regular expression at the bottom. You can lock your selection to the currently selected node by toggling the padlock at the bottom left.
2. Move a node by dragging with your left mouse button.
3. Connect or disconnect properties by dragging with your right mouse button.
4. Move the view by scrolling, or by dragging with your middle mouse button.
5. Add a node by clicking into the "Add Nodes" text field and choosing the desired node type. You can also paste a regular expression here.
6. Edit the example text which is displayed in the background by clicking on the button at the top right.

Finally

Thanks for reading! I hope you will find this editor useful for your own regular expressions.

Keep in mind that this editor is still work-in-progress, and I cannot make any guarantees concerning the reliability of the editor. Also, this App does not support mobile devices yet. To see what features are planned, see the github project. Don't hesitate to post an issue on github if something comes to your mind regarding the regex editor.

Have fun!