13.2 Creating a Regular Expression

A regular expression is a pattern of characters . JavaScript regular expressions are objects. When you create a regular expression, you test the regular expression against a string. For example, the regular expression /green/ might be matched against the string "The green grass grows" . If green is contained in the string, then there is a successful match.

Building a regular expression is like building a string. If you recall, you can create a String object the literal way or you can use the String() constructor method. To build a regular expression object, you can assign a literal regular expression to a variable, or you can use the RegExp constructor to create and return a regular expression object.

13.2.1 The Literal Way

To create a regular expression object with the literal notation, you assign the regular expression to a variable. The regular expression is a pattern of characters enclosed in forward slashes . After the closing forward slash, options may be provided to modify the search pattern. The options are i, g , and m . See Table 13.1.

Table 13.1. Options used for modifying search patterns.

Option	Purpose
i	Used to ignore case
g	Used to match for all occurrences of the pattern in the string
m	Used to match over multiple lines

FORMAT

 var variable_name = /regular expression/options; 

Example:

 var myreg = /love/; var reobj = /san jose/ig; 

If you are not going to change the regular expression, say, if it is hard-coded right into your script, then this literal notation is faster, since the regular expression is evaluated at runtime.

13.2.2 The Constructor Method

The constructor method, called RegExp() , creates a RegExp object. The RegExp() constructor takes one or two arguments. The first argument is the regular expression; it is a string representing the regular expression, for example, "green" represents the literal regular expression /green/ . The second optional argument is called a flag such as i for case insensitivity or g for global. The constructor method is used when the regular expression is being provided from some other place, such as from user input, and may change throughout the run of the program. This method is handled at runtime.

FORMAT

 var variable_name = new RegExp("regular expression", "options"); 

Example:

 var myreg = new RegExp("love"); var reobj = new RegExp("san jose", "ig"); 

Testing the Expression

The RegExp object has two methods that can be used to test for a match in a string, the test() method and the exec () method, which are quite similar. The test() method searches for a regular expression in a string and returns true if it matched and false if it didn't. The exec() method also searches for a regular expression in a string. If the exec() method succeeds, it returns an array of information including the search string, and the parts of the string that matched. If it fails, it returns null . This is similar to the match() method of the String object. Table 13.2 summarizes the methods of the RegExp object.

Table 13.2. Methods of the RegExp object.

Method	What It Does
exec	Executes a search for a match in a string and returns an array
test	Tests for a match in a string and returns either true or false

The test() Method

The RegExp object's test() method is used to see if a string contains the pattern represented in the regular expression. It returns a true or false Boolean value. After the search, the lastIndex property of the RegExp object contains the position in the string where the next search would start. (A string starts at character position 0.) If a global search is done, then the lastIndex property contains the starting position after the last pattern was matched. (See Example 13.4 to see how the lastIndex property is used.)

Steps to test for a match:

1. Assign a regular expression to a variable.

2. Use the regular expression test() method to see if there is a match. If there is a match, the test() method returns true ; otherwise , returns false . There are also four string methods that can be used with regular expressions. (See "String Methods Using Regular Expressions" on page 408.)

FORMAT

 var string="String to be tested goes here"; var  regex  = /regular expression/;     //  Literal way  var  regex  =new RegExp("regular expression");    //  Constructor way   regex.test  (string);   //  Returns either true or false  

or

 /regular expression/.test("string"); 

Example:

 var myString="She wants attention now!"; var regex = /ten/    //  Literal way  var regex=new RegExp("ten");    //  Constructor way   regex.test  (myString);   //  Looking for "ten" in  myString  

or

  /ten/.test  ("She wants attention now!"); 

Example 13.1

 <html>     <head>     <title>Regular Expression Objects the Literal Way</title>     <script language = "JavaScript"> 1  var myString="My gloves are worn for wear.";  2  var regex = /love/;  //  Create a regular expression object  3       if (  regex.test(myString)  ){ 4           alert("Found pattern!");         }         else{ 5           alert("No match.");         }     </script>     </head><body></body>     </html> 

EXPLANATION

1. "My gloves are worn for wear." is assigned to a variable called myString .

2. The regular expression / love / is assigned to the variable called regex . This is the literal way of creating a regular expression object.

3. The test() method for the regular expression object tests to see if myString contains the pattern, love . If love is found within gloves , the test() method will return true .

4. The alert dialog box will display Found pattern! if the test() method returned true .

5. If the pattern / love/ is not found in the myString , the test() method returns false , and the alert dialog box will display its message, No match .

Example 13.2

 <head>     <title>Regular Expression Objects with the Constructor</title>     <script language = "JavaScript"> 1  var myString="My gloves are worn for wear.";  2  var regex = new RegExp("love");  //  Creating a regular  //  expression object  3  if (regex.test(myString)){  4           alert("Found pattern love!");         }         else{ 5           alert("No match.");         }     </script>     </head><body></body>     </html> 

EXPLANATION

1 The variable called myString is assigned "My gloves are worn for wear."

2 The RegExp() constructor creates a new regular expression object, called regex . This is the constructor way of creating a regular expression object. It is assigned the string "love" , the regular expression.

3 The test() method for the regular expression object tests to see if myString contains the pattern, love . If it finds love within gloves , it will return true .

4, 5 The alert dialog box will display Found pattern! if the test() method returned true , or No match. if it returns false . See Figure 13.1.

Figure 13.1. " My gloves are worn for wear." contains the pattern love .

The exec() Method

The exec() method executes a search to find a match for a specified pattern in a string. If it doesn't find a match, exec() returns null; otherwise it returns an array containing the string that matched the regular expression.

FORMAT

 array = regular_expression.exec(string); 

Example:

 list = /ring/.exec("Don't string me along, just bring me the goods."); 

Example 13.3

 <html>     <head>     <title>The exec() method</title>     <script language = "JavaScript"> 1       var myString="My lovely gloves are worn for wear, Love."; 2  var regex = /love/i;  //  Create a regular expression object  3  var array=regex.exec(myString);  4       if (  regex.exec(myString  )){             alert("Matched! " + array);         }         else{             alert("No match.");         }     </script>     <body></body>     </html> 

EXPLANATION

1. The string " My gloves are worn for wear ." is assigned to myString .

2. The regular expression / love / is assigned to the variable regex .

3. The exec() method returns an array of values that were found.

4. If the exec() method doesn't return null , then there was a match. See Figure 13.2.

   Figure 13.2. The array returned by exec() contains love .

   

13.2.3 Properties of the RegExp Object

There are two types of properties that can be applied to a RegExp object. The first type is called a class property (see Table 13.3) and applies to the RegExp object as a whole, not a simple instance of a regular expression object. For example, the input property contains the last string that was matched, and is applied directly to the RegExp object as RegExp.input . The other type of property is called an instance property and is applied to an instance of the object (see Table 13.4); for example, mypattern.lastIndex refers to the position within the string where the next search will start for this instance of the regular expression object, called mypattern .

Table 13.3. Class properties of the RegExp object.

Property	What It Describes
input	Represents the input string being matched
lastMatch	Represents the last matched characters
lastParen	Represents the last parenthesized substring pattern match
leftContext	Represents the substring preceding the most recent pattern match
RegExp.$*	Boolean value that specifies whether strings should be searched over multiple lines; same as the multiline property
RegExp.$&	Represents the last matched characters
RegExp.$_	Represents the string input that is being matched
RegExp.$'	Represents the substring preceding the most recent pattern match (see the leftContext property)
RegExp.$'	Represents the substring following the most recent pattern match (see the rightContext property)
RegExp.$+	Represents the last parenthesized substring pattern match (see the lastParen property)
RegExp.$1,$2,$3...	Used to capture substrings of matches
rightContext	Represents the substring following the most recent pattern match

Table 13.4. Instance properties of the RegExp object.

Property	What It Describes
global	Boolean to specify if the g option was used to check the expression against all possible matches in the string
ignoreCase	Boolean to specify if the i option was used to ignore case during a string search
lastIndex	If the g option was used, specifies the character position immediately following the last match found by exec() or test()
multiline	Boolean to test if the m option was used to search across multiple lines
source	The text of the regular expression

Example 13.4

 <html>     <head><title>The test() method</title>     </head>     <body bgcolor=silver>     <font face="arial" size="+1">     <script language = "JavaScript"> 1       var myString="I love my new gloves!"; 2  var regex = /love/g;  //  Create a regular expression object  3       var booleanResult =  regex.test(myString);  if (booleanResult != false){ 4           document.write("Tested regular expression <em>"+  regex.source  + ".</em> The result is <em>"                + booleanResult + "</em>");             document.write(".<br>Starts searching again at position " + 5  regex.lastIndex  + " in string<em> \"" + 6  RegExp.input  + "\"<br>");             document.write("The last matched characters were: "+ 7  RegExp.lastMatch  +"<br>");             document.write("The substring preceding the last match is: 8              "+  RegExp.leftContext  +"<br>");             document.write("The substring following the last match is: 9              "+  RegExp.rightContext  +"<br>");         }         else{ alert("No match!"); }     </script></body>     </html> 

EXPLANATION

1. The string object to be tested is created.

2. A regular expression object, called regex , is created.

3. The test() method returns true or false if the regular expression is matched in the string.

4. The source property is applied to regex , an instance of a RegExp object. It contains the text of the regular expression, / love /.

5. The lastIndex property is applied to an instance of a RegExp object. It represents the character position right after the last matched string.

6. The input class property represents the input string on which the pattern matching (regular expression) is performed.

7. lastMatch is a class property that represents the characters that were last matched.

8. leftContext is a class property that represents the left-most substring pattern that precedes the last pattern that was matched; here, whatever string comes before /love/.

9. rightContext is a class property that represents the right-most substring pattern that follows the last pattern that was matched; here, whatever string comes after /love/ . Output is shown in Figure 13.3.

   Figure 13.3. Regular expression properties.

   

13.2.4 String Methods Using Regular Expressions

In addition to the RegExp object's test() and exec() methods, the String object provides four methods that also work with regular expressions.

Table 13.5. String object regular expression methods.

Method	What It Does
match(regex)	Returns substring in regex or null
replace(regex, replacement)	Substitutes regex with replacement string
search(regex)	Finds the starting position of regex in string
split(regex)	Removes regex from string for each occurrence

The match() Method

The match() method, like the exec() method, is used to search for a pattern of characters in a string and returns an array where each element of the array contains each matched pattern that was found. If no match is found, returns null . With the g flag, match() searches globally through the string for all matching substrings.

FORMAT

 array = String.match(regular_expression); 

Example:

 matchList = "Too much, too soon".  match(/too/ig)  ; 

Example 13.5

 <html>     <head>     <title>The match() Method</title>     </head><body>     <font size="+1"><font face="arial, helvetica">     <script language = "JavaScript"> 1  var matchArray = new Array();  2  var string="I love the smell of clover."  3  var regex = /love/g;  4  matchArray=string.match(regex);  5       document.write("Found "+  matchArray.length  +" matches.<br>");     </script>     </body>     </html> 

EXPLANATION

1. A new array object is created.

2. The variable called string is assigned "I love the smell of clover."

3. The regular expression called regex is assigned the search pattern love . The g modifier performs a global search: multiple occurrences of the pattern will be returned.

4. The match() method is applied to the string. The regular expression is passed as an argument. Each time the pattern /love/ is found in the string it will be assigned as a new element of the array called matchArray . If the g modifier is removed, only the first occurrence of the match will be returned, and only one element will be assigned to the array matchArray .

5. The length of the array, matchArray , tells us how many times the match() method found the pattern /love/ . See Figure 13.4.

   Figure 13.4. The pattern love was found twice in the string.

   

The search() Method

The search() method is used to search for a pattern of characters within a string, and returns the index position of where the pattern was found in the string. The index starts at zero. If the pattern is not found, 1 is returned. For basic searches, the String object's indexOf() method works fine, but if you want more complex pattern matches, the search() method is used, allowing you to use regular expression metacharacters to further control the expression. (See "Getting ControlThe Metacharacters" on page 414.)

FORMAT

 var index_value = String.search(regular_expression); 

Example:

 var position = "A needle in a haystack".  search(/needle/  ); 

Example 13.6

 <html>     <head>     <title>The search() Method</title>     </head><body bgcolor="yellow">     <font size="+1">     <font face="arial, helvetica">     <script language = "JavaScript"> 1  var myString="I love the smell of clover."  2  var regex = /love/;  3  var index=myString.search(regex);  document.write("Found the pattern "+ regex+ " at position "                        +index+"<br>");     </script>     </body>     </html> 

EXPLANATION

1. The variable called myString is assigned the string, "I love the smell of clover."

2. The variable called regex is assigned the regular expression /love/ . With the search() method, using the g modifier is irrelevant. The index position of the pattern where it is first found in the string, is returned.

3. The String object's search() method returns the index position, starting at zero, where the regular expression, regex , is found. See Figure 13.5.

   Figure 13.5. The search() method found the pattern starting at character position 2, where 0 is the beginning character.

   

The replace() Method

The replace() method is used to search for a string and replace the string with another string. The i modifier is used to turn off case sensitivity and the g modifier makes the replacement global; that is, all occurrences of the found pattern are replaced with the new string. The replace() method is also used with the grouping metacharacters. (See "Grouping or Clustering" on page 442.)

FORMAT

 string = oldstring.replace(regular_expression, replacement_value); 

Example:

 var str1 =  "I am feeling blue".replace(/blue/, "upbeat");   (str1 is assigned: "I am feeling upbeat.")  

Example 13.7

 <html>     <head>     <title>The replace() Method</title>     </head>     <body bgcolor="yellow">     <font size="+1">     <font face="arial, helvetica">     <script language = "JavaScript"> 1  var myString="Tommy has a stomach ache."  2  var regex = /tom/i;  //  Turn off case sensitivity  3  var newString=myString.replace(regex, "Mom");  document.write(newString +"<br>");     </script>     </body>     </html> 

EXPLANATION

1. The variable called myString is assigned the string "Tommy has a stomach ache." Note that the pattern Tom or tom is found in the string twice.

2. The variable called regex is assigned the regular expression /tom/i. The i modifier turns off the case sensitivity. Any combination of uppercase and lowercase letters in the pattern tom will be searched for within the string.

3. The String object's replace() method will search for the pattern, regex , in the string and if it finds the pattern will replace it with Mom . If the g modifier were used, all occurrences of the pattern would be replaced with Mom . For example, /tom/ig would result in "Mommy has a sMomach ache."

Figure 13.6. The first occurrence of Tom , uppercase or lowercase, is replaced with Mom.

The split() Method

The String object's split() method splits a single text string into an array of substrings. In a real-world scenario, it would be like putting little crayon marks at intervals on a piece of string and then cutting the string everywhere a mark appeared, thus ending up with a bunch of little strings. In the JavaScript world, the crayon mark is called a delimiter , which is a character or pattern of characters that marks where the string is to be split up. When using the String object's split() method, if the words in a string are separated by commas, then the comma would be the delimiter and if the words are separated by colons, then the colon is the delimiter. The delimiter can contain more complex combinations of characters if regular expression metacharacters are used.

FORMAT

 array = String.split(/delimiter/); 

Example:

  splitArray = "red#green#yellow#blue".split(/#/);   (splitArray is an array of colors. splitArray[0] is "red")  

Example 13.8

 <html>     <head><title>The split() Method</title></head>     <body>     <font size="+1">     <font face="arial, helvetica">     <script language = "JavaScript"> 1       var splitArray = new Array(); 2  var string="apples:pears:peaches:plums:oranges";  3  var regex = /:/;  4  splitArray=string.split(regex);  //  Split the string by colons  5       for(i=0; i < splitArray.length; i++){             document.write(  splitArray[i]  + "<br>");         }     </script>     </body>     </html> 

EXPLANATION

1. A new array object is created.

2. The variable called string is assigned a colon-delimited string of text.

3. The variable called regex is assigned the regular expression /:/ .

4. The String object's split() method splits the string using colons as the string delimiter (marks the separation between words), and creates an array called splitArray .

5. Each of the array elements is displayed in the page. See Figure 13.7.

   Figure 13.7. The string is split on colons.

   

Example 13.9

 <html>     <head>     <title>The split() Method</title>     </head>     <font size="+1">     <font face="arial, helvetica">     <script language = "JavaScript"> 1       var splitArray = new Array(); 2  var myString="apples      pears,peaches:plums,oranges";  3  var regex = /[\t:,]/;  //  Delimeter is a tab, colon, or comma  4  splitArray=myString.split(regex);  for(i=0; i < splitArray.length; i++){ 5           document.write(  splitArray[i]  + "<br>");         }     </script>     </body>     </html> 

EXPLANATION

1. A new array object is created.

2. The string "apples pears,peaches:plums,oranges" is assigned to the variable called myString . The delimiters are a tab, comma, and colon.

3. The regular expression /[\t:,]/ is assigned to the variable called regex .

4. The String object's split() method splits up the string using a tab, colon, or comma as the delimiter. The delimiting characters are enclosed in square brackets, which in regular expression parlance is called a character class. (See "Getting ControlThe Metacharacters" on page 414.) In simple terms, any one of the characters listed within the brackets is a delimiter in the string. The split() method will search for any one of these characters and split the string accordingly , returning an array called splitArray .

5. Each of the array elements is displayed in the page. See Figure 13.8.

   Figure 13.8. The string is split on tabs, colons, and commas.