4 ms·

Regex is one of the things I prefer to visualize /^[a-zA-Z0-9.!#$%&’+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)$/ Vs. https://regexper.com/#%2F%5E%5Ba-zA

Regex is one of the things I prefer to visualize /^[a-zA-Z0-9.!#$%&’+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)$/ Vs. https://regexper.com/#%2F%5E%5Ba-zA-Z0-9.!%23%24%25%26%E2%80%99*%2B%2F%3D%3F%5E_%60%7B%7C%7D~-%5D%2B%40%5Ba-zA-Z0-9-%5D%2B%28%3F%3A%5C.%5Ba-zA-Z0-9-%5D%2B%29*%24%2F https://regexper.com/#%2F%5E%5Ba-zA-Z0-9.!%23%24%25%26%E2%80...

tabtab 8y ago
That's pretty cool. Thanks!
wvenable 8y ago
I had slightly more difficulty understanding the diagram than the regex string. But then I'm pretty fluent in regex and that visual representation was new to me. The big advantage I can see is isolating the visual noise. I'm now surprised that we don't have syntax coloring for regex built into our editors...
- Retra 8y ago
  Syntax coloring for regex adds noise. When you're reading the non-regex code, having rainbow strings interspersed is not helpful. The best way to approach this problem is to build your regexes in a dedicated regex building environment and then move them into your code at text. Integrating them in-line is not great. (But some people love IDEs, so maybe if you click on a string and have it open up a regex editor...)
  - wvenable 8y ago
    The issue with that regex and others I've used is you might be matching on characters that match regex control characters. In that case, it would be nice to know if you're looking at a control character or a properly escaped value. Two colors would be sufficient. But I agree a full regex builder sort of makes that entirely moot.
bleezy 8y ago
That's such a weird way to represent the +, wouldn't it be better to say 'One or more of' or 'At least one of' instead of 'One of' with the loop? I don't see the value of the loops in that expression.
anentropic 8y ago
I would rather see the regex expanded to more verbose pseudo-code than a weird flowchart

tabtab 8y ago

That's pretty cool. Thanks!

wvenable 8y ago

I had slightly more difficulty understanding the diagram than the regex string. But then I'm pretty fluent in regex and that visual representation was new to me. The big advantage I can see is isolating the visual noise. I'm now surprised that we don't have syntax coloring for regex built into our editors...

Retra 8y ago
Syntax coloring for regex adds noise. When you're reading the non-regex code, having rainbow strings interspersed is not helpful. The best way to approach this problem is to build your regexes in a dedicated regex building environment and then move them into your code at text. Integrating them in-line is not great. (But some people love IDEs, so maybe if you click on a string and have it open up a regex editor...)
- wvenable 8y ago
  The issue with that regex and others I've used is you might be matching on characters that match regex control characters. In that case, it would be nice to know if you're looking at a control character or a properly escaped value. Two colors would be sufficient. But I agree a full regex builder sort of makes that entirely moot.

bleezy 8y ago

That's such a weird way to represent the +, wouldn't it be better to say 'One or more of' or 'At least one of' instead of 'One of' with the loop? I don't see the value of the loops in that expression.

anentropic 8y ago

I would rather see the regex expanded to more verbose pseudo-code than a weird flowchart