Coding with JavaScript is made easier with the use of regular expressions. Regular expressions are used with the regular expression methods and with a subset of the string functions. The regular expression methods are
test: Tests for a match and returns true if a match is found and false if none is found.
exec: Tests for a match and returns an array of information about the match.
If all you need to know is whether a string contains a match for the regular expression, you should use the test method. If you need to know where the match or matches are in a string, how many matches there are, and the text that was matched, you should use exec.
Here are the string functions that can use regular expressions.
| Function | Use |
|---|---|
| match | Looks for a match of for the regular expression in a string. It returns an array of information about the match or returns null if no match is found. |
| search | Tests for a match in a string. If one is found, it returns the index of the match. If no match is found it returns -1. |
| replace | Searches for a match in a string and replaces the match with a replacement string. |
| split | Breaks a string into an array of substrings, using a regular expression or fixed string. |
Email verification is a good, and surprisingly complex, use for regular expressions. Every valid email address has certain rules that it conforms to. The basic rules are
Must contain one @ symbol
Must contain characters before and after the @ symbol
Must contain at least one separating groups of characters after the @ symbol
There are other rules, but things get complicated pretty quickly when you start talking about details, such as the fact that spaces are allowed in email addresses in certain cases, as are international characters.
For someone who is asking users to input a valid email address, usually any sort of simple test of the email address before accepting the input will dramatically cut down on fake entries.
This example demonstrates an email validation script. After a user enters an email address and presses the validate button, the script tests the email address against the following regular expression literal:
/b[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}b/i
This regular expression starts out with b, the word boundary special character. A word boundary matches the start of a new word. After that, you have the following pattern:
[A-Z0-9._%+-]+
This matches one or more combination of letters or numbers, which may contain underscores, percent signs, or dashes.
@[A-Z0-9.-]+
This part requires the @ symbol, followed by one or more combinations of letters, numbers, or dashes.
.[A-Z]{2,4}b/i
The end of the regular expression looks for a two to four character-long string (the com or net or org parts of an email address) followed by the end of the word. At the very end of the regular expression, it uses the /i modifier to indicate that the regular expression will match upper or lowercase characters.
If a match occurs, then the data entered has passed the test, and a popup declaring the address ‘valid!’ appears.
<html>
<head>
<title>Email Validator</title>
<script>
window.addEventListener(‘load’,loader,false);
function loader(e){
e.preventDefault();
document.getElementById(‘emailinput’).addEventListener(‘submit’,validateEmail,false);
}
function validateEmail(e) {
var re = /b[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}b/i;
if (re.test(e.target.yourEmail.value)) {
alert("valid!");
} else {
alert("invalid!");
}
}
</script>
</head>
<body>
<form id="emailinput">
<label>Enter an email address:
<input type="text" id="yourEmail">
</label>
<input type="submit" value="Validate" id="validate">
</form>
</body>
</html>
Here is the result of running this code in a browser.
