Regex Tester 2.0

Finally! My massive overhaul of the regex testing page has been deployed. Screenshot time!



So, the big crux of this was the introduction of real-time highlighting of matches, as you type, and where you typed them. I think it's really cool, especially since it's just straight up HTML, CSS and JavaScript.

The illusion is that spans of text within the input box are being styled, but that's not really possible. It's actually a textarea with a transparent background and a div carefully positioned behind it. The text in the textarea is replicated to the div, perfectly lined up. Then when I highlight text in the div, it shows through and makes it look like text in the textarea is being highlighted.

Of course, the devil is in the details. The whole thing requires pixel-perfect accuracy, and even the slightest nuances, like how text wraps in different browsers, had to be accounted for. It was mind-numbingly frustrating at times. On that note, it sadly does not work in Opera. Sorry, Opera users. I might fix it one day, but no promises.

Ajax is used to get fresh results anytime input is changed or info needs to be loaded for a tab. Clicking a tab does an ajax call immediately (and caches the results), but the input fields will wait 0.5 seconds before making an ajax call. This prevents a ton of unnecessary requests from being made if someone is typing really fast.

I also made some conceptual UI changes. I got rid of the match/replace/split "mode" concept. Doing a replace is now presented as a toggle option, and splits are shown in their own tab. I think this is more intuitive, and it doesn't force the user to pre-plan what type of data they want.

Alright, wrapping up.

This is the most complex UI (behind the scenes) that I've ever made. But if I did it right, it won't even occur to people using it. It'll just flow.