Just released a major update for my site. What do you guys think? | Hacker News Reader

Just released a major update for my site. What do you guys think?

regex101.com

161 pointsLindrian77 comments

Hey

I have recently released a new update for regex101 where I pretty much recoded everything; the entire explaination and colorizer engine. They are still not perfect, and I'm not fully satisfied with the code, but its way way better than it was before. I will probably remake it when I get more time on my hands.

A list of all that has been fixed would take too long to write up, but I have added some of the things I have most commonly been asked:

- Changeable delimiters

- Alternating color matches

- Bigger editor

- Wider and more accurate explanations

- Samples on how to use regex (automatically generated)

I am planning on adding more flavors in the future, so you can do live testing and validation of java, javascript, python and perl style regular expressions. I am also trying to create my own debugger (much like the one in regexbuddy). Once again, this will have to be when I get more time on my hands. Currently the only support is for PCRE which is achieved through PHP.

Until then I ask you guys to please tell me what you think of the current features, suggest new ones and please report any bugs you might encounter :).

If you want to help me out with the website, send me a message!

Thanks in advance!

Hopefully not to distract too much from the valuable utility of this tool, but in case anyone else feels that the site design seemed uncomfortably similar to http://rubular.com/ (e.g. the three colors in the welcome box are identical), the site author mentions that regex101 is inspired by rubular in the about page http://regex101.com/about/:

I would also like to thank the creator of rubular for inspiring me to create my own service with extended features. I have from rubular recreated the regex quick-reference table (with some slight modification). The same goes for the welcome popup used on the index page. If there is any concern, feel free to send me an email and I will address the issue immediately.

You are right that they both share the same 3 hex values and border width for the greenish box:

  border: 10px solid #779A73;
  background-color: #CDF3C9;
  color: #283A26;

Though it seems the OP addressed it appropriately in the quote that you mentioned.

I'm not sure if Rubular[1] or your site came first but the design is very similar.

[1] http://rubular.com/

I have written about this in the about & credits pagr. I have also spoken to the author of rubular.

FWIW I find your light design inspired by rubular to be visually superior. The community feature is great however I assumed from the name that it would just be a forum, perhaps a different label would help show its utility - maybe "favourite regex"?

Glad you like the design :). Hmm, something like "Regex library" maybe? Unsure of how to word it properly.

Library sounds about right, maybe?

One interesting way to differentiate would be to allow drop downs for different regex engines. So one for perl, one for python, etc.

I will do something along those lines in the future, as I have written in my main comment in this thread :)

I like it.

How do you enter a tab character in the test string without losing focus of the text field?

When I start typing the regex, the cheatsheet gets pushed below the visible part of the page as the "explanation" section expands itself. It would be nice if the cheat sheet remained next to the regex field as I typed in the regex.

You cant insert a tab character (yet). Ill fix that.

Hmm, you could perhaps minimize the fields you dont need while writing it? Use the [-] buttons

I could minimize some of the fields, but the larger point I should have made is that when I was typing the regex the first time, I was looking at the cheat sheet. The workflow I found myself fall into was:

1. Enter the test string.

2. Look at the cheat sheet and type into the regex field.

3. Look at the matches and test field to see if it was correct.

4. If incorrect, look at the explanation.

5. Go back to (2)

So for me, the default layout didn't handle my step (2) very well. I'm not saying that's the workflow you should optimize the UX for, but it's what mine was.

You're right, I'll look into a smart solution for this. Thanks for pointing it out! I have a very large monitor, I rarely run into problems like these.

There is an inconsistency in naming: you call it "flags" at the top but "options" at the bottom. I think you should also say "Regular expression quick reference" rather than "Regex quick reference" for the same consistency since you use "regular expressions" everywhere else.

Adjusted, thank you!

I was just trying to find this site via google yesterday, and I could not. I'll be sure to bookmark it this time (surprised I haven't already, or maybe I have but couldn't find the bookmark either).

Thanks for making it!

Edit: I did bookmark it, it was just so long ago that it ended up being overshadowed.

Nice, this could be really useful for beginners. I tried the "random regexp" feature and it showed one that used \P<Given> and \P<Middle>, among other things. I have used named capture groups a bit I wasn't aware of these, and was wondering where they came from.

Which leads me to the problem I had with the site.

I was hoping for a way to easily (one click) get to the documentation for each of these. It seemed strange that a given name pattern could work for any human language, so I was trying to work out how this would be done. Eventually I found the tables at the bottom (with Advanced and Tricks tabs) but clicking on the links in there just adds the items to my current expression.. what I was hoping for was a direct link to some docs for the specific item (not a general link to the top level of some huge document).

Hmm, the explanation part does part of what you're asking. However, I don't know of any straight forward documentation that I can link to that will explain each and every one of these tokens. I have just read through pcre.txt many times and implemented stuff from there. If you know a source I can use I will look into it.

Regular Expressions are perhaps my weakest point with regards to programming.

I realize that they are just little sub-dialects that I need to learn the rules of but I've never had a project which required me to take the time to write extensive regular expressions.

On the rare occasion that I do need to use a regular expression I find tools like this to be invaluable.

This tool looks particularly nice.

Community Forum section, online quiz, even IRC placed right within the page!

My favorite feature is definitely the ability to share a regular expression you've created via a link.

Nice work! (also I just followed https://twitter.com/regex101)

I can honestly say in 12 years of coding full time for a living, I've never once used a complex regular expression. It could be my general aversion to complex regexes though, as I find they make code difficult to read, and are usually slower than alternative solutions.

Simple regexes on the other hand, I use all the time.

The version I have implemented, PCRE, is fairly common. It's good starting ground. Goal is to add more flavor-specific support, but thats in the future.

Thanks for the kind words!

I would encourage anybody interested to try out the site's quiz. It starts out easily enough but eventually becomes extremely challenging.

I also really like the community submitted regexes. But, on that note, what's to prevent someone from submitting all of the quiz solutions to the 'community'? Are the submissions occasionally moderated?

I have appreciated this website for a while now. For those who don't know, Lindrian is also often active on #regex on freenode IRC, which is a great place to get feedback on regexes. (Or to just be told many times not to use regexes to parse HTML.)

Thank you for the kind words! I moderate it myself fromtime to time. I hope nobody does something stupid like that; they gain nothing by it.

Re the quiz, in the first answer response it says "Excellent! I guess you have some regex knowledge, so let's get started!". Perhaps you should also add "Click a task below to continue." as it took me a few moments to work out how to continue. I expected that perhaps the "did i get it right" button my change to "continue" or something.

Thats a great idea! I'll work something out.

Looks good, I'm impressed it handles the rfc822 regex fairly well too :)

http://regex101.com/r/fZ6cD5

Hehe yep, it works. It just creates >20000 DOM elements.. But other than that: it works :)

Nice! Just a couple of minor nitpicks:

1. The delay between updating the regex/test text and seeing the result is a little long. I find regex tools much more useful if I can see the results change as I'm typing.

2. I did a simple regex with two capture groups and the second backreference came up red in the matches box. As soon as I see red, I assume there's an error. Might be worth removing those "danger colours" from the list.

Other than that, looking good!

Doesn't fit horizontally on an iPad in portrait orientation.

Not sure why you're being downvoted, I think your comment is relevant when OP is asking for feedback.

You're not just nitpicking some blog template or something.

Well, the redesign looks like it would be much more useful (just from first impressions last time I tried it).

However, this is more of a debugger when you already have some idea how to write a regex to match a particular string. Are there any complete regex builders where you can select components (such as greedy or not, positive or not) when you can't remember the specific syntax?

This is great! I love tools that help you understand tough concepts in a simple, no setup way. We'll definitely include this in our curricula at http://www.thinkful.com/

Would love to talk about other ways to work together as well – drop me a line: darrell@thinkful.com

There are two things I need when it comes to regex:

1. The ability to escape a string when searching using vi: http://www.0x11.net/regex/escaper.py

2. Lots of regex examples with a description of how they work.

The community page gives you examples with the automated explainer they maybe meet your 2. to some extent [or will when the feature has been used more].

Sounds like you have your work cut out for you.

In the quiz, for competitive motivation it would be nice to see if you actually broke the current record on a quiz. Right now, there's no way to tell, whether you just caught up with the current record holder, or whether you've set a new one. ;) Otherwise, great update!

If you're interested in an alternative solution, I personally always use http://regexpal.com/

It's a similar concept, except that the matching is highlighted in the same input field of your target value.

I like it, especially this section http://regex101.com/community/ with commonly used regular expressions submitted by other users. Being able to vote a solution is also nice. Well done overall!

Thank you!

I would like to see regex mapped in url so I have the option to send a regex to someone in this website. It doesn't have to be server side URL mapping. Just push the regex to location hash and let JavaScript parse it back.

You can use permalinks (press the button), which is the preferred way of sharing expressions. Otherwise the following works too: http://www.regex101.com/?regex=...&options=...&text=...&sub=....

Would be nice to have at least a link to a detailed spec of the supported RE syntax, for a not good example, http://perldoc.perl.org/perlre.html

In the about page I mention what version of PCRE is running, and from there you can get to: http://www.pcre.org/pcre.txt

Now you have 102 problems :). Good work, looks like something I would actually use.

Haha, hopefully my website will help you keep regex-related problems to a minimum :).

Something that would be very useful, but that I haven't seen in any of these web-based regex tools, is to list the contents of capturing groups. If you added that, yours would be my goto regex tester.

Not sure if im understanding you correctly but the site does show the content of all capture groups: http://regex101.com/r/nB1bR1

This is awesome. What I'd want most is in the quiz, I'd love to see how others are coming up with shorter regexes than mine. Satisfy my curiosity and competitive spirit.

Hmm, I don't want users to see shorter answers and then modifying their own to get the same length or even shorter (since they didnt do the real work). What about something like being able to see the shortest answer, but after that you are no longer allowed to modify your pattern? Feel free to pitch in if you have an idea of a neat way to do it.

Well, the way I look at it, I don't see a problem with building on other people's attempts. I'm dying to know how anyone's managed to implement (e.g.) 11-byte email validation, and if I can find an even shorter solution, so much the better to help everyone else learn some regex tricks too!

On the other hand, if you're planning on adding something like a public leaderboard of names, then I guess that would change the nature of the game. Glory, instead of learning or personal challenge. And cheating becomes a problem.

You're right.

I managed to mess up some entries of the database, thats why you see some ungodly stuff like 11b email validation. I'll patch it up.

I think your #quickref_links click events need an 'event.preventDefault()' to keep the browser from jumping up to the top of the page when you switch between tabs.

I don't think the problem is the click event sending you to the top of the page, its the fact that the textarea is out of sight and its being modified. The browser will then focus it for you, which scrolls you up. Only way I can think of to solve this would be to make sure the textarea is always visible (even if not for the user), which is more work than its worth I'm afraid.

Excellent job. Wonderful tool. Do you have plans to monetize? (ebook ALA Learn Regex the Hard Way, a mac desktop tool, editor plugins, etc...)

Thank you! Not as of right now, everything I do I release for free given I can still pay for the server bill. I have plans on expanding the website quite a bit though... :)

Pretty good :) But it feels a little sluggish. I'm used to my regex tools displaying feedback with seemingly no delay.

You mean the fact that it doesnt show matches instantly?

Bug report: I entered hi+ and it parses it like (hi)+ instead of like h(i+) (I mean with noncapturing parentheses).

Thank you! Has since been fixed.

It would be great to know a little bit about the internals of the "explanation engine".

The colorizer does most of the grunt work, it tokenizes the regex and colors it properly. The explainer then basically just loops over those tokens and explain them. It's a bit hacked together as it works right now though; but it seems to do the trick. The explainer does some additional error-checking which the colorizer doesn't have enough resources to do as well. Anything in particular you want to know?

Definitely the best regex test (and/or learn) website I have visited so far, period.

Thank you!!

Pretty nice, though would be better to use CodeMirror or Ace instead of textareas.

I have been looking into this, but I know too little about them to make my current scripts work along side one of them. If you can help me out that would be greatly appreciated.

It's quite easy actually, so i can help, is your code on github?

No its not but feel free to send me an email on contact@regex101.com so we can talk privately :)

I liked the 'Your Regular Expression Explained' section.

No info for /u. And why it's not default?

Do you mean its not explained correctly or its not in the quickref? Its not enabled by default because it changes the behavior of many things, for example what \d and \w match. The user has to decide for himself what flags to use.

It's not in quickref. Of course it changes, and it should be default. There are languages other than English.

I'm not sure I agree it should be default; it's not expected behavior. Either way, there are too many flags to add them all to the quickref, I figured I would just show the most common.

Right now, even café is not matched by \w{4}. If this is what you call expected…

Yes, this is explicitly a tool that uses PCRE via PHP. So I'd expect the behaviour to exactly reflect that of the `preg` suite in PHP... which does not use `u` by default.

Sucks on mobile. Needs a responsive design.

Maybe. Or maybe the broad constituency is not on a mobile device. Perhaps this is a tool for someone who is coding. Presumably, someone who is not on a mobile device.

Reply on news.ycombinator.com