I'm debugging and menting someone else's JavaScript code at the moment but there's some fiendish RegEx in it. While my knowledge of RegEx is fairly good, it would help to have a reliable visualiser to show each RegEx string as a railroad diagram or something similar.

• I found a plug-in for Eclipse, for use with Java, at this question so I was wondering if there was something similar for JavaScript out there.

• It doesn't have to be a plug-in, though something for Notepad++ would be ideal. I checked via Notepad++'s Plug-in manager but the two RegEx tools I could see there weren't very good.

• A webpage which accepted an expression and produced a diagram would work just as well and would save me having to use JSFiddle so much.

Does anyone know if such a tool exists? Or if there is some trick that I'm missing that can make human parsing of RegEx easier?

I'm debugging and menting someone else's JavaScript code at the moment but there's some fiendish RegEx in it. While my knowledge of RegEx is fairly good, it would help to have a reliable visualiser to show each RegEx string as a railroad diagram or something similar.

• I found a plug-in for Eclipse, for use with Java, at this question so I was wondering if there was something similar for JavaScript out there.

• It doesn't have to be a plug-in, though something for Notepad++ would be ideal. I checked via Notepad++'s Plug-in manager but the two RegEx tools I could see there weren't very good.

• A webpage which accepted an expression and produced a diagram would work just as well and would save me having to use JSFiddle so much.

Does anyone know if such a tool exists? Or if there is some trick that I'm missing that can make human parsing of RegEx easier?

• javascript
• regex
• debugging
• plugins
• visualization

• 2 I use this for all of my regex testing: regexpal. - It shows if you're valid, and what is acceptable and what isn't. I posted as a ment b/c I'm not sure if this is what you're looking for? – adamdehaven Commented Feb 1, 2013 at 16:04
• Thanks. Very neat tool. Even that'll save me some effort in JSFiddle. Feel free to post it up as an answer (with a little explanation for others) and I'll definitely give it an upvote at least :-) Will be interested to see if any other suggestions e in. – guypursey Commented Feb 1, 2013 at 16:10

5 Answers 5

Regexpr generates pretty nice visualizations of regexes. A simple example:

And a more plicated example of a regex which attempts to match HTML tags:

^{(via tutsplus.)}

See regex101. which includes a tester and explainer.

I use this for all of my regex testing: regexpal.

Not technically what you're looking for (maybe see @John Kugelman's answer) but it works nicely to test regEx and display what works/doesn't work accordingly. Simple to use.

Screenshot

You could try Textpression at www.textpression.. It's free to download and use whilst in development. It doesn't specifically support JavaScript right now, but will do on mercial release.

It has a very intuitive way of visualizing regex.

Disclosure: I'm the author

Want some more color?

jex.im

There you can get an image for clipboard like

for Abc ([a-d]+?|\d)$.