Getting Started

Contact Us or call 1-877-932-8228
Getting Started

Getting Started

Regular expressions are used to do sophisticated pattern matching, which can often be helpful in form validation. For example, a regular expression can be used to check whether an email address entered into a form field is syntactically correct. JavaScript supports Perl-compatible regular expressions.

There are two ways to create a regular expression in JavaScript:

  1. Using literal syntax
    var reExample = /pattern/;
  2. Using the RegExp() constructor
    var reExample = new RegExp("pattern");

Assuming you know the regular expression pattern you are going to use, there is no real difference between the two; however, if you don't know the pattern ahead of time (e.g, you're retrieving it from a form), it can be easier to use the RegExp() constructor.

JavaScript's Regular Expression Methods

The regular expression method in JavaScript has two main methods for testing strings: test() and exec().

The exec() Method

The exec() method takes one argument, a string, and checks whether that string contains one or more matches of the pattern specified by the regular expression. If one or more matches is found, the method returns a result array with the starting points of the matches. If no match is found, the method returns null.

The test() Method

The test() method also takes one argument, a string, and checks whether that string contains a match of the pattern specified by the regular expression. It returns true if it does contain a match and false if it does not. This method is very useful in form validation scripts. The code sample below shows how it can be used for checking a social security number. Don't worry about the syntax of the regular expression itself. We'll cover that shortly.

Code Sample:

RegularExpressions/Demos/SsnChecker.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>ssn Checker</title>
<script type="text/javascript">
var reSSN = /^[0-9]{3}[\- ]?[0-9]{2}[\- ]?[0-9]{4}$/;

function checkSsn(ssn){
	if (reSSN.test(ssn)) {
		alert("VALID SSN");
	} else {
		alert("INVALID SSN");
	}
}
</script>
</head>
<body>
	<form onsubmit="return false;">
		<input type="text" name="ssn" size="20">
		<input type="button" value="Check" 
			onclick="checkSsn(this.form.ssn.value);">
	</form>
</body>
</html>

Let's examine the code more closely:

  1. First, a variable containing a regular expression object for a social security number is declared.
  2. Next, a function called checkSsn() is created. This function takes one argument: ssn, which is a string. The function then tests to see if the string matches the regular expression pattern by passing it to the regular expression object's test() method. If it does match, the function alerts "VALID SSN". Otherwise, it alerts "INVALID SSN".
  3. Last, A form in the body of the page provides a text field for inserting a social security number and a button that passes the user-entered social security number to the checkSsn() function.

Flags

Flags appearing after the end slash modify how a regular expression works.

  • The i flag makes a regular expression case insensitive. For example, /aeiou/i matches all lowercase and uppercase vowels.
  • The g flag specifies a global match, meaning that all matches of the specified pattern should be returned.

String Methods

There are several String methods that take regular expressions as arguments.

The search() Method

The search() method takes one argument: a regular expression. It returns the index of the first character of the substring matching the regular expression. If no match is found, the method returns -1.

"Webucator".search(/cat/); //returns 4

The split() Method

The split() method takes one argument: a regular expression. It uses the regular expression as a delimiter to split the string into an array of strings.

"Webucator".split(/[aeiou]/);

/*
returns an array with the following values:
"W", "b", "c", "t", "r"
*/

The replace() Method

The replace() method takes two arguments: a regular expression and a string. It replaces the first regular expression match with the string. If the g flag is used in the regular expression, it replaces all matches with the string.

"Webucator".replace(/cat/, "dog"); //returns Webudogor
"Webucator".replace(/[aeiou]/g, "x"); //returns Wxbxcxtxr

The match() Method

The match() method takes one argument: a regular expression. It returns each substring that matches the regular expression pattern.

"Webucator".match(/[aeiou]/g);

/*
returns an array with the following values:
"e", "u", "a", "o"
*/
Next