Regular Expression

Start with Regular Expression in Javascript

A Regular Expression is an independent pattern matching script that finds matching result in inputs. An input could be anything from a simple String or Number to Operators or Constructors. A Regular Expression is also knows as RegExp (for short).

RegExp is like the wildcard that matches anything with specific pattern. As I have mentioned RegExp is an independent of platform, means it could be used in any scripting or programming language, may it be Javascript, Java, php, C#, etc… Syntax will remain almost same everywhere.

About RegExp

Regular expressions are so useful in computing that the various systems to specify regular expressions have evolved to provide both a basic and extended standard for the grammar and syntax; modern regular expressions heavily augment the standard. Regular expression processors are found in several search engines, search and replace dialogs of several word processors and text editors, and in the command lines of text processing utilities, such as sed and AWK.

– Source Wikipedia

In this post I will show you, how to use RegExp in Javascript.

Pattern

Pattern is anything that we want to match in the inputs. Modifier is a declaration that it should match the pattern globally or case-sensitive/insensitive. Javascript has constructor for RegExp so you can call it as below:

Syntax

Literal Notation

var regex = "/pattern/modifier";

Object Notation:

var regex = new RegExp("pattern", "modifier");

Both of the above example are same and initialises regex object. In the literal notation the “pattern” should be wrapped within slash (“/”) and should be followed by the modifiers.

Modifiers

g Global search
i Case-insensitive search
m Multi-line search
y Perform a “sticky” search that matches starting at the current position in the target string

RegExp in Action

Let’s take an example to validate the telephone number which matches any of the below format:

+91 1234567890      // Leading +91 with SPACE with Number
+911234567890       // Leading +91 without SPACE with Number
091 1234567890      // Leading 091 with SPACE with Number
0911234567890       // Leading 091 without SPACE with Number
01234567890         // Leading 0 with Number
1234567890          // Only Number

To start with lets write a regex pattern which validates numbers

var regex = "/[0-9]/";

In the pattern above [0-9] specifies the input value range. But this pattern is not suffice to validate all the above formats.

There are special characters defined in regular expression which we can use here, “\d” is the special character which includes all the numeric values, we can use “\d” instead of [0-9] in our pattern.

var regex = "/\d\d\d\d\d\d\d\d\d\d/";

This pattern will match the phone numbers with 10 digits.

But if someone enters “0” or “+91” or “091” will get error saying phone number is not valid. So lets update our pattern to validate it all.

var regex = "/\+\d\d\d\d\d\d\d\d\d\d\d\d/";

The above pattern will match phone numbers which are starting with “+” sign at the beginning and it will check till 12 digits. This pattern will validate all phone numbers starting with “+91” but numbers starting with “0” and followed by 10 digits will fail to pass.

Using parenthesized sub-string matches

In regular expression we can create a group with quantifiers & alternation which helps us to improve our pattern. It can help us reducing characters in our pattern and helps in grouping pattern. Please go through special characters section to understand the symbol used in pattern below:

var regex = "/^((\+91)|0)\d\d\d\d\d\d\d\d\d\d/";

In the pattern above, the first character “^” is indicating that the input value have to start with the preceding number. “+” is a special character so we have to escape it by “\” and number “91”. This pattern says that the number should start with +91. But the phone number may start with “0” as well. So in the pattern you can see the “|” character after “91” and then the pattern has “0”. The “|” matches any of the number earlier or next of it, means the pattern validates for either with +91 or 0. So now the pattern will validate the numbers with “0” or “+91” followed by 10 digits.

Phone number may have “0” or “+91” or “091” or none of them followed by 10 digits, so to validate this scenario lets update the pattern:

var regex = "/^(((\+|0)91)|0)?(\s?\d{10})/";

You can see the question mark after the first group which counts the group or number before the “?” up to “o” or “1”. So the pattern now validates the number with or without “0” or “+91” or “091”. You can see that I have also shorten the pattern by including \d{10}. This pattern counts the numeric character 10 times. I have also included the “\s” with “?” means if someone puts space after country code, our pattern will also validates it.

Validate Email

The official standard pattern is known as RFC 5322. It is the syntax that validates all the email address types.

We more often need to validate the phone numbers and/or email address inputs. You can validate the email address with below pattern.

var regex = /\b[A-Z0-9._-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/;

Online Tools to Validate RegExp

There are many websites to test whether regexp pattern is correctly spitting out our desired result or not. I have listed couple of websites which are very useful to learn or to make an regexp pattern to use in project.

Tutorial

Regular Expressions – developer.Mozilla.org

Web/ UI & Front-end developer based in Ahmedabad, GJ, India. Here to help/ discuss community to spread web awareness.

Leave a reply:

Your email address will not be published.