Regular Expressions. Regular expressions are a powerful search-and-replace technique that is widely used in other environments (such as Unix and Perl)

Transcription

1 Regular Expressions Regular expressions are a powerful search-and-replace technique that is widely used in other environments (such as Unix and Perl) JavaScript started supporting regular expressions in version 1.4 of the language, which means they will only work in Netscape 4 or Internet Explorer 4 web browsers, or subsequent releases. A regular expression is a sequence of characters written using a special regular expression language, which can be used to match patterns in other strings. 1 of 49

2 Example: <script> function check(){ var re5digit=/^\d{5}$/ //regular expression defining //a 5 digit number if (document.myform.myinput.value.search (re5digit)==-1) alert("please enter a valid 5 digit number inside form") } </script> 2 of 49

3 <form name="myform"> <input type="text" name="myinput" size=15> <input type="button" onclick="checkpostal()" value="check"> </form> 3 of 49

4 Let us deconstruct the regular expression used, which checks that a string contains a valid 5-digit number, and ONLY a 5- digit number: var re5digit=/^\d{5}$/ ^ indicates the beginning of the string. Using a ^ metacharacter requires that the match start at the beginning. \d indicates a digit character and the {5} following it means that there must be 5 consecutive digit characters. $ indicates the end of the string. Using a $ metacharacter requires that the match end at the end of the string. 4 of 49

5 This pattern states: "Starting at the beginning of the string there must be nothing other than 5 digits. There must also be nothing following those 5 digits." 5 of 49

6 Example: Check if a string matches the US standard telephone number format (XXX) XXX XXXX, where X represents any number from 0 to 9. If you try to write ordinary JavaScript code, you may need more than 50 lines. The same program can be rewritten using regular expressions, as follows: 6 of 49

7 var phonenum = "(415) "; var pattern = /^\(\d{3}\) \d{3}-\d{4}$/; document.write ("Trying to match \"" + phonenum + "\" with pattern " + pattern.tostring() + "...<br><br>"); if (pattern.test (phonenum)) {document.write ("This is a valid phone number.");} else {document.write ("This is NOT a valid phone number.");} 7 of 49

8 Understand the Regular Expressions Regular expressions in JavaScript deal with pattern matching. Other programming languages allow regular expressions to search and replace text. You can use regular expressions in JavaScript for example to: Validate telephone numbers in more than one format Extract all the numbers from a string Ensure a date is entered in the valid format Verify an address has the proper format 8 of 49

9 As we saw in the preceding code example, the regular expression pattern is quite complex, e.g.: var pattern = /^\(\d{3}\) \d{3}-\d{4}$/; Regular expressions have their own language. There are symbols and special characters to represent different things. 9 of 49

10 The following are some general rules: 1. We start with defining a variable for our regular expression pattern. var pattern; 2. The forward slash (/ ) signifies the start and end of a regular expression literal in JavaScript. Regular expression literals allow us to create a regular expression object without having to use the RegExp class. var pattern = //; 10 of 49

11 3. The caret (^) and dollar sign ($) represent the start and end of a line. They also represent the start and end of a string. If we only wanted to match the pattern to part of the string, we would omit them. Similarly, if we wanted to test specifically for a pattern at the beginning of a long string, we could just use the caret (^) by itself. The following pattern only matches an empty string ( ) : var pattern = /^$/; 11 of 49

12 4. The \d represents a single digit. If we add the \d to our pattern, it would only match a one-character string containing a number from 0 to 9. var pattern = /^\d$/; 12 of 49

13 5. If we want to match more than one number (as we do with a phone number), we can put multiple \d tokens together; \d\d\d would represent three numbers. We can also specify the number in curly braces: \d{3}. var pattern = /^\d{3}$/; 6. Other characters in the pattern, such as spaces and hyphens, represent only themselves. So the following pattern would match , which is one way to represent a telephone number. var pattern = /^\d{3}-\d{3}-\d{4}$/; 13 of 49

14 7. Since the parentheses characters have special meaning in regular expression syntax, to include them we will need to escape them with a backslash: \( and \). That gives us a pattern that matches (999) var pattern = /^\(\d{3}\) \d{3}-\d{4}$/; 14 of 49

15 There are many special tokens in the regular expression syntax to match different sets of characters. The tokens listed bellow are the basic set. \ Either denotes the start of a special token (for example, \d matches a digit) or indicates a special character is to be treated literally ( \* matches an asterisk) ^ Matches the beginning of a line; also matches the beginning of every string $ Matches the end of a line; also matches the end of every string 15 of 49

16 * A special quantifier, meaning the preceding token or group of tokens must match zero or more times + A special quantifier, meaning the preceding token or group of tokens must match one or more times? A special quantifier, meaning the preceding token or group of tokens must match zero or one time only. Matches any single character except the newline character (\n) (abcd) Matches abcd and remembers the match 16 of 49

17 car bus Matches either car or bus 17 of 49

18 {3} Matches exactly three occurrences of the preceding token or group of tokens {3,} Matches three or more occurrences of the preceding token or group of tokens {4,8} Matches four to eight occurrences of the preceding token or group of tokens 18 of 49

19 [abcdef] Matches any one of the characters a through f [a-f] Matches any one of the characters a through f [a-za-z0-9] Matches any single alphanumeric character 19 of 49

20 [^aeiou] Matches everything except a, e, i, o, and u \d Matches a digit; identical to the pattern [0-9] \D Matches a nondigit; identical to the pattern [^0-9] \s Matches a space character (there are several defined space characters) \S Matches a nonspace character 20 of 49

21 \t Matches a tab \n Matches a new line \r Matches a carriage return \w Matches any alphanumeric (word) character (a z and 0 9), including underscore ( _ ); identical to the pattern [a-za-z0-9_] \W Matches any non-word character; identical to the pattern [^a-za-z0-9_ ] 21 of 49

22 Categories of Pattern Matching Characters ^ Position matching: You wish to match a substring that occurs at a specific location within the larger string. For example, a substring that occurs at the very beginning or end of string. Only matches the beginning of a string. $ Only matches the end of a string. \b Matches any word boundary (test characters must exist at the beginning or end of a word within the string) /^The/ matches "The" in "The night" but not "In The Night" /and$/ matches "and" in "Land" but not "landing" /ly\b/ matches "ly" in "This is really cool." 22 of 49

23 \B Matches any nonword boundary. /\Bor/ matches or in "normal" but not "origami." Special literal character matching: All alphabetic and numeric characters by default match themselves literally in regular expressions. However, if you wish to match say a newline in Regular Expressions, a special syntax is needed, specifically, a backslash (\) followed by a designated character. For example, to match a newline, the syntax "\n" is used, while "\r" matches a carriage return. Alphanumeric All alphabetical and numerical characters match themselves literally. So /2 days/ will match "2 days" inside a string. \n Matches a new line character 23 of 49

24 \f Matches a form feed character \r Matches carriage return character \t Matches a horizontal tab character \v Matches a vertical tab character \xxx Matches the ASCII character expressed by the octal number xxx. "\50" matches left parentheses character "(" \xdd \uxxxx Matches the ASCII character expressed by the hex number dd. "\x28" matches left parentheses character "(" Matches the ASCII character expressed by the UNICODE xxxx. "\u00a3" matches " ". 24 of 49

25 Character classes matching: Individual characters can be combined into character classes to form more complex matches, by placing them in designated containers such as a square bracket. For example, /[abc]/ matches "a", "b", or "c", while /[a-za-z0-9]/ matches all alphanumeric characters. [xyz] Match any one character enclosed in the character set. You may use a hyphen to denote range. For example. /[az]/ matches any letter in the alphabet, /[0-9]/ any single digit. /[AN]BC/ matches "ABC" and "NBC" but not "BBC" since the leading B is not in the set. 25 of 49

26 [^xyz] Match any one character not enclosed in the character set. The caret indicates that none of the characters NOTE: the caret used within a character class is not to be confused with the caret that denotes the beginning of a string. Negation is only performed within the square brackets.. (Dot). Match any character except newline or another Unicode line terminator. /[^AN]BC/ matches "BBC" but not "ABC" or "NBC". /b.t/ matches "bat", "bit", "bet" and so on. 26 of 49

27 \w Match any alphanumeric character including the underscore. Equivalent to [a-za-z0-9_]. \W Match any single non-word character. Equivalent to [^a-za-z0-9_]. \d Match any single digit. Equivalent to [0-9]. \D Match any non-digit. Equivalent to [^0-9]. \s Match any single space character. Equivalent to [ \t\r\n\v\f]. /\w/ matches "200" in "200%" /\W/ matches "%" in "200%" /\D/ matches "No" in "No " 27 of 49

28 \S Match any single non-space character. Equivalent to [^ \t\r\n\v\f]. 28 of 49

29 Repetition matching: You wish to match character(s) that occurs in certain repetition. For example, to match "555", the easy way is to use /5{3}/ {x} Match exactly x occurrences of a regular expression. {x,} Match x or more occurrences of a regular expression. {x,y} Matches x to y number of occurrences of a regular expression.? Match zero or one occurrences. Equivalent to {0,1}. 29 of 49 /\d{5}/ matches 5 digits. /\s{2,}/ matches at least 2 whitespace characters. /\d{2,4}/ matches at least 2 but no more than 4 digits. /a\s?b/ matches "ab" or "a b".

30 * Match zero or more occurrences. Equivalent to {0,}. + Match one or more occurrences. Equivalent to {1,}. /we*/ matches "w" in "why" and "wee" in "between", but nothing in "bad" /fe+d/ matches both "fed" and "feed" 30 of 49

31 Alternation and grouping matching: You wish to group characters to be considered as a single entity or add an "OR" logic to your pattern matching. ( ) Grouping characters together to create a clause. May be nested. Alternation combines clauses into one regular expression and then matches any of the individual clauses. Similar to "OR" statement. /(abc)+(def)/ matches one or more occurrences of "abc" followed by one occurrence of "def". /(ab) (cd) (ef)/ matches "ab" or "cd" or "ef". 31 of 49

32 Back reference matching: You wish to refer back to a subexpression in the same regular expression to perform matches where one match is based on the result of an earlier match. ()\n Matches a parenthesized clause in the pattern string. n is the number of the clause to the left of the backreference. (\w+)\s+\1 matches any word that occurs twice in a row, such as "hubba hubba." The \1 denotes that the first word after the space must match the portion of the string that matched the pattern in the last set of parentheses. If there were more than one set of parentheses in the pattern string you would use \2 or \3 to match the appropriate grouping to the left of the backreference. Up to 9 backreferences can be used in a pattern string. 32 of 49

33 Pattern Switches In addition to the pattern-matching characters, you can use switches to make the match global or case- insensitive or both: Switches are added to the very end of a regular expression. i Ignore the case of characters. g Global search for all occurrences of a pattern gi Global search, ignore case. /The/i matches "the" and "The" and "the" /ain/g matches both "ain"s in "No pain no gain", instead of just the first. /it/gi matches all "it"s in "It is our IT department" 33 of 49

34 Create Patterns with a RegExp Object A regular expression literal starts and ends with a forward slash (/ ), as follows: var zipcodepattern = /^\d{5}(-\d{4})?$/; JavaScript also provides a class named RegExp to create these patterns as well. We can rewrite the pattern using this class s constructor, as follows: var zipcodepattern = new RegExp ("^\\d{5}(-\\d{4})?$"); 34 of 49

35 The backslash ( \) character needs to be escaped anytime it is included in a string, and the RegExp constructor is no exception. The double backslash ( \\) represents the escaped backslash character. 35 of 49

36 The RegExp object provides two main methods for performing its search and match functions: test() and exec(). exec () matches Searches a string for a pattern and returns all the test () Compares a string to a pattern and returns true or false based on the result 36 of 49

37 String and Regular Expression methods The String object has four methods that take regular expressions as arguments. These are your workhorse methods that allow you to match, search, and replace a string using the flexibility of regular expressions: 37 of 49

38 String Methods Using Regular Expressions Method match( regular expression ) Description Executes a search for a match within a string based on a regular expression. It returns an array of information or null if no match are found. replace( regular expression, replacement text ) Searches and replaces the regular expression portion (match) with the replaced text instead. split ( string literal or regular expression ) Breaks up a string into an array of substrings based on a regular expression or fixed string. 38 of 49

39 search ( regular expression ) Tests for a match in a string. It returns the index of the match, or 1 if not found. Does NOT support global searches (ie: "g" flag not supported). 39 of 49

40 Here are a few examples: var string1= "Peter has 8 dollars and Jane has 15" parsestring1=string1.match(/\d+/g) //returns the array [8,15] var string2="(304) " parsestring2=string2.replace (/[\(\)-]/g, "") //Returns " " (removes "(", ")", and "-") var string3="1,2, 3, 4, 5" parsestring3=string3.split (/\s*,\s*/) //Returns the array ["1","2","3","4","5"] 40 of 49

41 You can use the replace() method to modify and not simply replace a substring. This is accomplished by using the $1 $9 properties of the RegExp object. These properties are populated with the contents of the portions of the searched string that matched the portions of the search pattern contained within parentheses. 41 of 49

42 The following example illustrates how to use the replace method to swap the order of first and last names and insert a comma and a space in between them: <SCRIPT language="javascript1.2"> var objregexp = /(\w+)\s(\w+)/; var strfullname = "Jane Doe"; var strreversename = strfullname.replace(objregexp, "$2, $1"); alert(strreversename) //alerts "Doe, Jone" </SCRIPT> The output of this code will be Doe, Jane. How this works is that the pattern in the first parentheses matches Jane and this string is placed in the RegExp.$1 property. 42 of 49

43 The \s (space) character match is not saved to the RegExp object because it is not in parentheses. The pattern in the second set of parentheses matches Doe and is saved to the RegExp.$2 property. The String replace() method takes the Regular Expression object as its first argument and the replacement text as the second argument. The $2 and $1 in the replacement text are substitution variables that will substitute the contents of RegExp.$2 and RegExp.$1 in the result string. 43 of 49

44 RegExp methods and properties You just saw several regular expression related string methods; in most situations, they are all you need for your string manipulation needs. However, true to the versatility of regular expressions, the Regular Expression (RegExp) object itself also supports two methods that mimic the functions of their string counterparts, the difference being these two methods take strings as parameters, while with String functions, they take a RegExp instead. The following describes the methods and properties of the regular expression object. 44 of 49

45 Method Description test(string) Tests a string for pattern matches. This method returns a Boolean that indicates whether or not the specified pattern exists within the searched string. This is the most commonly used method for validation. It updates some of the properties of the parent RegExp object following a successful search. exec(string) Executes a search for a pattern within a string. If the pattern is not found, exec() returns a null value. If it finds one or more matches it returns an array of the match results. It also updates some of the properties of the parent RegExp object. 45 of 49

46 Here is a simple example that uses test() to see if a regular expression matches against a certain string: var pattern=/php/i pattern.test("php is your friend") //returns true 46 of 49

47 RegExp instance properties Whenever you define an instance of the regular expression (whether using the literal or constructor syntax), additional properties are exposed to this instance which you can use: Properties Property Description $n n represents a number from 1 to 9 Stores the nine most recently memorized portions of a parenthesized match pattern. For example, if the pattern used by a regular expression for the last match was /(Hello)(\s+)(world)/ and the string being searched was Hello world the contents of RegExp.$2 would be all of the space characters between Hello and world. 47 of 49

48 source Stores a copy of the regular expression pattern. global Read-only Boolean property indicating whether the regular expression has a "g" flag. ignorecase Read-only Boolean property indicating whether the regular expression has a "i" flag. lastindex Stores the beginning character position of the last successful match found in the searched string. If no match was found, the lastindex property is set to of 49

49 This simple example shows how to determine whether a regular expression has the "g" flag added: var pattern=/php/g alert(pattern.global) //alerts true 49 of 49