Home arrow JavaScript arrow Page 8 - Understanding the JavaScript RegExp Object

One Mississippi, Two Mississippi... - JavaScript

Need to match and replace patterns on a Web page? You don't need Perl or PHP - JavaScript can do the job just as well. In this article, find out how, with an introduction to the JavaScript RegExp object and its methods. After reading this tutorial, I'm pretty sure you're going to look at JavaScript in a different light. The language ins't the one most commonly associated with image swaps and browser detection, but it serves as a powerful tool to help you execute pattern-matching tasks in the client quickly and efficiently.

TABLE OF CONTENTS:
  1. Understanding the JavaScript RegExp Object
  2. Enter the Matrix
  3. Two to Tango
  4. Game, Set, Match
  5. Search and Destroy
  6. In Splits
  7. Objects in the Rear-View Mirror
  8. One Mississippi, Two Mississippi...
  9. Changing Things Around
  10. Working with Forms
  11. Over And Out
By: Harish Kamath, (c) Melonfire
Rating: starstarstarstarstar / 144
February 09, 2004

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

The next method I'll show you is the  exec() method. The behavior of this method is similar to that of the String object's match() method. Take a look:


<script language="JavaScript">
 
// define string
var place = "Mississippi";
 
// define pattern
var obj = /is./;
 
// search for match
// place result in array
result = 
obj.exec(place);
 
// display result
if(result != null) {
 alert("Found " + result[0] 
" at " result.index);
}
</script>
 

The exec() method returns a match to the supplied regular expression, if one exists, as an array; you can access the first element of the array to retrieve the matching substring, and the location of that substring with the index() method.

The main difference between the match() and exec() methods lies in the parameters passed. The former requires a pattern as argument, while the latter requires the string variable to be tested.

However, that's not all. The exec() method has the ability to continue searching within the string for the same pattern without requiring you to use the "g" modifier. Let me tweak the above example to demonstrate this feature:


<script language="JavaScript">
 
// define string
var place = "Mississippi";
 
// define pattern
var obj = /is./;
 
// search for all matches in string
// display result
while((result = 
obj.exec(place)) != null) {
 alert
("Found " result[0] + " at " 
result.index);
}
 
</script>

So what do we have here? For starters, I have used a "while" loop to call the exec() method repeatedly, until it reaches the end of the string (at which point the object will return null and the loop will terminate). This is possible because every time you call exec(), the RegExp object continue to search from where it left off in the previous iteration.

At least that's the theory - the code above doesn't work as advertised in either Internet Explorer or Netscape Navigator, so you should be careful when using it. Consider the above a purely theoretical example, then... at least until the browser makers fix the bug.

Another interesting point to note in the example above is my definition of the RegExp object. Unlike the previous example, you will notice that I have not used the constructor or the "new" keyword to create the object; instead, I've simply assigned the pattern to a variable. Think of this as a shortcut technique for creating a new RegExp object.



 
 
>>> More JavaScript Articles          >>> More By Harish Kamath, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: