Hacker News Reader

Comment by jasode | Hacker News Reader

Unfortunately, RegExr does not color-code the different capturing groups.

For example, replace the RegExr sample regex with "([A-Z])\w+\s\w(\d.\d)" and compare[1][2] its color coding capability to the other regex helpers.

The other sites such as regex101.com & debuggex.com will delineate the capture groups within the matched text using different colors. This is very helpful for complex captures because making the boundaries visible can reveal bugs in your thinking of what substrings the regex is actually capturing.

(I don't intend to be negative. If capture group color-coding is an easy coding enhancement for RegExr, consider my comments as mentioning a minor nit.)

[1]https://regex101.com/r/eB5jY1/1

[2]https://www.debuggex.com/r/mci3WLNmHGTEatf6

(couldn't find a way to enable /g global on debuggex.com (even tried PCRE option) but color boundaries still show up on the 1st capture group)

View on HN

Just wanted to chime in and give my recommendation for regex101.com that parent links to. This is by far the best regex "composer" I have ever used, on or offline.

Yup. regex101.com is really awesome and has been a time saver for me many times.

this seems incredibly easy to add given what they're done - just send a note to the author. I can't imagine how it wouldn't take seconds to implement.

It is actually true for PCRE (PHP), Python, and and a bit for non-global Javascript regex. For global matches in JS it is, I dare to say, incredibly difficult, if not impossible. I haven't seen visualised submatches in JS anywhere. I'd be happy to be mistaken and corrected.

So go on, try it right away :] I think it might be possible to get it done with breaking original regexp into group tree and look what each part did on concrete match from global search using non-global match on local instances. You'd need own regex parser and watch out for deep nesting.

Then I think I misunderstood what jasode was asking. Specifically, the example (our link) already names groups if you hover over matching text (group #1, etc) - I thought they were just asking for the highlight color to correspond to the group # listed.

Thanks for mentioning the tooltip popups. I didn't realize RegExr used mouseover/hover events on the matching text since the other regex sites don't do that. (It seems like non-obvious UX/UI but I now notice that the bottom left corner does say "Roll over a match or expression for details" -- but who reads the instructions?!?! Nobody's got time fo 'dat.)

Nevertheless, I prefer explicit color-coding highlighting the boundaries instead tooltips displaying the offset numbers.

yes, I only knew about the hovering because of the instructions, which I did read. FWIW, my reaction was it would probably be better if they were all visible at once, who has time to hover over stuff.

anyway since they have the logic to already know what to put in the tooltip, making that number determine a color seems like it would be simple, almost as simple as appending it to the tooltip. (if indeed that's all that's missing.)

email the author your suggestion :)

Interesting, somehow I just instinctively moused over the text when I first visited the page. Another example of the subjectivity of UX and need for UI to be explicit and versatile I guess.

Author of Debuggex here.

Debuggex actually has the /g flag always enabled (the example above happened to have just one match), and it works for JS [1]. Groups for JS are indeed quite tricky. However, they come for free if you implement state visualization, since you need your own regex engine to do that (and can use said engine for the position of groups).

[1]: https://www.debuggex.com/r/wSCkdE0_MNrysz4x

In my examples, it looks like debuggex didn't match "\s" to newline in "...Z\n0..." but regex101.com does.

I don't know if that behavior for not matching newline matching is desirable since "\s" is supposed to include [ \t\r\n\f]. (See [1]) In any case, there doesn't seem to be an option in debuggex to make it behave like regex101 for my specific example.

[1]http://www.regular-expressions.info/shorthand.html

Ah, you're likely on a Windows machine. Debuggex will terminate lines depending on your system. So you would need \s\s to match both \r and \n

Interesting. That's very subtle behavior. (Especially since it sometimes fools one into thinking /g option is not enabled when in reality, it's a CR+LF issue.)

I'm not saying your site's interpretation of Windows CR+LF is "wrong" but the other 5 online[1] regex testers don't behave that way on Windows Chrome browser. I also tested the regex and target text on desktop JGSoft RegexBuddy[2]. None of those required "\s\s" instead of "\s".

Debuggex at the least, is very idiosyncratic since the majority of the other testers don't treat CR+LF that way.

[1]regex testers tried with "([A-Z])\w+\s\w(\d.\d)" on Windows:

http://regexr.com/3b22q

http://regviz.org/

http://www.rexv.org/

https://regex101.com/r/eB5jY1/1

https://www.debuggex.com/r/mci3WLNmHGTEatf6

[2]http://i.imgur.com/t2L04mO.png

(http://www.regexbuddy.com/)

Neither choice is great (the other ones that I've tried auto-convert \r\n to \n so it's impossible to test a \r\n string). I don't think there's anyone in particular that's at fault, \r\n causes a messy set of problems.

Reply on news.ycombinator.com