Regular Expressions make it easy to match or compare text strings and are a good way to test user input in form fields.

Front-end ecommerce developers often face challenges that regular expressions are perfect for solving. Developers frequently need to validate or sort through user-submitted material. The classic example is making sure that a user has included an “@” symbol in an email address.

Validating an Email Address

Regular expressions have a reputation for being very complex, but in truth their bark is a lot worse than their bite. They only look complex because we are not accustomed to reading them. The following is a bit of conditional JavaScript that would test to make sure that an email address was actually valid. This example will serve as an explanation for how regular expressions work.

function testEmail(input)
{
	if(!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+/.test(input))
	{
		alert('Is that really your email address?')
	}
}

Notice the regular expression in the if statement, /^\w+([.-]?\w+)@\w+([.-]?\w+)(.\w{2,3})+/.

Regular expressions begin and end with "/" so that the first and last "/" symbols simply mark our boundaries.

Next we encounter the "^" which in regular expressions means to start at the beginning of a string. Without this character, the regular expression would look for the matching characters anywhere in the string. For example, "/^abc/" would match "abcdef" but not "123abc." But "/abc/" would match both.

After the "^" the email-validating regular expression has "\w" which is a special character combination that matches any alphanumeric character, including the underscore. In regular expressions, the "\w" is the same as "[a-zA-Z0-9_]."

Next, the regular expression includes a "+" which means that the preceding specifier may appear one or more times. So that "/^\w+/" could be read as "match any number of alphanumeric characters from one to infinity."

The next phrase in the regular expression is a parenthetical, "([.-]?\w+)" made up of three parts. First, "[.-]" means that the email address may have a period or a dash. In regular expressions, periods have a special meaning—they match any character. But, in this case, we want it to represent just a period, so we add the backslash "\" in front to "escape" its special meaning. Next we find a question mark, which means that the preceding may occur zero or one time. Finally, the parenthetical includes the now familiar "\w+", which means that any combination or number of alphanumeric characters may follow.

The next character is an asterisk, which, in this case, means that the preceding may occur zero or more times. Taken together the regular expression, so far, would allow email addresses to start with "armando," Armando," armando.roggio," "armando-roggio," or even "a.roGGio-123456789."

The at symbol, "@", represents the required "@" in an email address. And the next section, "\w+([.-]?\w+)*" is a duplicate of the opening portion of the regular expression. With this much, our regular expression will match email addresses like "Armando@abc," or “a.e.roggio@a-b-c.”

The final phrase in the regular expression may also look familiar by now, since it includes an escaped period and the "\w." What differs is what comes after then "\w" namely "{2,3}", which means that the preceding may occur two or three times, but no more or no less. Finally, we have a "+" at the end of this parenthetical statement. Together, "(.\w{2,3})+" allows for ".com" or ".co.uk."

In some email validating regular expressions, developers will add a "$" at the end "/^\w+([.-]?\w+)@\w+([.-]?\w+)(.\w{2,3})+$/" signifying that the string should end here. But, in the past year or so, I have not been including this to accommodate Gmail plus addresses.

Gmail plus addresses allow Gmail users to sort emails even before they come in and are often used for newsletter registration or making purchases. By not including "$" I make room for a user to add the plus extension to the end of an otherwise valid email address. For example, my regular expression would validate the following, "armando-roggio-1234@gmail.com+ecommerce."

Common Symbols in Regular Expressions

• ? match the preceding term zero or one time, can be read as "optional"
• + match the preceding term one or more times
• * match the preceding term zero or more times
• {n} match the preceding term n times
• {n,} match the preceding term n or more times
• {n,m} match the preceding term at least n time but not more than m times.
• \w match any alphanumeric character including underscore, can be read as "match any word"
• \W match any non-word
• \s match any white-space
• \S match any non-white-space
• \d match any digit
• \D match any non-digit
• \n match newline
• \r match a carriage return
• \t match a tab