Title
Regular Expression In JavaScript
Introduction
Hi, in this post I’ll be showing you how to create regular expressions in JavaScript.
First let us see what is regular expression?
A regular expression is a special text string for describing a search pattern. You can think of regular expression as wildcards on steroids. You are probably familiar with wildcard notations such as *.txt to find all the text file in a file manager. The regex equivalent is .*\.txt.
In this post I’ll be using regular expression to validate email as an example to show how we can create regular expressions.
/*—–REGULAR EXPRESSION TO VALIDATE EMAIL ID—–*/
var pat=/^[a-zA-Z0-9]+@[a-zA-Z]+\.[a-zA-Z]{3,4}$/;
Regular expression are always written in between forward slash (i.e. /)
Regular expression always starts with ^ cap symbol and ends with $ dollar symbol (of course written in between the forward slash).
i.e. /^your expression$/
I’ll take my email id as an example.
Parasbbabbar77@gmail.com
Every Email id has three main parts
- Alpha numeric character before @ (at the rate symbol), and sometimes underscore (this we’ll consider in later sessions).
- @ symbol
- Host name after @ symbol (in this case gmail.com)
Let’s correlate email id and expressions
| Email id | Expression | Explanation |
|---|---|---|
| Parasbabbar77 | [a-zA-Z0-9] | As mentioned that first part of any email id mostly contains alpha numeric characters. If you see in email id We have parasababbar77 (alpha numeric characters) And in expression we used [a-zA-Z0-9], while writing expression, alphabets and numeric are mention in side square brackets [], in this expression I mentioned small case and upper case characters a-z and A-Z which means it will accept all the 26 English alphabets, and also I’ve mentioned 0-9 which means it will accept any number or combination between 0 and 9. As no specific size has been given, so we can type n number of characters. (how to give specific size will be discussed later in this session) |
| @ | +@ | Now second part of any email id is @ symbol, which can be appended using + operator following the @ symbol. In order to avoid cross browser compatibility issue we can use this with a back slash, +\@, back slash is use to avoid issues caused due escape characters, so using back slash can optimize your code. |
| Gmail.com (this part of email further contains 3 parts
) |
[a-zA-Z]+\.[a-zA-Z]{3,4}$ | Now the third main is further divided into 3 main parts. If you see first part is gmail (in our example) For which we’ll be using [a-zA-Z] which has been explained above. Second part is the dot (.) If you want to append any special symbol after the characters (like in case of @) We will use + operator, now most important thing dot (.) operator is considered to be escape character and if you just write code as [a-zA-Z]+. This will ignore dot operator i.e. whether you use dot or not will be considered valid, but in case of host name dot (.) is a must, so in order to avoid such conflictions we will use back slash [a-zA-Z]+\. This code will work fine. Third part is the host extension whether .com, .in, .org and one more interesting thing in this that these extensions have specific size (in normal case minimum 2 and max 3) We will use [a-zA-Z] to provide extension name as we have been using in above cases not the main thing is to see is how to give specific size. If observe the code there is something written in curly braces {} {3,4}, this how we give specific size, in this case min size is 3 and max size is 4. Which means at least 3 characters and max 4 characters are must after the dot (.) |
See below images
See the below screen shot this will further clear if we don’t use back slash for escape characters how will this affect our code.
*****Using back slash*****
*****Without using back slash*****
*****Not using back slash result in such errors.*****
