Learning regular expressions with immediate connection
A regular expression is a sequence of characters that specifies a search pattern in text, as programmers we encounter them from time to time. They are mostly used for validating, searching or splitting stuff, they are very easy to start with but difficult to master. In the beginning, regexes will look interesting but when the pattern gets harder, they become hard to imagine and eventually appear cryptic and uninteresting. So we either forget about them once we are done with the task and go back to our regular work and face them later at the same level of difficulty.
Figure 1: A simple regular expression to match an email address
Until recently, I used to blame myself for not mastering it. Even though the experience of writing complex regular expressions is bitter, we still love them for their compactness and elegance. After a long time, my experience of writing regular expressions changed from bitter to pleasant: With the right tooling, regular expressions can be fun to write.
Few weeks ago, I had to write a small regular expression to extract all double-quoted strings matching with certain pattern from a JS file, the extra difficulty came from the format of the double quote, it can either be " or \x27 (it is because the file was generated by google closure compiler and for the production build, the strings were wrapped with“ and for development build with \x27 ).
Since the pattern has a lot of escape characters, it is not easy to visualize it by pure thinking. So I started to look for a tool which can validate the regex and give feedback quickly. I use Intellij Idea and it has regular expression search ( It is mostly used for regex based find and replace, which also highlights the match results) and decided to use it as my interactive regex validator.
Here is a screencast of the result
This is how it turned out, since the IDE gave immediate feedback, I was able to adjust the pattern and quickly come up with the pattern I wanted, and it was fun too. The power of interactive tools is that “One could try to move towards the expected output by slightly changing a character at a time”, this is what Bret Victor said in his famous Inventing on Principle talk “Creators need an immediate connection to what they’re creating” It is a very powerful principle.
There are many online tools like regex101.com already provide what I describe here, but I wish our IDEs were like what Bret Victor envisioned, so we could have the same immediate connection when we create/test regular expressions without leaving our IDEs.
