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.
^[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.
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.
Select the AsciiDoc grammar (
).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
^abc
abc$
\babc
\Babc
Character types
.
\d
\D
\h
\H
\s
\S
\v
\V
\w
\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”.
[ab-d]
[^ab-d]
a|b
Special characters
[\b]
Quantifiers
a*
a+
a?
a{2}
a{2,5}
a{2,}
POSIX character classes
[[:alnum:]]
[[:alpha:]]
[[:ascii:]]
[[:blank:]]
[[:cntrl:]]
[[:digit:]]
[[:graph:]]
[[:lower:]]
[[:print:]]
[[:punct:]]
[[:space:]]
[[:upper:]]
[[:word:]]
[[:xdigit:]]
Special characters
\n
\r
\t
\x41
\x{123}
\d
\D
\s
\S
\w
\W
Escape sequences
\\Escape
\Q(C++ ?)\E
Group
(...)
(?:...)
Complex visualization example
The following is an example of a complex regular expression visualization actually used.
https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)
^\d{4}-\d{1,2}-\d{1,2}$
[regex]
---------------------------------------
(?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))
---------------------------------------
(?:[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])+)\])