The regular expression object in JavaScript has the test() and exec() methods for regular expression problems. This object is called RegExp. The JavaScript String object has the match(), search(), replace() and split() methods for regular expression problems. The string object methods are actually better and easier to apply than the RegExp object methods. This two-part series takes a look at what you can do with them.
Many patterns of regexps are not as simple as the pattern "boy." You will often have a pattern of possible sub-strings in the available string. You may have something like,
re = /[cbr]at/;
In this case you have to match either "cat" or "bat" or "rat." 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 the regexp 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. However, 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 (the author) 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, recall 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() method returns a result array.
If the exec() method succeeds (sees a match) it returns the result array. If it fails, it returns null.
Consider the following script:
<html>
<head>
</head>
<body>
<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>
</body>
</html>
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. The exec() method takes the available string as an argument. 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:
<html>
<head>
</head>
<body>
<script type = "text/javascript">
var availableString = "The boy is good";
var re = /girl/;
var myArray = re.exec(availableString);
alert(myArray);
</script>
</body>
</html>
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 myArray variable is null. When there is no match, no array is returned; null is returned.
You can use the g flag to test the different possible matches with the exec() method; the approach is not very convenient. Consider the following script:
<html>
<head>
</head>
<body>
<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>
</body>
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 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 next code segment should match "cat." The result array will have only one element, "cat." The lastIndex here is 5.
The code segment after should match "rat." The result array will have only one element, "rat." The lastIndex here is 25.
The next 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. So if you want to get the sub-strings of all the matches with the RegExp object, you have to use the global flag; that makes sense, since matching normally occurs on the first element found in the available string. In addition, you have to call the exec() function over and over, making use of the lastIndex property. This addition is an inconvenience.
If you read the series I told you about at the beginning and then complete this two-part series, then you will be a master when it comes to Javascript Regular Expressions. Let us take a break here and continue in the next part of the series.
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.