Pretty! I had wanted to make something like this, but one feature I thought of and you didn't do: For the entered regexp, generate 20 random matches and show them to me.
Use case for this feature: You encounter an undocumented regexp in someone else's code and want get a few quick examples of what it matches.
Since I'm usually starting with a bunch of data I want to parse/match/chop, I like going the other way - pasting a couple of lines into Patterns ( http://krillapps.com/patterns/ ) and tweaking my expression until it looks right. This would be a useful addition to help debug in place.
For the uninitiated, there's an isomorphic relationship between regular expressions (not PCREs which are way more complicated) and finite state automata proving that if you have a regexp you can generate a FSA for it, and visa versa.
What we have here is a system that generates a graph of the finite state automaton for any given regular expression.
Neat project, misleading headline.
edit: let me add more constructive comments. What is useful about things like rubular (http://rubular.com/ ) is the ability to see how a Regexp behaves with a given input. Where a finite state chart can be useful is giving users a better impression of the internal workings of a particular regular expression. Where rubular can indicate where a match can be found, it would be cool to have a tool like this if you can show the path a particular input would take (and possibly fail out on) through a given regular expression.
I disagree. It could look better, but I fail to see how a graph is not a visualization (?)
Quite useful to show junior devs who are usually afraid of RegExp. Example from jQuery/Sizzle's: http://cl.ly/image/321F0E2B222o (^ and $ removed since it's failing to parse)
Sorry, but how is that not a visualization? If you're learning regular expressions that's about the best thing you could possibly 'see', even though it doesn't show matches for specific input. And I do actually think it's beautiful. I pasted in a huge regex and was delighted at the output.
This type of useless comment is why I tend to avoid HN for periods at a time. Congrats, you've shown the world you know what "isomorphic" and "FSA" means, but did you initially bring anything constructive? No. You had to edit in things barely constructive because your impulse was to tear down rather than build up.
> Neither beautiful nor a visualization really.
This is the least helpful thing I can imagine. "Here's a beautiful regex visualizier" "LOL NO IT'S NOT". Geez.
> This type of useless comment is why I tend to avoid HN for periods at a time.
There's useless pedants like this all over the Internet. You should probably wear a hat.
I'd agree if this were the top two comments without many disagreeing replies or down-votes.
I see this comment in down-voted grey, somewhere way down the page and assume a lack of social skills, bad-morning-before-coffee-grumps.
Or simply Internet Asshat Background Radiation, it's everywhere. Legends say you can trace its echos back to the First Flame from which the Internet was born.
My only suggestion is that it would be nice to have each regex diagram be separately addressable, by either putting the regex as a query param and yielding a raw image/svg/whatever, or by using a shortened url like a gist after saving.
One of my co-workers submitted the nested groups issue to github, so I'll definitely look into that one.
I'm also going to look into the RFC822 one as well (even though rendering something that size isn't really a goal). I suspect I might not be handling massive inputs sufficiently and want to make sure to address that.
You're probably lucky it didn't render though...that SVG would be non-trivial...
As an aside. I quit using regex to validate email addresses a while ago. Part of it is that a regex that large is simply incomprehensible and very difficult to maintain and fix if something is broken. The best solution, in my opinion, is a state machine based analyzer that checks the email address character-by-character and confirms compliance with RFC5322. This would also include checking DNS for MX records (which might require following CNAME to find it).
The thing is, email input validation is only one use case for regex and emails. Here's a more sinister one: you want to build a web scraper looking for emails to add to your spam list. Put a bit more generically, you need a script that can import email addresses from a broad and unknown host of formats, and it is impractical to condition the data beforehand.
I agree that the value derived from email validation for something like a new account registration is almost nil. Just do something like an email verification round trip, which not only validates the email could be real, but also provides assurance that the user has control of the email address used.
Note: My last name is O'Kelley, which is a bit of a pain when it comes to poorly designed computer services. Some sites will strip the ' and others will escape it so that I become Mr. O\'Kelley. The worst I've seen is that my school used my complete last name in my email address, so most sign up forms refuse to even try to accept it, even though it is a valid email address. It can be a pain if I need to use my .edu address for academic discounts or verification.
No validation = Gone. You lost them. You can't email them for a correction.
With validation = You catch the issue before the visitor leaves and you ask them to fix it.
Sure, it doesn't verify the 1 to 1 relationship between the email and the person. That requires a round-trip verification. I get it. At least you ensure that it isn't all garbage-in to begin with.
The other aspect of email verification is that you don't have to choose to bug the user with the results. Depending on what it is, if someone enters an obviously junky address you can simply tag that email as potential crud in your database. Someone would then manually look at these every so often for cleanup or re-categorization.
I don't like the idea of looking signups or customers in a transaction where both parties are interested in transferring the information accurately. That's a use-case where validation works well.
Now, regarding your last name. The issue is cause by programmers who simply go around grabbing code off the internet without vetting it in any way. There are email "validation" regex expressions out there that are horribly wrong, yet people post them on blogs and others use them without question. It's unfortunate.
With an effective maximum URL length of 2000 characters, you'd be stuck with a regex limit of around 1300 characters once you take into account the overhead of base64 encoding.
I'm pretty sure this webapp isn't capable of rendering any regex with 1300 character anyway (or if it could, the client couldn't handle that much SVG). I don't expect URL length would be the limiting factor here.
I think this would be quite valuable -- provide a second input for sample text and highlight the path taken. Bonus points for figuring out a way to handle multiple sample inputs, showing capturing group output, etc.
Hello, I'm the creator of this (trevmex is one of my co-workers).
I just want to thank everyone for the feedback so far, I am looking into the issues that have been brought up (they'll have to wait until this evening to be fixed though...I have a day job).
You should build a tool that is the inverse of this. Let people build regular expressions by creating the visual diagram (some sort of click and drag GUI).
I've always wondered why there doesn't already exist such a tool. Regex strings are so opaque and hard to read. We can't really fix that for code (short of building objects), but what we could fix is a better way to write them.
A graphical tool to create them, built of units instead of just strings, and the output could still be a regex string.
A question though: a lot of people seem to encounter issues/50x errors with the server-side calculation of the regexp. Why not have a client-side script to interpret the regexp?
Would save server ressources and wouldn't limit the user to server capacity to interpret more complex regexps.
To try it out, I made up the regex "car[pet] cleaner", but what I really meant was "car(pet)? cleaner". When I visualized it, I instantly noticed the bug. It's an indicator that this can turn out to be very useful.
Interesting concept. As with all regex related online tools, it is important to test exhaustively before trusting it.
Real-time character-by-character output would be important. If you are working on a long regex expression real-time output can help you think like the FSA and see how it behaves.
If you remove the "?" from the regex you'll get different results.
One version selects all anchor tags individually and make a selection group of their contents and the other version ends-up selecting everything between the first opening anchor tag and the last closing anchor tag into the selection group except for "<" characters.
The graph in Regexper does not show any difference between the two expressions even when any one of these forms is used:
Also, please change the textbox to a fixed width font.
In addition to that, regex authoring tools, ultimately, are only useful if you can also enter some input text and see the result, preferably in real-time.
Just a thought- on the page if the author showed a few example regexes that would be really useful. Rubular does a great job of having a 'key' at the bottom, so I don't have to remember (or look up) anything.
131 comments
[ 4.6 ms ] story [ 209 ms ] threadUse case for this feature: You encounter an undocumented regexp in someone else's code and want get a few quick examples of what it matches.
For the uninitiated, there's an isomorphic relationship between regular expressions (not PCREs which are way more complicated) and finite state automata proving that if you have a regexp you can generate a FSA for it, and visa versa.
What we have here is a system that generates a graph of the finite state automaton for any given regular expression.
Neat project, misleading headline.
edit: let me add more constructive comments. What is useful about things like rubular (http://rubular.com/ ) is the ability to see how a Regexp behaves with a given input. Where a finite state chart can be useful is giving users a better impression of the internal workings of a particular regular expression. Where rubular can indicate where a match can be found, it would be cool to have a tool like this if you can show the path a particular input would take (and possibly fail out on) through a given regular expression.
Quite useful to show junior devs who are usually afraid of RegExp. Example from jQuery/Sizzle's: http://cl.ly/image/321F0E2B222o (^ and $ removed since it's failing to parse)
> Neither beautiful nor a visualization really.
This is the least helpful thing I can imagine. "Here's a beautiful regex visualizier" "LOL NO IT'S NOT". Geez.
There's useless pedants like this all over the Internet. You should probably wear a hat.
I'd agree if this were the top two comments without many disagreeing replies or down-votes.
I see this comment in down-voted grey, somewhere way down the page and assume a lack of social skills, bad-morning-before-coffee-grumps.
Or simply Internet Asshat Background Radiation, it's everywhere. Legends say you can trace its echos back to the First Flame from which the Internet was born.
My only suggestion is that it would be nice to have each regex diagram be separately addressable, by either putting the regex as a query param and yielding a raw image/svg/whatever, or by using a shortened url like a gist after saving.
Very nice work.
Also, this would be a very useful tool in a Formal Automata class.
`/[^0-9^\+]+/` -> `/[^0-9\+]+/` # Thought that I needed to negate "+" as well.
http://ex-parrot.com/~pdw/Mail-RFC822-Address.html
and the server 500'd. Just joking, it's a very good tool.
P.S. it crashed with three nested groups (((a*)))
I'm also going to look into the RFC822 one as well (even though rendering something that size isn't really a goal). I suspect I might not be handling massive inputs sufficiently and want to make sure to address that.
You're probably lucky it didn't render though...that SVG would be non-trivial...
I agree that the value derived from email validation for something like a new account registration is almost nil. Just do something like an email verification round trip, which not only validates the email could be real, but also provides assurance that the user has control of the email address used.
Note: My last name is O'Kelley, which is a bit of a pain when it comes to poorly designed computer services. Some sites will strip the ' and others will escape it so that I become Mr. O\'Kelley. The worst I've seen is that my school used my complete last name in my email address, so most sign up forms refuse to even try to accept it, even though it is a valid email address. It can be a pain if I need to use my .edu address for academic discounts or verification.
No validation = Gone. You lost them. You can't email them for a correction.
With validation = You catch the issue before the visitor leaves and you ask them to fix it.
Sure, it doesn't verify the 1 to 1 relationship between the email and the person. That requires a round-trip verification. I get it. At least you ensure that it isn't all garbage-in to begin with.
The other aspect of email verification is that you don't have to choose to bug the user with the results. Depending on what it is, if someone enters an obviously junky address you can simply tag that email as potential crud in your database. Someone would then manually look at these every so often for cleanup or re-categorization.
I don't like the idea of looking signups or customers in a transaction where both parties are interested in transferring the information accurately. That's a use-case where validation works well.
Now, regarding your last name. The issue is cause by programmers who simply go around grabbing code off the internet without vetting it in any way. There are email "validation" regex expressions out there that are horribly wrong, yet people post them on blogs and others use them without question. It's unfortunate.
Suggestions
1) it would be really nice if you could allow the user to share a regex with a friend. IE http://www.regexper.com/shared/some_unique_slug will display my saved regex
2) Add a Favicon
Great work thanks for creating this
http://cl.ly/image/3q0B2X1F3i1H
http://cl.ly/image/171f172x0P1M
also how do you put in the case insensitive flag?
I just want to thank everyone for the feedback so far, I am looking into the issues that have been brought up (they'll have to wait until this evening to be fixed though...I have a day job).
A graphical tool to create them, built of units instead of just strings, and the output could still be a regex string.
A question though: a lot of people seem to encounter issues/50x errors with the server-side calculation of the regexp. Why not have a client-side script to interpret the regexp?
Would save server ressources and wouldn't limit the user to server capacity to interpret more complex regexps.
Next level would be to turn this around and build a (nice) visual regexbuilder. The would be fing nice.
Real-time character-by-character output would be important. If you are working on a long regex expression real-time output can help you think like the FSA and see how it behaves.
Here's an example of this tool failing:
http://gskinner.com/RegExr/?339m7or
http://rubular.com/r/pCXZs0DnSS
take your pick, same results.
If you remove the "?" from the regex you'll get different results.
One version selects all anchor tags individually and make a selection group of their contents and the other version ends-up selecting everything between the first opening anchor tag and the last closing anchor tag into the selection group except for "<" characters.
The graph in Regexper does not show any difference between the two expressions even when any one of these forms is used:
It looks like the flags are not being processed.Also, please change the textbox to a fixed width font.
In addition to that, regex authoring tools, ultimately, are only useful if you can also enter some input text and see the result, preferably in real-time.
Other than that, it's an interesting concept.
http://search.cpan.org/~dconway/Regexp-Debugger-0.001011/lib...
That's the documentation for using the module in your code. If you're interested in the standalone tool, you'll want rxrx:
http://search.cpan.org/~dconway/Regexp-Debugger-0.001011/bin...