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

Enter the Matrix - 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

Regular expressions, also known as "regex" by the geek community, are a powerful tool used in pattern-matching and substitution. They are commonly associated with almost all *NIX-based tools, including editors like vi, scripting languages like Perl and PHP, and shell programs like awk and sed.

A regular expression lets you build patterns using a set of special characters; these patterns can then be compared with text in a file, data entered into an application, or input from a form filled up by users on a Web site. Depending on whether or not there's a match, appropriate action can be taken, and appropriate program code executed.

For example, one of the most common applications of regular expressions is to check whether or not a user's email address, as entered into an online form, is in the correct format; if it is, the form is processed, whereas if it's not, a warning message pops up asking the user to correct the error. Regular expressions thus play an important role in the decision-making routines of Web applications - although, as you'll see, they can also be used to great effect in complex find-and-replace operations.

A regular expression usually looks something like this:


/matrix/


All this does is match the pattern "matrix" in the text it's applied to. Like many other things in life, it's simpler to get your mind around the pattern than the concept. Then again, that's neither here nor there.

How about something a little more complex? Try this:


/mat+/

This would match the words "matting" and "mattress", but not "matrix". Why? Because the "+" character is used to match one or more occurrence of the preceding character - in the example above, the characters "ma" followed by one or more occurrence of the letter "t".

Similar to the "+" meta-character (that's the official term), we have "*" and "?". These are used to match zero or more occurrences of the preceding character, and zero or one occurrence of the preceding character, respectively. So,


/eg*/

would match "easy", "egocentric" and "egg", while


/Wil?/

would match "Winnie", "Wimpy" "Wilson" and "William", though not "Wendy" or "Wolf". In case all this seems a little too imprecise, you can also specify a range for the number of matches. For example, the regular expression


/jim{2,6}/

would match "jimmy" and "jimmmmmy!", but not "jim". The numbers in the curly braces represent the lower and upper values of the range to match; you can leave out the upper limit for an open-ended range match.



 
 
>>> 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: