Support visual regex graphic?

[msberends]

Hi!

Though I like any initiative to make regular expressions more convenient to use, I find most solutions to lack a visual understanding of the regex itself. Textual explanations of regular expressions don't really cut it IMHO. Probably the best source for visualising regex is Debuggex, which is unfortunately down with a gateway error half of the time. Would it be possible to include (something similar to) their awesome visual graphic as perhaps a new tab to your interface?

What I mean is this:

# example regex for validating email adresses, quite hard to read
^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$

Output by Debuggex (which is mainly powered by their static/js/main.js):

If you want to replace or extract, say, the domain, you can immediately tell that you're looking for group 2 (\\2). Might be obvious in this case, but for more complex expressions, this really matters and can save a lot of time.

How awesome would it be, if your Shiny app could convert this:

# example regex for matching IP addresses
^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$

into this:

😄

[gadenbuie]

This is a great idea and I'd love to add something like this to the app. Unfortunately Debuggex is not an open source library, so we can't use it for this kind of feature. If you happen to encounter an open source JavaScript library that draws railroad diagrams for regex, I'd certainly be interested to hear about them. I looked briefly today and didn't find any obvious candidates.

[msberends]

I see, I guess it’s their greatest and primary (and non-free) feature then. I couldn’t find an alternative either…