ptg 17.3 String Methods Using Regular Expressions 727 17.3 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, as shown in Table 17.5. 17.3.1 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. 8 leftContext is a class property that represents the leftmost substring pattern that pre- cedes the last pattern that was matched; here, whatever string comes before /love/. 9 rightContext is a class property that represents the rightmost substring pattern that follows the last pattern that was matched; here, whatever string comes after /love/. Output is shown in Figure 17.5. Figure 17.5 Regular expression properties. Table 17.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. EXPLANATION ( CONTINUED) From the Library of WoweBook.Com ptg 728 Chapter 17 • Regular Expressions and Pattern Matching FORMAT array = String.match(regular_expression); EXAMPLE matchList = "Too much, too soon".match(/too/ig); EXAMPLE 17.5 <html> <head> <title>The match() Method</title> </head> <body> <big><font face="arial, helvetica"> <script type = "text/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> </font></big> </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 mod- ifier performs a global search: multiple occurrences of the pattern will be re- turned. 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 17.6. Figure 17.6 The pattern love was found twice in the string. From the Library of WoweBook.Com ptg 17.3 String Methods Using Regular Expressions 729 17.3.2 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 fur- ther control the expression. (See the section “Getting Control—The Metacharacters” on page 733.) FORMAT var index_value = String.search(regular_expression); EXAMPLE var position = "A needle in a haystack".search(/needle/); EXAMPLE 17.6 <html> <head> <title>The search() Method</title> </head> <body bgcolor="yellow"> <big> <font face="arial, helvetica"> <script type="text/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> </font></big> </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 pat- tern 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 17.7. From the Library of WoweBook.Com ptg 730 Chapter 17 • Regular Expressions and Pattern Matching 17.3.3 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 the section “Grouping or Clustering” on page 761.) Figure 17.7 The search() method found the pattern starting at character position 2, where 0 is the beginning character. 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 17.7 <html> <head> <title>The replace() Method</title> </head> <body bgcolor="yellow"> <script type = "text/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. From the Library of WoweBook.Com ptg 17.3 String Methods Using Regular Expressions 731 17.3.4 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 delim- iter, 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 sepa- rated 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 com- binations of characters if regular expression metacharacters are used. 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 (see Figure 17.8). For ex- ample, /tom/ig would result in “Mommy has a sMomach ache.” Figure 17.8 The first occurrence of Tom, uppercase or lowercase, is replaced with Mom. FORMAT array = String.split( /delimiter/ ); EXAMPLE splitArray = "red#green#yellow#blue".split(/#/); (splitArray is an array of colors. splitArray[0] is "red") EXAMPLE 17.8 <html> <head><title>The split() Method</title></head> <body> <script type = "text/javascript"> 1 var splitArray = new Array(); 2 var string="apples:pears:peaches:plums:oranges"; 3 var regex = /:/; Continues EXPLANATION ( CONTINUED) From the Library of WoweBook.Com ptg 732 Chapter 17 • Regular Expressions and Pattern Matching 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 delim- iter (marks the separation between words), and creates an array called splitArray. 5 Each of the array elements is displayed in the page. See Figure 17.9. Figure 17.9 The string is split on colons. EXAMPLE 17.9 <html> <head> <title>The split() Method</title> </head> <script type = "text/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> EXAMPLE 17.8 (CONTINUED) From the Library of WoweBook.Com ptg 17.4 Getting Control—The Metacharacters 733 17.4 Getting Control—The Metacharacters Regular expression metacharacters are characters that do not represent themselves. They are endowed with special powers to allow you to control the search pattern in some way (e.g., find the pattern only at the beginning of line, or at the end of the line, or if it starts with an upper- or lowercase letter, etc.). Metacharacters will lose their special meaning if preceded with a backslash. For example, the dot metacharacter represents any single character, but when preceded with a backslash it is just a dot or period. If you see a backslash preceding a metacharacter, the backslash turns off the meaning of the metacharacter, but if you see a backslash preceding an alphanumeric character in a regular expression, then the backslash is used to create a metasymbol. A metasymbol provides a simpler form to represent some of the regular expression metachacters. For example, [0-9] represents numbers in the range between 0 and 9, and \d, the metasym- bol, represents the same thing. [0-9] uses the bracketed character class, whereas \d is a metasymbol (see Table 17.6). 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 the section “Getting Control—The Metacharacters” on page 733.) 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, return- ing an array called splitArray. 5 Each of the array elements is displayed in the page. See Figure 17.10. Figure 17.10 The string is split on tabs, colons, and commas. EXAMPLE 17.10 /^a c/ From the Library of WoweBook.Com . <body> <big><font face="arial, helvetica"> <script type = "text /javascript& quot;> 1 var matchArray = new Array(); 2 var string="I love the smell of clover." 3. bgcolor="yellow"> <big> <font face="arial, helvetica"> <script type="text /javascript& quot;> 1 var myString="I love the smell of clover." 2 var regex = /love/; 3. Method</title> </head> <body bgcolor="yellow"> <script type = "text /javascript& quot;> 1 var myString="Tommy has a stomach ache." 2 var regex = /tom/i;