5 ms·

Regex Vis – regular expression visualizer

62 points by modinfo 4y ago

ChrisMarshallNY 4y ago
That's great! I favorited it. It has worked on all the ones that I tried so far, but I'm not a RegEx wizard. I did share it with a friend that is a wee bit obsessive about RegEx. He’s likely to stress it.
RheingoldRiver 4y ago
This is super cool! Currently https://regex101.com https://regex101.com is where I send people who aren't comfortable with regex and need something to practice with, but I'm gonna start sending them this, too, and I think this is a better tool even. The ability to add multiple test cases and show whether each matches is great. One suggestion for improvement would be to have a visual link between the visualization and the regex, either when you hover/click a component, that part gets highlighted/bolded/underlined in the regex, or even color-coded persistent highlighting (toggleable?) that they share (which regex101 has). Also afaict there's no way to permalink/share test cases.
- mdaniel 4y ago
  I'm sure they'd welcome those comments as issues, since it doesn't appear this was submitted by the repo owner and thus is unlikely to hear your pleas: https://github.com/Bowen7/regex-vis/issues https://github.com/Bowen7/regex-vis/issues They also seem to have 108 forks of it, so it's even possible that your ideas are hiding in one of the other branches: https://github.com/Bowen7/regex-vis/network https://github.com/Bowen7/regex-vis/network
- cassianoleal 4y ago
  > Also afaict there's no way to permalink/share test cases. Whatever changes I make on the screen, the URL seems to get updated automatically. Does that not work as a permalink?
  - crtasm 4y ago
    that's the regex, anything added to the Test tab on the right isn't included.
asicsp 4y ago
Looks great, though wasn't sure about which regex flavor it supports. Seems JS since variable lookbehind is supported and GitHub repo mentions Typescript. https://www.debuggex.com/ https://www.debuggex.com/ is another such resource which supports JS/Python/PCRE.
- mdaniel 4y ago
  https://www.debuggex.com/pricing https://www.debuggex.com/pricing wow, I think that's the first time I've ever seen pricing for something like this, let alone an "Enterprise" plan. That's actually doubly weird since they say it's the team behind ParseHub so they already have a day job with a stream of income
- rzmmm 4y ago
  Debuggex looks interesting. I've never seen regex library/tool before which shows the mismatching location in the input string. I wonder how one could do the same with python/javascript or other programming languages?
  - mdaniel 4y ago
    I'd guess it's building the FSA then running it but instead of yes/no, emitting the last matched character when in a failed state. I believe that's a common(?) trick for parsers, so it's plausible they do it for regexes As for why "standard" libraries don't offer it, I'd guess it's a development-time concession that production usage doesn't require; python specifically does ship batteries included with the tooling required to make such a thing, but appears to shop just shy of cooking the actual FSA >>> re.sre_parse.parse(r'^(([hH]acker)[ ]?([nN]ews|newsletter))$') [(AT, AT_BEGINNING), (SUBPATTERN, (1, 0, 0, [(SUBPATTERN...
Akronymus 4y ago
The site seems to not support posessive quantifiers. Other than that, it looks pretty nice. Altough, personally I still prefer regex101 as the explanation is in text form.
pkrumins 4y ago
I wish someone would build a visualizer/teaching tool for structural regular expressions. They are much more powerful than regular regular expressions.
- mdaniel 4y ago
  The paper <https://doc.cat-v.org/bell_labs/structural_regexps/se.pdf https://doc.cat-v.org/bell_labs/structural_regexps/se.pdf> is pretty hand-wavey; do you have a tl;dr of what makes them awesome and a tool (aside from the archived g-code repo) that you use to run them?
  - pkrumins 4y ago
    No hand waving. Structural regular expressions are starting to get popular just in the last couple of years. They're getting integrated in text editors and other tools. Take a look at this talk for concrete examples from the Vis text editor: https://www.youtube.com/watch?v=y41MyOrPt8Q https://www.youtube.com/watch?v=y41MyOrPt8Q. Also Kakoune text editor defaults to structural regular expressions in the search https://github.com/mawww/kakoune https://github.com/mawww/kakoune.

62 points by modinfo 4y ago

That's great! I favorited it. It has worked on all the ones that I tried so far, but I'm not a RegEx wizard. I did share it with a friend that is a wee bit obsessive about RegEx. He’s likely to stress it.

RheingoldRiver 4y ago

This is super cool! Currently https://regex101.com https://regex101.com is where I send people who aren't comfortable with regex and need something to practice with, but I'm gonna start sending them this, too, and I think this is a better tool even. The ability to add multiple test cases and show whether each matches is great. One suggestion for improvement would be to have a visual link between the visualization and the regex, either when you hover/click a component, that part gets highlighted/bolded/underlined in the regex, or even color-coded persistent highlighting (toggleable?) that they share (which regex101 has). Also afaict there's no way to permalink/share test cases.

mdaniel 4y ago
I'm sure they'd welcome those comments as issues, since it doesn't appear this was submitted by the repo owner and thus is unlikely to hear your pleas: https://github.com/Bowen7/regex-vis/issues https://github.com/Bowen7/regex-vis/issues They also seem to have 108 forks of it, so it's even possible that your ideas are hiding in one of the other branches: https://github.com/Bowen7/regex-vis/network https://github.com/Bowen7/regex-vis/network
cassianoleal 4y ago
> Also afaict there's no way to permalink/share test cases. Whatever changes I make on the screen, the URL seems to get updated automatically. Does that not work as a permalink?
- crtasm 4y ago
  that's the regex, anything added to the Test tab on the right isn't included.

asicsp 4y ago

Looks great, though wasn't sure about which regex flavor it supports. Seems JS since variable lookbehind is supported and GitHub repo mentions Typescript. https://www.debuggex.com/ https://www.debuggex.com/ is another such resource which supports JS/Python/PCRE.

mdaniel 4y ago
https://www.debuggex.com/pricing https://www.debuggex.com/pricing wow, I think that's the first time I've ever seen pricing for something like this, let alone an "Enterprise" plan. That's actually doubly weird since they say it's the team behind ParseHub so they already have a day job with a stream of income
rzmmm 4y ago
Debuggex looks interesting. I've never seen regex library/tool before which shows the mismatching location in the input string. I wonder how one could do the same with python/javascript or other programming languages?
- mdaniel 4y ago
  I'd guess it's building the FSA then running it but instead of yes/no, emitting the last matched character when in a failed state. I believe that's a common(?) trick for parsers, so it's plausible they do it for regexes As for why "standard" libraries don't offer it, I'd guess it's a development-time concession that production usage doesn't require; python specifically does ship batteries included with the tooling required to make such a thing, but appears to shop just shy of cooking the actual FSA >>> re.sre_parse.parse(r'^(([hH]acker)[ ]?([nN]ews|newsletter))$') [(AT, AT_BEGINNING), (SUBPATTERN, (1, 0, 0, [(SUBPATTERN...

Akronymus 4y ago

The site seems to not support posessive quantifiers. Other than that, it looks pretty nice. Altough, personally I still prefer regex101 as the explanation is in text form.

pkrumins 4y ago

I wish someone would build a visualizer/teaching tool for structural regular expressions. They are much more powerful than regular regular expressions.

mdaniel 4y ago
The paper <https://doc.cat-v.org/bell_labs/structural_regexps/se.pdf https://doc.cat-v.org/bell_labs/structural_regexps/se.pdf> is pretty hand-wavey; do you have a tl;dr of what makes them awesome and a tool (aside from the archived g-code repo) that you use to run them?
- pkrumins 4y ago
  No hand waving. Structural regular expressions are starting to get popular just in the last couple of years. They're getting integrated in text editors and other tools. Take a look at this talk for concrete examples from the Vis text editor: https://www.youtube.com/watch?v=y41MyOrPt8Q https://www.youtube.com/watch?v=y41MyOrPt8Q. Also Kakoune text editor defaults to structural regular expressions in the search https://github.com/mawww/kakoune https://github.com/mawww/kakoune.