What are Regular Expressions?
Regular Expressions are a powerful and effective way to do searches and replaces in a String. With this feature we can do complex validations in only a few lines of code. However, when dealing with really complex expressions it can be harder to use, specially when we code in different languages, like PHP, JavaScript, ASP.Net, and other.
How to use it on JavaScript?
JavaScript allow us to use Regular Expressions in two different ways. We can do it with a literal expression, or with the RegEx Object. The major difference between this two ways is that with the Object we can change the expression at runtime. However, when we use literal regular expressions we achieve better results, because the literal expressions are compiled at load time and provides better performance.
Using literal declaration:
var re = /protech/i;
Using RegEx Object Constructor:
var re = new RegEx(”protech”,”i”);
In JavaScript we can use regular expression with two different approaches. Using the methods that the String Object provide or the RegEx methods.
RegEx methods:
- compile – Change the regular expression in runtime
- exec – Search a string with the regular expression and returns the found values.
- test – Search a string with the regular expression and returns a boolean true or false indicating if found a match.
String methods:
- search – Search the String with a regular expression and return the position.
- match – Search the String with a regular expression and return an array of found values.
- replace – Replace characters according to the regular expression.
- split – Split a String according to the regular expression.
In this post i don’t want to explain the regular expression feature neither go much deeper in it’s use in JavaScript. I only want to make reference to the feature and share an interesting experience using it.
Let’s see an example of the use of regular expressions in JavaScript. This code will validate an e-mail in JavaScript using regular expressions. It’s easy to do but has a catch that I’ll show you.
// Three strings to test
var str = “a,b@protech.ws4.org”;
var str2 = “webmaster@Protech.ws4.org”;
var str3 = “a.b”; // These string is for sanity check// Literal declaration of the regular expression
var literal_regexp = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i;
// RegEx Object Constructor declaration
var object_regexp = new RegExp(”^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$”,”i”);
// Result of the aplications of regular expressions
alert(str.search(literal_regexp)); // Writes -1
alert(str.search(object_regexp)); // Writes 0
alert(object_regexp.test(str)); // Writes true
alert(object_regexp.exec(str)); // Writes a,b@protech.ws4.org,,b,.ws4,.org
alert(str2.search(literal_regexp)); // Writes 0
alert(str2.search(object_regexp)); // Writes 0
alert(object_regexp.test(str2)); // Writes true
alert(object_regexp.exec(str2)); // Writes webmaster@Protech.ws4.org,,.ws4,.org
// With different declarations we achieve different results in the first string.
// Lets make a simples change
var object_regexp2 = new RegExp(/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i);
// Result of the aplications of regular expressions
alert(str.search(literal_regexp)); // Writes -1
alert(str.search(object_regexp2)); // Writes -1
alert(object_regexp2.test(str)); // Writes false
alert(object_regexp2.exec(str)); // Writes null
// As we can see be aware when using RegExp Object that the behavior is not the same.
// Sanity check
var slre = /\./;
var sore = new RegExp(”\.”);
alert(str3.search(slre)); // Writes 1
alert(str3.search(sore)); // Writes 0
alert(sore.test(str3)); // Writes true
alert(sore.exec(str3)); // Writes a
Using the RegExp Object, when we try to find a real dot, scaping the dot like we usually do in regular expression, in the String the object assumes like the dot that means, in regular expression, any character
I really don’t know why this happened. If you do please comment this post. However, i think it’s better to use literal declaration.
Like I said, there are many websites explaining regular expressions and it use in JavaScript. Use the following links for further information:
