Modify the regex lab to explain how to use regexes

Signed-off-by: David A. Wheeler <[email protected]>

Author: david-a-wheeler

docs/labs/checker.css

@@ -16,3 +16,8 @@ pre input, pre textarea {
 .displayNone {
     display: none;
 }
+
+table, th, td {
+  border: 1px solid black;
+}
+

docs/labs/regex1.html

@@ -265,6 +265,73 @@ <h2>Background</h2>
 <p>
 <h2>Task Information</h2>
 <p>
+Different regex languages have slightly different notations,
+but they have much in common. Here are some basic rules for regex
+notations:
+
+<ol>
+<li>The most trivial rule is that a letter or digit matches itself. That is, the regex “<tt>d</tt>” matches the letter “<tt>d</tt>”. Most implementations use case-sensitive matches by default, and that is usually what you want.
+<li>Another rule is that square brackets surround a rule that specifies any of a number of characters. If the square brackets surround just alphanumerics, then the pattern matches any of them. So <tt>[brt]</tt> matches a single “<tt>b</tt>”, “<tt>r</tt>”, or “<tt>t</tt>”.
+Inside the brackets you can include
+ranges of symbols separated by dash ("-"), so
+<tt>[A-D]</tt> will match one character, which can be one A, one B, one C,
+or one D.
+You can do this more than once.
+For example,
+the term <tt>[A-Za-z]</tt> will match one character, which can be
+an uppercase Latin letter or a lowercase Latin letter.
+(This text assumes you're not using a long-obsolete character system
+like EBCDIC.)
+<li>If you follow a pattern with “<tt>&#42;</tt>”, that means
+“<i>0 or more times</i>”.
+In almost all regex implementations (except POSIX BRE),
+following a pattern with "<tt>+</tt>" means "<i>1 or more times</i>".
+So <tt>[A-D]*</tt> will match 0 or more letters as long as every letter
+is an A, B, C, or D.
+<li>You can use "<tt>|</tt>" to identify options, any of which are acceptable.
+When validating input, should surround the options with parenthesis,
+because "<tt>|</tt>" has a low precedence.
+So for example, "<tt>(yes|no)</tt>" is a way to match either "yes" or "no".
+</ol>
+
+<p>
+We want to use regexes to <i>validate</i> input.
+That is, the input should <i>completely</i> match the regex pattern.
+In regexes you can do this by prepending some symbol and appending a different
+symbol.
+Unfortunately, different languages use different symbols.
+The following table shows what you should prepend and append.
+
+<p>
+<table>
+<tr>
+<th>Platform
+<th>Prepend
+<th>Append
+<tr>
+<td>POSIX BRE, POSIX ERE, and ECMAScript (JavaScript)
+<td>“^”
+<td>“$”
+<tr>
+<td>Java, .NET, PHP, Perl, and PCRE
+<td>“^” or “\A”
+<td>“\z”
+<tr>
+<td>Golang, Rust crate regex, and RE2
+<td>“^” or “\A”
+<td>“$” or “\z”
+<tr>
+<td>Python
+<td>“^” or “\A”
+<td>“\Z” (not “\z”)
+<tr>
+<td>Ruby
+<td>“\A”
+<td>“\z”
+</table>
+
+<p>
+For example, to validate in JavaScript that the input is only “ab” or “de”, use the regex “^(ab|de)$”. To validate the same thing in Python, use “^(ab|de)\Z” or “\A(ab|de)\Z”.
 
 <p>
 <h2>Interactive Lab (<span id="grade"></span>)</h2>