Make Your Regex Clearer - part 2

Understanding regex meaning with RegExper

RegExper is nice online tool which transform regex to a nice diagram. This graphical representation of the regex is much easier to understand. When you submit Javascript-based regex, the diagram of the regex is generated and displayed

Using this tool, you can export this diagram (the graphical representation of the regex) as an image (SVG or PNG format) and embed it in your code documentation. You can also generate a parament link and shared it with others ( within your code, email ... ).

Let's see what is the meaning of the regex we see in the code snippet with this tool:

The regex
 /(0[1-9]|[12][0-9]|3[01])(?:-|\.)(0[1-9]|1[012])(?:-|\.)(19\d\d|20\d\d)/

We can see:

  • The first captured part is 2 digits of day. (01,02,...,31)
  • The second captured part is 2 digits of month. (01,02,...,12)
  • The third captured part is the year. (19xx or 20xx)
  • The seprator is . or -

Using the diagram, we can easily see that strings such as 01.03.2008 or 05-12-2015 are valid, while strings like1.3.2008, 01/03/2008 or 01-03-1593 are invalid.

In the next part we will see how to add adding comments inside regular expressions. We will also use these observations to make the regex clearer