HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [178]
♦ Match the regular expression against the e-mail address. The next line checks to see whether the e-mail address is a match to the regular expression. The result is true if the expression matches an e-mail address or null if it doesn’t.
♦ Check the phone number. Once again, the phone number check is simple except the match business, which is just as mysterious: /^\(\d{3}\) *\d{3}-\d{4}$/ (seriously, who makes this stuff up?). That’s another regular expression.
♦ If everything worked, process the form. Usually, at this point, you call some sort of function to finish handling the form processing.
Frequently, you do validation in JavaScript before you pass information to a program on the server. This way, your server program already knows the data is valid by the time it gets there.
Introducing regular expressions
Of course, the secret of this program is to decode the mystical expressions used in the match statements. They aren’t really strings at all, but very powerful text-manipulation techniques called regular expression parsing. Regular expressions have migrated from the Unix world into many programming languages, including JavaScript.
A regular expression is a powerful mini-language for searching and replacing text patterns. Essentially, what it does is allow you to search for complex patterns and expressions. It’s a weird-looking language, but it has a certain charm once you know how to read the arcane-looking expressions.
Regular expressions are normally used with the string match() method in JavaScript, but you can also use them with the replace() method and a few other places.
Table 6-1 summarizes the main operators in JavaScript regular expressions.
Table 6-1 Regular Expression Operators in JavaScript
Operator
Description
Sample Pattern
Matches
Doesn’t Match
. (period)
Any single character except newline
.
E
\n
^
Beginning of string
^a
Apple
Banana
$
End of string
a$
Banana
Apple
[characters]
Any of a list of characters in braces
[abcABC]
A
D
[char range]
Any character in the range
[a-zA-Z]
F
9
\d
Any single numerical digit
\d\d\d-\d\d\d\d
123-4567
The-thing
\b
A word boundary
\bthe\b
The
Theater
+
One or more occurrences of the previous character
\d+
1234
Text
*
Zero or more occurrences of the previous character
[a-zA-Z]d*
B17, g
7
{digit}
Repeat preceding character digit times
\d{3}-\d{4}
123-4567
999-99-9999
{min, max}
Repeat preceding character at least min but not more than max times
.{2,4}
Ca, com, info
watermelon
(pattern segment)
Store results in pattern memory returned with code
^(.).*\1$
gig, wallow
Bobby
Don’t memorize this table! I explain in the rest of this chapter exactly how regular expressions work. Keep Table 6-1 handy as a reference.
To see how regular expressions work, take a look at regex.html in Figure 6-6.
The top textbox accepts a regular expression, and the second text field contains text to examine. You can practice the examples in the following sections to see how regular expressions work. They’re really quite useful after you get the hang of them. While you walk through the examples, try them out in this tester. (I include it on the CD-ROM for you, but I don’t reproduce the code here.)
Figure 6-6: This tool allows you to test regular expressions.
Using characters in regular expressions
The main thing you do with a regular expression is search for text. Say that you work for the bigCorp company, and you ask for employee e-mail addresses. You can make a form that accepts only e-mail addresses with the term bigCorp in them by using the following code:
if (email.match(/bigCorp/)){
alert(“match”);
} else {
alert(“no match”);
} // end if
The text in the match() method is enclosed in slashes (/) rather than quote symbols because the expression isn’t technically a string; it’s a regular expression. The