{"id":65758,"date":"2019-08-09T15:18:03","date_gmt":"2019-08-09T09:48:03","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=65758"},"modified":"2021-02-17T21:32:17","modified_gmt":"2021-02-17T16:02:17","slug":"javascript-regular-expression","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/javascript-regular-expression\/","title":{"rendered":"JavaScript Regular Expression – How to Create & Write them in JavaScript"},"content":{"rendered":"

The last tutorial on JavaScript Characters<\/strong><\/a> was interesting, wasn\u2019t it?<\/em> The same concept extends to a little advance level in this tutorial. Here, in this article, we will implement everything that we have learned in our previous tutorial. It isn\u2019t that difficult, all you need to do is remember all the special characters, and their uses from our previous tutorial. We won\u2019t say you to learn them by heart with a single read, but at least you must understand the basics. Thus, you can\u2019t understand about JavaScript Regular Expression without having basic knowledge about JavaScript Characters.<\/p>\n

After knowing about JavaScript Characters, let\u2019s continue with our tutorial on JavaScript Regular Expression, we\u2019ll provide you with numerous real-life examples to lead you through the concept.<\/p>\n

\"How<\/a><\/p>\n

What is a JavaScript Regular Expression?<\/h2>\n

A JavaScript Regular Expression is an object, describing a pattern of characters in JavaScript. These help to match character combinations in a String. To make things easier for you, JavaScript also provides a regular expression object. Let\u2019s try to understand it with something we can relate to.<\/p>\n

For Example <\/strong>–<\/em><\/p>\n

Suppose I have a text sentence, \u201cHello, this is DataFlair\u2019s JavaScript tutorial\u201d<\/strong>, and I want to search if it contains the word \u201cHello\u201d<\/strong>. How would I proceed? Easy, I\u2019ll search for an h<\/strong> followed by an e<\/strong>, then ll<\/strong> which is followed by a vowel o<\/strong> again. JavaScript computes things the same way: it searches for a pattern in the string<\/em>.<\/p>\n

Remember, a regular expression can be either a single character or a pattern of multiple characters. We can perform all sorts of text find and replace operations with their help.<\/p>\n

You must go through our tutorial on JavaScript Strings<\/a>, it will surely help you to make your understanding easier.<\/strong><\/em><\/p>\n

How to Create JavaScript Regular Expression<\/h3>\n

There are two approaches to create a regular expression in JavaScript.<\/p>\n

1. Using a regular expression literal<\/h4>\n

The script compiles regular expression literals when it loads in the memory. These improve the performance of a program marginally if the expression remains constant. A regular expression in JavaScript consists of a pattern wrapped with the slashes and the syntax is as follows:<\/p>\n

var re = \/regular expression\/;<\/pre>\n
2. Using the constructor function<\/h4>\n
It provides runtime compilation of the regular expression and is an excellent way when the expression value changes regularly. Or it may be that you aren\u2019t sure of the pattern since you are retrieving it from an outside source, including user input. You can call the constructor function of the RegExp<\/strong> object with the help of the following syntax:<\/p>\n
var re = new RegExp('regular expression');<\/pre>\n
How to Write JavaScript Regular Expression<\/h3>\n
Remember, while going through our tutorial,\u00a0Introduction to JavaScript<\/a><\/strong><\/em>, we said that JavaScript provides the additional feature of email validation on the browser itself? Well, in this JavaScript tutorial, we will understand how we can perform it with the help of regular expressions. I want the user to enter an email address and JavaScript to perform validation. We will build up the concepts and at the end of this tutorial, will validate the email with a JavaScript code. The following are the basic components we need to work with regular expressions:<\/p>\n
1. Using simple patterns<\/h4>\n
We use these patterns in case we want a direct match. Thus if I wanted to validate a password, this method is just what I need. The simple pattern will return true only if the characters are in the exact order and all the letters have the same case as required. But, this approach isn\u2019t suitable for my task of email validation. Well, no issues, JavaScript got something else for you to use in this situation: special characters<\/strong>.<\/p>\n
2. Using special characters<\/h4>\n
You can include special characters (always the lifesavers) for searches that require more than a direct match. I know one thing that all emails have in common: a series of letters and the @<\/strong> sign followed by a series of letters, a dot and then again a set of letters. So what I need to do is search for this pattern and if the pattern holds in my string? Bam! I got a valid email address. If not, well, I just inform the user that the email entered is invalid. Okay, I\u2019m not talking gibberish, we will implement this concept later in the tutorial. We learned about all the special characters we need in our prior tutorial.<\/p>\n
3. Escaping<\/h4>\n
Suppose you want to use a special character literally; what would you do now? That\u2019s right, we will use escape characters, starting with a backslash (\\)<\/strong>, to do that. We add a backslash before each special character to make them literals. For example, you can search for an expression a*b<\/strong> in your string with the help of the following code:<\/p>\n
var re = \/a\\*b\/<\/pre>\n
4. Using parentheses<\/h4>\n
Parentheses around any JavaScript character or expression indicate that the content of the parentheses is a \u2018Capturing Group\u2019<\/strong>. This group stores the matched substring in a separate array. Also, if we add a quantifier after the parentheses, it applies to the entire parenthesis and not just the last character. The interpreter processes the contents of parentheses from left to right. We use non-capturing groups, parentheses with the preface ?:<\/strong> to avoid remembering the matched substring.<\/p>\n
We will use parentheses in our program for email validation, but let\u2019s take a simple regular expression to understand the use of parentheses.<\/p>\n
In the example below, the + quantifier<\/strong> applies on the whole substring \u201cppi\u201d rather than just \u201ci\u201d.<\/p>\n
var name = \"Mississippi\"\r\nname.match(\/(ppi+)\/)\r\n\/\/ (2) [\"ppi\", \"ppi\", index: 8, input: \"Mississippi\", groups: undefined]<\/pre>\n
Output:<\/strong><\/p>\n
\"JavaScript<\/a><\/p>\n
Don’t forget to explore the article on JavaScript Array<\/a><\/strong><\/em><\/p>\n
Working with JavaScript Regular Expressions<\/h3>\n
To work with regular expressions in JavaScript, we use the following RegExp<\/strong> and String<\/strong> methods:<\/p>\n\n\n\n<\/colgroup>\n\n\n\n\n\n\n\n\n\n
Method<\/strong><\/td>\nDescription<\/strong><\/td>\n<\/tr>\n
exec()<\/td>\n\n
\n
It is a RegExp<\/strong> method, executes a search for a match in a string and returns an array of information or a NULL on mismatch.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n
test()<\/td>\n\n
\n
It is a RegExp<\/strong> method, tests for a match in a string and returns true or false.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n
match()<\/td>\n\n
\n
It is a String<\/strong> method that returns an array containing all the matches or NULL if no element matches.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n
matchAll()<\/td>\n\n
\n
It is a String<\/strong> method returning an iterator containing all the matches.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n
search()<\/td>\n\n
\n
It is a String<\/strong> method, tests for a match in the string and returns the index of the match if present, else -1.<\/strong><\/div>\n<\/div>\n<\/td>\n<\/tr>\n
replace()<\/td>\n\n
\n
This String<\/strong> method searches for a match in a string and replaces it with the replacement string.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n
split()<\/td>\n\n
\n
This String<\/strong> method breaks a string into an array of substrings using a regular expression or a fixed string.<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Let\u2019s test these methods in our respective browser consoles. Define the following values first:<\/p>\n