String Objects and Regular Expressions in JavaScript
(Page 1 of 5 )
Welcome to the fifth article in a five-part series on JavaScript regular expressions. In this article, we begin the second and final phase of the series. In this phase we shall deal more with the properties and methods of the regexp object. We shall also deal with some properties and methods of the string object that are related to regular expressions.
Extracting Matches
Many patterns of regexps are not as simple as the pattern "boy," "cat" or "dog." You will often have a pattern of possible sub-strings in the available string. The question now is that, when a match has occurred, how can you know the exact sub-string in the available string where the match occurred?
To achieve this, you have to use a method of the regexp object called the exec method. This method returns a result array. The elements of the result array are the possible matches (sub-strings) found in the available string. The use of this exec method is not straightforward, but it is understandable. We shall take it step by step.
The syntax is:
var myResultArr = regexp.exec(availableString)
or
var myResultArr = regexp(availableString)
myResultArr is the name you give to the return result array. Regexp is the regular expression object e.g. re, or the literal e.g. /[cbr]at/.
Before we continue, know that the test function and the exec function are methods of the regular expression object. The test method returns true or false, while the exec function returns a result array.
If the exec function succeeds (sees a match) it returns the result function. If it fails, it returns null.
Consider the following script:
<script type = "text/javascript">
var availableString = "The boy is good";
var re = /boy/;
var myArray = re.exec(availableString);
alert(myArray.length);
alert(myArray[0]);
</script>
The first line is the available string, which is "The boy is good." The second line is the regexp, which is /boy/. The third line is the exec method call. One match occurs, at "boy" in the available string. So, the length of the result array is one. The sub-string "boy" is the only element in the result array.
Consider the following script:
<script type = "text/javascript">
var availableString = "The boy is good";
var re = /girl/;
var myArray = re.exec(availableString);
alert(myArray);
</script>
The first line is the available string, same as before. The next line is the regexp, which is /girl/. The third line calls the exec method. The sub-string "girl" is not found in the available string, so no match occurs; the exec method returns null. So the value of the result array, myArray, is null. You can try the code.
Like the test method, the exec method will test only the first possible match in the available string.
You can use the g flag to test the different possible matches with the exec method, just as we did for the test method. Consider the following script:
<script type = "text/javascript">
var availableString = "A cat is an animal. A rat is an animal. A bat is an animal.";
var re = /[cbr]at/g;
var myArray = re.exec(availableString);
alert(myArray);
alert(re.lastIndex)
var myArray = re.exec(availableString);
alert(myArray);
alert(re.lastIndex)
var myArray = re.exec(availableString);
alert(myArray);
alert(re.lastIndex)
</script>
The first line is the available string. It has the sub-strings "cat," "rat" and "bat." The second line is the regexp. It is coded such that if the JavaScript sees "cat," it should match; if it sees "bat," it should match and if it sees "rat," it should match. The regexp has a global flag (g).
The following code segment should match "cat." The result array will have only one element, "cat." The lastIndex here is 5.
The following code segment should match "rat." The result array will have only one element, "rat." The lastIndex here is 25.
The following code segment should match "bat." The result array will have only one element, "bat'."The lastIndex here is 45.
The above illustration shows how you can use the global flag (g) with the exec method.
Next: Remembering a Match >>
More JavaScript Articles
More By Chrysanthus Forcha
