What are regular expressions in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn what regular expressions are in JavaScript.

A regular expression is an object that describes a pattern of characters. The JavaScript RegExp class represents regular expressions, and both String and RegExp define methods that use regular expressions.

Regular expressions, often known as RegExp, are patterns that can use to match character combinations in strings. It’s also used for data validation, searching, and complex queries. It follows the rules to create a pattern out of letters, numbers, and special characters. In addition, it comprises modifiers, brackets, metacharacters, quantifiers, and so on.

There are two ways to specify a regular expression, and those are: using the regular expressions literals and using the RegExp object constructor.

Syntax

// Regular Expression Literal
const regex = /pattern/modifiers
// RegExp Object Constructor
const regex2 = new RegExp(pattern, modifiers)

In the above syntax, we have used regular expression literals and RegExp object constructor to create a regular expression. The ‘pattern’ is the regular expression pattern.

Modifiers

Modifiers specify performing case-insensitive, multiline, and global searches to match a pattern.

Modifier	Description
i	This specifies case-insensitive matching.
g	This specifies global matching.
m	This specifies multiline matching.

Brackets

Brackets specify the range of the characters.

Expression	Description
[xyz]	It uses to find any characters between the brackets.
[^xyz]	It uses to find any characters, not between the brackets.
[0-9]	It uses to find any digits that are in between the brackets.
[^0-9]	It uses to find any digits that are not in between the brackets.
(x\|y)	It uses to find any of the alternatives that are specified.

Quantifiers

Quantifiers specify the frequency or position of the characters.

Expression	Description
a*	It matches any string containing zero or more instances of a.
a+	It matches any string containing at least one instance of a.
a?	It matches any string containing zero or one instance of a.
^a	It matches any string containing ‘a’ at the beginning of it.
a$	It matches any string containing ‘a’ at the end of it.
?=a	It matches any string that is followed by a specific string ‘a’.
?!a	It matches any string not followed by a specific string ‘a’.
a{N}	It matches any string that contains a sequence of ‘N’ a’s. Example: a{4} = ‘aaaa’
a{N, M}	It matches any string that contains a sequence of ‘N’ to ‘M’ a’s.
a{N, }	It matches any string that contains a sequence of at least N a’s.

Metacharacters

Characters with a special significance are known as metacharacters.

Expression	Description
.	It finds a single character, except the newline or line terminator.
\w	It finds a word character.
\W	It finds a non-word character.
\d	It finds a digit.
\D	It finds a non-digit character.
\b	It finds a match at the beginning or end of a word.
\B	It finds a match, but not at the beginning or end of a word.
\s	It finds a whitespace character.
\S	It finds a non-whitespace character.
	It finds a new line character.
\t	It finds a tab character.
\0	It finds a NULL character.
\v	It finds a vertical tab character.
\f	It finds a form feed character.

Example 1

In the below example, we have used the regular expression to validate an email id pattern. First, the regular expression literals create the regular expression. Then, an input field takes user input for email id, and a button ‘Check’ execute a function with a click event. This function will validate the email id using the test() method and show the result on the webpage.


<html>
<body>
   <h2>Validating email id with the <i>Regular Expression and test() method</i>in JavaScript</h2>
   <h4>Enter email id to validate:</h4>
   <input id="input-field" type="email" name="email" />
   <button onclick="validate()">Check</button>
   <div
      id="root"
      style=" background-color: rgb(240, 248, 255); border: 1px solid gray; margin: 5px 0px; padding: 10px; " >
   </div>
   <script>

      // 'Check' button click event handler function
      function validate() {
         // element
         const root = document.getElementById('root')
         //input field
         const input_field = document.getElementById('input-field').value
         // Regular Expression for Email
         const regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
         const result = regex.test(input_field)
         root.innerHTML = result
         ? input_field + ' is valid!'
         : input_field + ' is not valid!'
      }
   </script>
</body>
</html>

Example 2

In the below example, we have used the regular expression to validate a 10-digit phone number. First, the regular expression object constructor creates the regular expression. Then, an input field takes user input for phone numbers, and a button ‘Check’ execute a function with a click event. This function will validate the phone number using the test() method and show the result on the webpage.


<html>
<body>
   <h2>Validating 10-digit phone number with the <i>Regular Expression and test() method</i> in JavaScript</h2>
   <h4>Enter the phone number to validate:</h4>
   <input id="input-field" name="phone" />
   <button onclick="validate()">Check</button>
   <div
      id="root"
      style=" background-color: rgb(240, 248, 255); border: 1px solid gray; margin: 5px 0px; padding: 10px; ">
   </div>
   <script>
      function validate() {
         const root = document.getElementById('root')
         const input_field = document.getElementById('input-field').value

         // Regular Expression for Phone number
         const regex = new RegExp('^[0-9]{10}$')
         const result = regex.test(input_field)
         root.innerHTML = result
         ? input_field + ' is valid!'
         : input_field + ' is not valid!'
      }
   </script>
</body>
</html>

In this tutorial, we discussed the regular expression in JavaScript. We have also seen different examples to use the regular expression to validate email and phone umber.