Home arrow JavaScript arrow Page 8 - Regular expressions in JavaScript

Regular expressions in JavaScript

JavaScript is useful for a lot more than opening pop-ups. If you use HTML forms on your website, and want to make sure that your visitors submit valid data on those forms, you might want to consider using some regular expressions in JavaScript. Alejandro Gervasio explains how, with many excellent examples.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 248
December 20, 2004
  1. · Regular expressions in JavaScript
  2. · The Basics
  3. · Character Escaping
  4. · Repetition
  5. · Counted Subexpressions
  6. · Using regular expressions in JavaScript
  7. · The match() method
  8. · The replace() method
  9. · The test() method

print this article

Regular expressions in JavaScript - The replace() method
(Page 8 of 9 )

As you might suppose, replace() method replaces matches to a given regular expression with some new string. For a simple example, let’s say we want to replace every newline character (\n) with a break <br /> tag, within a form field used for comments, by formatting the content for proper displaying.

For example:

comment = document.forms[0].comments.value;  // assumes that our HTML form the first one present in the document, and it has a field named “comments”

comment = comment.replace(/\n/g, “<br />”);

Pretty simple, right?, The first parameter taken is the regular expression we’re searching for (please note the g modifier indicating that it will do a global search, so it will find all of the occurrences in the string, not just the first). The second argument or parameter is the string with which we want to replace any matches (in this case, the <br /> tag).

Let’s wrap the above code into a simple function:

function formatField( fieldValue ) {
 return fieldValue = fieldValue. replace(/\n/g, “<br />”);

The function accepts any string as a parameter, and returns the new string with all of the newline characters replaced by <br /> tags.

In a moment, we’ll see another useful method used with regular expressions: the search() method.

The search() method

The search() method is very similar to the indexOf() method, with the difference being that it takes a regular expression as a parameter instead of a string. Then it searches the string for the first match to the given regular expression and returns an integer that indicates the position in the string (strings in JavaScript are zero-indexed elements, so it would return 0 if the match is at the start of the string, 5 if the match begins with the 5th character in the string, and so on). If no match is found, the method will return –1.

Let’s say we wish to know the location of the first absolute link within a HTML document. We might code something like this:

pos = htmlString.search(/^<a href=”http:\/\/$/i);
if ( pos != -1) {
 alert( ‘First absolute link found at’ + pos +’position.’);
else {
 alert ( ‘Absolute links not found’);

It’s very simple and not quite useful, but good enough for example purposes.

So far, all methods described here work by accepting a regular expression as the parameter. Now, let’s take a detailed look at our final method: test(), which is by far the most used to perform client-side validation when using regular expressions in JavaScript.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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