Use regex-vis.com to visualize regular expressions
You can input a regular expression, regex-vis.com will convert it to a graphical chart. Click/Drag to select a node/nodes in the chart, you can insert a empty node, group nodes, add a quantifier etc.
- Dark mode/Light mode
- Test the regular expression
If you like give me ⭐. If you find a bug, please report the issue. You can also open a new discussion to ask questions about this repository or get help.
a regular expression to a graphical chart
The parser converts a regular expression to the AST(abstract syntax tree). Because of the grammar of regex, the AST of regex almost equals to CST(concrete syntax tree)
The parser is composed of the lexical analyzer and the syntactic analyzer. The lexical analyzer will transfer regex to tokens, and the syntactic analyzer will transfer tokens to AST.
The regular expression is not a programming language, its syntax is very limited. But it's a good practice to write a regex parser. The parser code
The RenderEngine does not refer to the browser's own rendering engine. The RenderEngine input AST, output nodes' layout, contains x, y, width, height. We can render the final chart by the nodes' layout.
Editing the chart
The Generator transfer AST back to the regular expression. I use a DFS to implement it.
Such as the regex
/abc/ and select the node of
abc, then add a
0 or 1(?) quantifier.
If we add a quantifier for
abc directly, the quantifier would impact the char
So in this case, it's necessary to wrap
abc with a non-captured group.
The final output is
You can click the
Samples to view some charts of commonly used regular expressions.
These charts are not real-time rendered. These are static svgs outputed before bundle.
It's an optimization to improve the website performance.
I use esbuild to bundle and export the chart component, then use the API
renderToString of React to generate the html strings and save these.