How can I simplify the usage of Regular Expressions with JavaScript?

In this tutorial, we will learn to simplify the use of regular expressions in JavaScript. Some of you have heard the regular expression word for the first time. So, it is not related to JavaScript but can be used in any programming language.

The simple definition of the regular expression is that it is a sequence of the characters, also called Regex or RegExp. It can be a small or complex sequence.

Let’s understand the need for regular expression by the example in the below section.

Why should we use regular expressions?

Suppose that you are developing the application and you need to take the users' email from the client-side. Now, users can enter anything in the input field, submit the form, and can generate a spam record to your database. As a programmer, you can take care of this and validate the email before the user submits the form. Also, you have seen it on the many websites that, if you make the syntax error in the email and submit, they will display a message like “image is not valid.”

To validate the input email, one way is to add too many if-else conditions to your code or use the regular expression to match the pattern in the string. By using the regular expression, we can create various patterns and replace too many if-else conditions with a single regular expression.

Users can see the regular expression below, to validate the email.

"^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+$"

As a wise programmer, you shouldn’t be afraid of seeing the above expression. We will look into the deep to understand how regular expression works and simplify the use of regular expression.

Syntax

Uses can follow the below syntax for the regular expressions.

/pattern/moddifiers

Pattern in regular expression

There are some basic patterns to create regular expressions. Once you learn the basic pattern, you can create the advanced patterns for the regular expressions.

Let’s look at the basic patterns one by one.

[ a - z ] − It allows the user to match any character between the range of the characters given in brackets. Also, we can add a range for uppercase latter and other characters.
[ 0 -9 ] − It allows the user to match any digit between the range of the digits given in the brackets.
( a | b ) − It allows to find any alternative string separated with ‘|.’ For example, it finds either for a or b in the string.
\d − It accepts the digits only.
\s − It accepts the white space only.
\b − It finds the match at the starting or end of the word. For example, \bword, to match at the starting of the word, and word\b, to match the end of the word.
a+ − It matches with the string which contains at least a single ‘a’.
a* − It matches with the string which contains 0 to the Infinite number of ‘a’.
a? − It matches with the string that contains the zero or single occurrence of the character ‘a’.

Modifiers in Regular expressions

There are total three modifiers in regular expressions. Let’s take a look at one by one.

m − In simple words, it matches the multiline. Rather than stopping the match at the end of the string, it stops to match against the newline boundary.
i − When we set the modifier i, it performs the case-insensitive matching, which means it matches with the string without considering that character is in uppercase or lowercase.
g − It matches patterns globally. Otherwise, matching stops at the first occurrence of the pattern. When we set flag ‘g,’ it will match all the patterns.

Example

In the below example, we have created the basic regular expression, and we will match the pattern in the particular string. Also, we will use the ‘i’ as a modifier to match case-insensitive.

<!DOCTYPE html>
<html>
<head>
   <title> Simplify the usage of Regular Expressions with JavaScript. </title>
</head>
<body>
   <h2> Simplify the usage of Regular Expressions with JavaScript. </h2>
   <h4> Mathcing for word "Website" in the given original string.</h4>
   <div id="input"> </div>
   <div id="index"> </div>
   <script>
      let indexDiv = document.getElementById("index");
      let inputDiv = document.getElementById("input");
      let string = "TutorialsPoint is a website for tutorials. "
      let res = string.search(/Website/i); // regular expression passed as a parameter.
      inputDiv.innerHTML = "Original String: "+string;
      indexDiv.innerHTML = `Index of "Website": ` + res;
   </script>
</body>
</html>

In the above output, users can see that ‘Website’ is matched at the index 20.

Conclusion

In this tutorial, we have learned the basics of the regular expression. We have seen how patterns and modifiers are used in the regular expressions. Now, users can easily understand the regular expression, and with a small practice, they can create a regular expression independently.