• *Wellcome Guest This Forum is created to help each other. Join us in our journey.

    * Guest Earn Piont Every Post, like, comment,and etc.

Javascript Regular Expression

S

Shehroz Azam

Guest
Many programmers are familiar with the notion that the regular expression is a useful yet underrated concept. But, they do not know very well how to use regular expressions efficiently. Regular expressions are used in not only Javascript but almost all other programming languages. In this article, you will learn about regular expressions step by step. It should be easy for programmers of any level to understand the concepts covered in this article.

A Regular Expression is an object in which patterns are given to match with the desired string.

Syntax


The syntax for a regular expression is very simple, and can be written as follows:

/pattern/flags

A pattern is a string in which you provide a pattern to match another string.
Flags are optional attributes that serve varied purposes. For example, the flag “g” stands for “global,” among many others.

The scope of regular expressions is very broad. We will show you the basic ones that are most necessary for programming through a step-by-step explanation and some real-life examples.

There are a lot of methods in which you may need to use regular expressions, for example, in Javascript’s search(), replace(), match(), and split() methods. We will start with a simple string search without using the regular expression, and later, we will show you how to perform the same search using regular expressions.

Examples


We will first suppose the string:

let str = "Linuxhint is great. linuxhint is working great and performing 100%."

We have repeated the same word “great” and “linuxhint” in the phrase. The purpose of this weird string will become obvious in a moment.

Alright! Now, we will simply write the Javascript search string method to search for the term “work”

str.search("work");


As you can see, it shows the index from where the given substring “work” began. Now, we will move on and try doing the same thing with the regex syntax.

Step 1: Search and Replace a Substring


You can search for a matching string using a regular expression by simply placing the substring between the two slashes in the expression.

str.search(/work/);


As you can see, it has also given us the same output.

Alright! Now, we will see what we can do with the regular expression. Let us try to replace the word “great” with, say, “awesome” using the replace() method.

str.replace("great", "awesome");


Here, you can see the problem: the first occurrence of “great” has been replaced, but the second one has not.

In the first step, you simply learned how to search for a string using a regular expression. Now, we will move towards the next step and learn about the concept of flags.

Step 2: Flags


In this step, you will learn more about the concept and purpose of flags in regular expressions. We will use Javascript’s replace method to explain this idea.

If you want to replace all the occurrences of “great,” you can use the regular expression with the ‘g’ flag, which is short for global.

str.replace(/great/g, "awesome");


Perfect, all the occurrences of “great” are now changed. But, you may face a problem if you try to change all the occurrences of “linuxhint” to, say, “our website” using the same technique.

We will try to do that first, then we will see how can we resolve this issue.

str.replace(/linuxhint/g, "our website");


Although we have provided the global flag with the regular expression, the first occurrence does not change. This is because of case-sensitivity. So, we will also need to provide the case-insensitivity flag ‘i,’ in this case. You can do this simply by adding the ‘i’ flag along with the ‘g’ flag.

str.replace(/linuxhint/gi, "our website");


Great. As you can see, all occurrences of the term “linuxhint” have been changed to the term “our website,” regardless of the case-sensitivity.

Similarly, you can use regular expressions in Javascript’s split() function.

str.split(/linuxhint/gi);


Alright! The function worked fine. The split() method has returned the array of substrings, based on the “linuxhint” term. But, if you want to include the separators, as well, in the array of the substring, you will have to play with the patterns.

So, in this step, we have learned about the flags and how they help us. There are more flags available. For example, “m” is for multiline matching, “s” is for dot all, etc. Now, we will move on to the concept of patterns and learn how to use these items.

Step 3: Patterns


In this step, you will learn how to utilize the patterns and related options.
To include the separators in the array of the substring, simply add parentheses around the pattern, as can be seen in the following image:

str.split(/(linuxhint)/gi);


Perfect! As you can see, the separators are also included in the array of substrings.

To split the base of two separators, you can give multiple substrings in a regular expression using the OR “|” operator.

str.split(/linuxhint|great/gi);


All right! The operator worked great, as we expect it to split.

Backslash


Now, to split between the base of the space “ “ or the dot “.” meaning to add special characters in the regular expression, add a backslash “\” before any special characters.

str.split(/\ |\./gi);


Okay, so far, so good. For example, say, you want to change the dots into commas in the following expression:

str.replace(/\./g, ",");


It worked!

Backslashes are also used for another purpose. To search any word, digit, or space, you can use \w, \d, and \s, respectively. For example, to replace spaces with dashes, the following expression is used:

str.replace(/\s/g, "-");


Awesome! You can really see the potential in regular expressions, now.

Square Brackets [ ]


If you want to replace multiple characters in a string, you can provide all of them in a single square bracket, and they will be replaced by the given substring. For example, if you want to replace three letters in a string and you do not want to put a lot of OR “|” operators in the regular expression, you can use square bracket syntax, in which you can give multiple letters, like this:

str.replace(/[nia]/g, "u");


You can even give a range of letters, like this:

str.replace(/[g-l]/g, "u");


Or, a range of numbers:

str.replace(/[0-5]/g, "9");


And, if you want to exclude the provided characters in the square brackets, you can use the caret character, like this:

str.replace(/[^g-l]/g, "t");


This comes in handy when getting data from users and testing and validating that data, especially in email, phone, or date validation.

Conclusion


This article has just scratched the surface of the Javascript regular expression. It covers the concepts only from the beginner to the intermediate level. There is a lot more to learn about the regular expression, and you can use this expression to do a lot of things that you may have not even thought of. To keep on learning, working, and getting more experience in Javascript, check out more articles on this topic at linuxhint.com.

Credit to linux
 

Latest threads

Top