CIS 119 - Regular Expressions and Form Handling

Objectives

use regular expressions in JavaScript
use special characters in regular expressions
use character classes in regular expressions
specify grouping in regular expressions
specify repetition in regular expressions
use the String class regular expression methods
use regular expression (RegExp) objects

Validating an email

The following regular expression is used by the text to validate emails:

/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/

The ^ at the start prevents anything from being in front of what we match.
The $ at the end prevents anything from being after what we match.
\w stands for any letter, digit, or underscore
\w+ stands for one or more letters, digits, and underscores
[\.-] stands for either a period or a -
[\.-]? stands for there might be one period or one -, or there might be none
[\.-]?\w+ will match a string that might or might not start with a period or a dash, followed by one or more letters, digits, and underscores
([\.-]?\w+)* will match zero or more of the item in parentheses; this means that it might not be present at all, or there may be one or more occurrences of the pattern
(\.\w{2,3}) will match a period followed by two or three letters, digits, and underscores

See form10.html for an example which uses this regular expression to validate email addresses.

Replacing parts of a string

The text has an example where names are changed from "first name, last name" order to "last name, first name" order. The example given here also reverses the names, but includes a sort, and does it with a little less JavaScript. See RegEx1.html for an online example.

<html> <head> <title>RegEx1</title> <script> window.onload = initForm; function initForm() { var f = document.getElementById("frm1"); if (f != null) f.onsubmit = function () { swapNames(f); return false; } } function swapNames(f) { var names = document.getElementById("names").value; var array = names.split(/\s*\n\s*/); for (var i=0; i<array.length; i++) { array[i] = array[i].replace(/^([^ ,]+),? ?(.+)$/, "$2, $1"); } array.sort(); document.getElementById("names").value = array.join("\n"); } </script> </head> <body> <form name="frm1" id="frm1"> <p>Enter a list of names with first name first, a space, and then a last name.</p> <p><textarea rows="25" cols="50" name="names" id="names"></textarea></p> <p><input type="submit" value="Reverse order and sort" /></p> </form> </body> </html>

Using the RegExp object (and adding functionality to built-in classes)

This example is similar to the last example, but includes some code to convert each name to proper case. In this example, only the first letters of names are converted to upper case. This example also demonstrates how a new function can be added to a built-in class. This example differs significantly from the example in the text. See RegEx2.html for an online example. Note also that computers will go ahead and mess up names like DeKalb and O'Malley that don't follow the rules that were programmed (because they have capital letters other than the first letter).

<html> <head> <title>RegEx2</title> <script type="text/javascript"> window.onload = initForm; String.prototype.properCaseName = function () { /^([^ ,])([^ ,]*,? ?)([^ ,])([^ ,]*)$/.exec(this.toString()); return RegExp.$1.toUpperCase() + RegExp.$2 + RegExp.$3.toUpperCase() + RegExp.$4; }; function initForm() { var f = document.getElementById("frm1"); if (f != null) f.onsubmit = function () { swapNames(f); return false; } } function swapNames(f) { var names = document.getElementById("names").value; var array = names.split(/\s*\n\s*/); for (var i=0; i<array.length; i++) { array[i] = array[i].replace(/^([^ ,]+),? ?(.+)$/, "$2, $1").properCaseName(); } array.sort(); document.getElementById("names").value = array.join("\n"); } </script> </head> <body> <form name="frm1" id="frm1"> <p>Enter a list of names with first name first, a space, and then a last name. This version of the program also includes code to capitalize the first letters of names.</p> <p><textarea rows="25" cols="50" name="names" id="names"></textarea></p> <p><input type="submit" value="Reverse order and sort" /></p> </form> </body> </html>