Announcing Regex Nodes, a visual editor for Regular Expressions
Tags: javascript, webdev, showdev, elm
Published: 2019-07-30 11:56:29

---
title: Announcing Regex Nodes, a visual editor for Regular Expressions
published: true
description: Visualizing and editing regular expressions in the web
tags: javascript, webdev, showdev, elm
cover_image: https://thepracticaldev.s3.amazonaws.com/i/s5ilpngvwsl0l386mgpg.png
---

Hi! In this post, I am present to you what I have built to simplify creating regular expressions for JavaScript: [Regex Nodes](https://johannesvollmer.github.io/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](https://github.com/johannesvollmer/regex-nodes) 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:

```javascript
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.

[![Filter Image Tags in the "Regex Nodes" Editor](https://thepracticaldev.s3.amazonaws.com/i/akdj0ezvcc4fv8n5uqe1.png)](https://johannesvollmer.github.io/regex-nodes/?expression=LzxpbWcuKj8%2BL2dpbQ%3D%3D)

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](https://johannesvollmer.github.io/regex-nodes/), 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. 
1. __Move a node__ by dragging with your left mouse button.
1. __Connect or disconnect properties__ by dragging with your right mouse button.
1. __Move the view__ by scrolling, or by dragging with your middle mouse button.
1. __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.
1. __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.

{% github johannesvollmer/regex-nodes %}

Have fun!