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.
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
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.
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.
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.
- 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.
- Move a node by dragging with your left mouse button.
- Connect or disconnect properties by dragging with your right mouse button.
- Move the view by scrolling, or by dragging with your middle mouse button.
- 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.
- Edit the example text which is displayed in the background by clicking on the button at the top right.
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.
If your regular expressions are complex enough to give this editor relevance you probably should consider not using regular expressions, haha.
One of the problems with regular expressions is that they get quite messy very quickly. Operator precedence is not always obvious and can be misleading Nodes, on the other hand, are a visual hierarchy. A text-based regex cannot simply be broken into several lines or indented because that would alter the meaning of the expression.
The other major benefit of nodes is that the editor will prevent you from producing invalid expressions. Other regex editors analyze the possibly incorrect regular expression that the user has come up with. The node editor will allow you to enter your intention and generate a correct regular expression.
In addition, nodes…