Visualize Regular Expression

Snow Flower Text can be used to visualize regular expressions on Railroad diagrams. Get started without additional installation. Visualization of regular expressions that cannot be understood at first glance can be intuitively understood.

The following example is a short regular expression that matches email addresses.

Regular Expression
^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$

This regular expression is a simple, non-strict description, but it looks complicated enough to be difficult to understand at first glance. This regular expression is visualized in the Railroad diagram as follows.

Railroad Diagram

Visualization should have made it easier to understand the whole thing in less time. In this way, the effect of regular expression visualization is very powerful.

Railroad diagrams allow intuitive understanding of patterns. Regular expression visualization is a unique extension of Snow Flower Text.

How to use

By writing a regular expression in the [regex] block of AsciiDoc, the regular expression visualized by the Railroad diagram can be embedded in the document. Regular expressions can use the PCRE (Perl Compatible Regular Expressions) syntax.

  1. Select the AsciiDoc grammar (Edit Select grammer.. AsciiDoc).

  2. Use the regex block to visualize regular expressions.

The following is an example of a regular expression that matches the U.S ZIP code.

[regex]
--------------------------------------------
^\d{5}$
--------------------------------------------

For more information about regular expressions, see “POSIX.2 Regular Expressions” please. For more information about the PCRE standard, see PCRE.

Sample of visualization

The correspondence between the short regular expression and the visualization diagram is shown below.

Literal

Literal

Anchors

Start of line
^abc
End of line
abc$
Word boundary
\babc
Non-word boundary
\Babc

Character types

Any character
.
Digit
\d
Non-digit
\D
Hirozontal white space
\h
non hirozontal white space
\H
White space
\s
Non-white space
\S
Vertical white space
\v
Non vertical white space
\V
word
\w
non-word
\W

Character classes

A character class indicates whether it matches a set of individual characters. The first comment is either “one of” or “none of”.

Positive character class
[ab-d]
Negative character class
[^ab-d]
a or b
a|b

Special characters

Backspace character
[\b]

Quantifiers

0 or more
a*
1 or more
a+
Optional(0 or 1)
a?
Exactly 2
a{2}
Between 2 and 5
a{2,5}
2 or more
a{2,}

POSIX character classes

Letters and digits
[[:alnum:]]
Letters
[[:alpha:]]
Ascii codes 0 – 127
[[:ascii:]]
Space or tab only
[[:blank:]]
Control characters
[[:cntrl:]]
Decimal digits
[[:digit:]]
Visible characters, except space
[[:graph:]]
Lowercase letters
[[:lower:]]
Visible characters
[[:print:]]
Visible punctuation characters
[[:punct:]]
Whitespace
[[:space:]]
Uppercase letters
[[:upper:]]
Word characters
[[:word:]]
Hexadecimal digits
[[:xdigit:]]

Special characters

Newline
\n
Carriage return
\r
Tab
\t
Hexadecimal character YY
\x41
Hexadecimeal character YY
\x{123}
One digit
\d
One non-digit
\D
One whitespace
\s
One non-whitespace
\S
One word character
\w
One non-word character
\W

Escape sequences

Escapes a special character
\\Escape
Block Quoted
\Q(C++ ?)\E

Group

Capturing group
(...)
Non-capturing group
(?:...)

Complex visualization example

The following is an example of a complex regular expression visualization actually used.

URL: HTTP/HTTPS
https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)
Timestamp: YYYY-MM-DD
^\d{4}-\d{1,2}-\d{1,2}$
IP address
[regex]
---------------------------------------
(?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))
---------------------------------------
Regular expression that matches 99% of email addresses
(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])

Reference

Download on the Mac App Store