Home arrow JavaScript arrow Page 5 - JavaScript String Regular Expressions
JAVASCRIPT

JavaScript String Regular Expressions


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.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
September 24, 2009
TABLE OF CONTENTS:
  1. · JavaScript String Regular Expressions
  2. · Verification of Match Occurrence
  3. · Knowing Where Matching Occurs in the Available String
  4. · The String Search Method
  5. · Extracting Matches

print this article
SEARCH DEVARTICLES

JavaScript String Regular Expressions - Extracting Matches
(Page 5 of 5 )

Extracting matches with RegExp

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.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials