Học JavaScript qua ví dụ part 85 pptx

ptg 17.4 Getting Control—The Metacharacters 741 17.4.3 Metasymbols Metasymbols offer an alternative way to represent a character class. For example, instead of representing a number as [0-9], it can be represented as \d, and the alternative for representing a nonnumber [^0-9] is \D. Metasymbols are easier to use and to type than metacharacters. <script type="text/javascript"> // Negation within a Character Class 1 var reg_expression = /[^0-9]/; 2 var textString=prompt("Type a string of text",""); 3 var result=reg_expression.test(textString);// Returns true // or false document.write(result+"<br />"); if (result){ document.write("<b>The reg_ex /[^0-9]/ matched the string\""+ textString +"\".<br />"); } else{ alert("No Match!"); } </script> </body> </html> EXPLANATION 1 The caret inside a character class, when it is the first character after the opening bracket, creates a negation, meaning any character not in this range. This regular expression matches a string that does not contain a number between 0 and 9. 2 User input is assigned to the variable textString. In this example, abc was entered. 3 The regular expression test() method will return true because the string abc does not contain a character ranging from 0 to 9 (see Figure 17.15). Figure 17.15 The user entered abc. It contains a character that is not in the range between 0 and 9. EXAMPLE 17.14 (CONTINUED) From the Library of WoweBook.Com ptg 742 Chapter 17 • Regular Expressions and Pattern Matching Table 17.8 Metasymbols Symbol What It Matches Character Class \d One digit [0-9] \D One nondigit [^0-9] \s One whitespace character (tab, space, newline, carriage return, formfeed, vertical tab) \S One nonspace character \w One word character [A-Za-z0-9_] \W One nonword character [^A-Za-z0-9] EXAMPLE 17.15 <html> <head><title>The Digit Meta Symbol</title></head> <body> <script type="text/javascript"> 1 var reg_expression = /6\d\d/; 2 var textString=prompt("Type a string of text",""); 3 var result=reg_expression.test(textString);// Returns true // or false document.write(result+"<br />"); if (result){ document.write("<b>The regular expression /6\\d\\d/ matched the string\""+ textString +"\".<br />"); } else{ alert("No Match!"); } </script> </body> </html> EXPLANATION 1 The variable is assigned a regular expression containing the number 6, followed by two single digits. The metasymbol \d represents the character class [0-9]. 2 The variable textString is assigned user input; in this example, 126553 was entered. 3 The regular expression test() method will return true because this string, 126553, contains a 6 followed by any two digits. See Figure 17.16. From the Library of WoweBook.Com ptg 17.4 Getting Control—The Metacharacters 743 Figure 17.16 The user entered 126553. It contains a 6 followed by any two digits. EXAMPLE 17.16 <html> <head><title>The Digit Meta Symbol Negated</title></head> <body> <script type="text/javascript"> 1 var reg_expression = /[a-z]\D\D/; 2 var textString=prompt("Type a string of text",""); 3 var result=reg_expression.test(textString);// Returns true // or false document.write(result+"<br />"); if (result){ document.write("<b>The regular expression /[a-z]\\D\\D/ matched the string\"" + textString +"\".<br />"); } else{ alert("No Match!"); } </script> </body> </html> EXPLANATION 1 The variable is assigned a regular expression containing a letter, followed by two single nondigits. The metasymbol \D represents the character class [^0-9]. 2 The variable textString is assigned user input; in this example, Hello! was entered. 3 The regular expression test() method will return true because this string Hello!! matches a lowercase letter, followed by two nondigit characters. See Figure 17.17. Figure 17.17 The user entered a lowercase letter followed by two nondigits. From the Library of WoweBook.Com ptg 744 Chapter 17 • Regular Expressions and Pattern Matching EXAMPLE 17.17 <html> <head><title>Word and Space Metasymbols</title></head> <body> <script type="text/javascript"> 1 var reg_expression = /\w\s\w\W/; 2 var textString=prompt("Type a string of text",""); 3 var result=reg_expression.test(textString);// Returns true // or false document.write(result+"<br />"); if (result){ document.write("<b>The regular expression /\\w\\s\\w\\W/ matched the string\""+ textString +"\".<br />"); } else{ alert("No Match!"); } </script> </body> </html> EXPLANATION 1 The variable is assigned a regular expression containing an alphanumeric word character \w, followed by a space \s, followed by another alphanumeric word character, followed by a nonalphanumeric word character \W. The metasymbol \w represents the character class [A-Za-z0-9_]. The metasymbol \W represents the character class [^A-Za-z0-9_], and the metasymbol \s represents a whitespace character (tab, space, newline, carriage return, formfeed). 2 The variable textString is assigned user input; in this example, ABC D% was entered first. 3 The regular expression test() method will return true because the string ABC D% matches an alphanumeric character (C), followed by a space, another alphanumeric character (D) and a nonalphanumeric character (%) (see Figure 17.18). An example of output where the pattern failed is shown in Figure 17.19. Figure 17.18 The user entered ABC D%. It contained a word character, followed by a whitespace, another word character, and a nonwhitespace. From the Library of WoweBook.Com ptg 17.4 Getting Control—The Metacharacters 745 17.4.4 Metacharacters to Repeat Pattern Matches In the previous examples, the metacharacter matched on a single character. What if you want to match on more than one character? For example, let’s say you are looking for all lines containing names and the first letter must be in uppercase, which can be represented as [A-Z], but the following letters are lowercase and the number of letters varies in each name. [a-z] matches on a single lowercase letter. How can you match on one or more lowercase letters, or zero or more lowercase letters? To do this you can use what are called quantifiers. To match on one or more lowercase letters, the regular expression can be written /[a-z]+/ where the + sign means “one or more of the previous characters”; in this case, one or more lowercase letters. JavaScript provides a number of quantifiers as shown in the Table 17.9. The Greed Factor. Normally quantifiers are “greedy”; that is, they match on the largest possible set of characters starting at the left of the string and searching to the right, looking for the last possible character that would satisfy the condition. For example, given the string: var string="ab123456783445554437AB" Figure 17.19 The user entered ABCD#. To match, the string needs a space between the C and D. Table 17.9 Quantifiers: The Greedy Metacharacters Metacharacter What It Matches x? Matches 0 or 1 of x. (xyz)? Matches zero or one pattern of xyz. x* Matches 0 or more of x. (xyz)* Matches zero or more patterns of xyz. x+ Matches 1 or more of x. (xyz)+ Matches one or more patterns of xyz. x{m,n} Matches at least m of x and no more than n of x. From the Library of WoweBook.Com ptg 746 Chapter 17 • Regular Expressions and Pattern Matching and the regular expression: /ab[0-9]*/ If the replace() method were to substitute what is matched with an “X”: string=string.relace(/ab[0-9]/, "X"); the resulting string would be: "XAB" The asterisk is a greedy metacharacter. It matches for zero or more of the preceding characters. In other words, it attaches itself to the character preceding it; in the preceding example, the asterisk attaches itself to the character class [0-9]. The matching starts on the left, searching for ab followed by zero or more numbers in the range between 0 and 9. It is called greedy because the matching continues until the last number is found; in this example, the number 7. The pattern ab and all of the numbers in the range between 0 and 9 are replaced with a single X. Greediness can be turned off so that instead of matching on the maximum number of characters, the match is made on the minimal number of characters found. This is done by appending a question mark after the greedy metacharacter. See Example 17.18. EXAMPLE 17.18 <html> <head><title></title></head> <body> <script type="text/javascript"> 1 var reg_expression = /\d\.?\d/; 2 var textString=prompt("Type a string of text",""); 3 var result=reg_expression.test(textString); // Returns true // or false document.write(result+"<br />"); if (result){ document.write("<b>The regular expression /\\d\\.?\\d/ matched the string\""+textString +"\".<br />"); } else{ alert("No Match!"); } </script> </body> </html> From the Library of WoweBook.Com ptg 17.4 Getting Control—The Metacharacters 747 EXPLANATION 1 The variable is assigned a regular expression containing a decimal character \d, and followed by either one or zero literal periods, \.?. The question mark (zero or one) controls the character preceding it, in this case a period. There is either one period or no period at all in the string being matched. 2 The variable textString is assigned user input; in this example, 3.7 was entered. 3 The regular expression test method will return true because the string 3.7 matches a decimal number, 3, followed by a period (or not one) and followed by another decimal number, 7. See the examples in Figure 17.20. Figure 17.20 The user entered 3.7, or number, period, number (top); the user entered 456, or number, no period, number (middle); the user entered 5A6, but there must be at least two consecutive digits for a match (bottom). EXAMPLE 17.19 <html> <head><title></title></head> <body> <script type="text/javascript"> // Greediness Continues From the Library of WoweBook.Com ptg 748 Chapter 17 • Regular Expressions and Pattern Matching 1 var reg_expression = /[A-Z][a-z]*\s/; 2 var textString=prompt("Type a string of text",""); 3 var result=reg_expression.test(textString);// Returns true // or false document.write(result+"<br />"); if (result){ document.write("<b>The regular expression /[A-Z][a-z]*\\s/ matched the string"+ textString +"\".<br />"); } else{ alert("No Match!"); } </script> </body> </html> EXPLANATION 1 The variable is assigned a regular expression containing an uppercase letter, [A- Z], followed by zero or more lowercase letters, [a-z]*, and a space, \s. There are either zero or more lowercase letters. 2 The variable textString is assigned user input; in this example, Danny boy was entered. 3 The regular expression test method will return true because the string Danny boy matches an uppercase letter D, followed by zero or more lowercase letters anny, and a space. See Figure 17.21. Figure 17.21 The user entered Danny boy, consisting of one uppercase letter, zero or more lowercase letters, and a space (top); the user entered DANNY BOY, consisting one uppercase letter, zero lowercase letters, and a space (bottom). Note: the “Y” is followed by a space. EXAMPLE 17.19 (CONTINUED) From the Library of WoweBook.Com ptg 17.4 Getting Control—The Metacharacters 749 EXAMPLE 17.20 <html> <head><title></title></head> <body> <script type="text/javascript"> 1 var reg_expression = /[A-Z][a-z]+\s/; 2 var textString=prompt("Type a string of text",""); 3 var result=reg_expression.test(textString);// Returns true // or false document.write(result+"<br />"); if (result){ document.write("<b>The regular expression /[A-Z][a-z]+\\s/ matched the string\""+ textString +"\".<br />"); } else{ alert("No Match!"); } </script> </body> </html> EXPLANATION 1 The regular expression reads: Search for an uppercase letter, followed by one or more lowercase letters, followed by a space. 2 The user is prompted for input. 3 The regular expression test() method checks that the string textString entered by the user matches the regular expression and returns true or false (see Figure 17.22). Figure 17.22 The user entered Danny Boy or one uppercase letter, one or more lowercase letters, and a space (top); the user entered DannyBoy and gets no match, because there was not a space in the search string (bottom). From the Library of WoweBook.Com ptg 750 Chapter 17 • Regular Expressions and Pattern Matching EXAMPLE 17.21 <html> <head><title></title></head> <body> <script type="text/javascript"> 1 var reg_expression = /abc\d{1,3}\.\d/; 2 var textString=prompt("Type a string of text",""); 3 var result=reg_expression.test(textString); // Returns true // or false document.write(result+"<br />"); if (result){ document.write("<b>The regular expression /abc\\d{1,3}\\.\\d/ matched the string\""+ textString +"\".<br />"); } else{ alert("No Match!"); } </script> </body> </html> EXPLANATION 1 The variable is assigned a regular expression containing the pattern abc\d{1,3}\.\d, where abc is followed by at least one digit, repeated by up to three digits, followed by a literal period, and another digit, \d. 2 The variable textString is assigned user input; here, abc456.5xyz was entered. 3 The regular expression contains the curly brace {} metacharacters, representing the number of times the preceding expression will be repeated. The expression reads: Find at least one occurrence of the pattern \d and as many as three in a row. See Figure 17.23. Figure 17.23 The user entered abc followed by between one and three numbers, followed by a literal period, and xyz (top); the entered string matched true (bottom). From the Library of WoweBook.Com [...]... Turn off Greediness By placing a question mark after a greedy quantifier, the greed is turned off and the search ends after the first match, rather than the last one From the Library of WoweBook.Com 17.4 Getting Control—The Metacharacters EXAMPLE 753 17.24 Greed 1 var myString="abcdefghijklmnopqrstuvwxyz"; document.write("Old... sign), no match was madVtse (bottom) From the Library of WoweBook.Com 752 Chapter 17 EXAMPLE • Regular Expressions and Pattern Matching 17.23 //Repeating patterns 1 var reg_expression = /5{1,}\.\d/; var textString=prompt("Type a string of text",""); 2 var result=reg_expression.test(textString); // Returns true // or false document.write(result+" //Repeating patterns 1 var reg_expression = /#\d{5}\.\d/; 2 var textString=prompt("Type a string of text",""); 3 var result=reg_expression.test(textString); // Returns true // or false document.write(result+" 1 var myString="abcdefghijklmnopqrstuvwxyz"; document.write("Old string: " +myString+""); 2 myString=myString.replace(/[a-z]+?/, "XXX"); document.write("New string: . in this case, one or more lowercase letters. JavaScript provides a number of quantifiers as shown in the Table 17.9. The Greed Factor. Normally quantifiers are “greedy”; that is, they match. <head><title>The Digit Meta Symbol</title></head> <body> <script type="text /javascript& quot;> 1 var reg_expression = /6dd/; 2 var textString=prompt("Type a string. <head><title>The Digit Meta Symbol Negated</title></head> <body> <script type="text /javascript& quot;> 1 var reg_expression = /[a-z]DD/; 2 var textString=prompt("Type a string