JavaScript Regular Expression

This post is published to provide the complete information about regular expression in JavaScript.

What is a Regular Expression?

A regular expression is something like a sequence of characters. But it is not a normal sequence of characters, rather it is a sequence that forms a search pattern.

Sometime, we need to implement a simple or complex search in our application, where the search is based on some pattern. For example: let us suppose, we are going to implement a form that asks some information about the user like:

email
password
contact numbers
and many more

where we need to match the pattern of these data before feeding into the database. For example, if we take the first data, that is, email, then we need to match the entered email by user properly. For example, an email must be started with a unique username like fresherearth followed by @ along with a company URL say gmail.com, hotmail.com etc.

So these are some of the scenario where regular expression comes into picture, that allows to implement the match pattern to any data we need to match. But before starting the match pattern, we need to understand its modifiers and patterns. So let's get started.

JavaScript Regular Expression Syntax

Whatever the pattern or regular expression you use for matching, but the basic and general form you need to follow is:

/pattern/modifiers;

Here pattern refers to the search pattern that is used to match. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>The first 'is' is available at Index no.<span id="xyz"></span></p>

   <script>
      let myString = "JavaScript is Fun, is not it?";
      let pos = myString.search(/is/);

      document.getElementById("xyz").innerHTML = pos;
   </script>
   
</body>
</html>

Output

The first 'is' is available at Index no.

Note: The search() method is used to search a substring (value) in a string using regular expression.

And modifiers are used to change the default search method. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>The first 'is' available at Index no.<span id="xyz"></span></p>

   <script>
      let myString = "JavaScript Is Fun. Is not it?";
      let pos = myString.search(/is/i);

      document.getElementById("xyz").innerHTML = pos;
   </script>
   
</body>
</html>

Output

The first 'is' available at Index no.

The i after /is/ force the search pattern to be go case-insensitive.

JavaScript Regular Expression Flags/Modifiers

Flags or modifiers in regular expression are used to modify the search method. Here are the list of flags that can be used in JavaScript regular expression:

g - Used to force the search pattern to go for all matches
i - Used to force the search pattern to go case-insensitive matching
m - Used to force the match pattern to go multiline

For example, let me create a JavaScript example without using any modifiers. Then will use modifier(s) to see the change:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>

   <script>
      let myString = "JavaScript is Fun, is not it?";
      let matches = myString.match(/is/);

      document.getElementById("xyz").innerHTML = matches;
   </script>
   
</body>
</html>

Output

Note: The match() method is used to match a string with/using a regular expression.

Now let me implement the g modifier to allow the match pattern globally. That is, to get all matches, instead of stopping after the first match:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>

   <script>
      let myString = "JavaScript is Fun, is not it?";
      let matches = myString.match(/is/g);

      document.getElementById("xyz").innerHTML = matches;
   </script>
   
</body>
</html>

Output

Then let's use i modifier to go case-insensitive matching:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>

   <script>
      let myString = "JavaScript is Fun. Is not it?";
      let matches = myString.match(/is/gi);

      document.getElementById("xyz").innerHTML = matches;
   </script>
   
</body>
</html>

Output

JavaScript Regular Expression Patterns

In JavaScript regular expression, we can use brackets to apply the match pattern through range of characters defined in the brackets. For example:

[abc] - Matches any of the enclosed characters. That is, this pattern can be used to match any characters that are in the brackets. We can also use [a-c].
[^abc] - Matches any character except the enclosed characters. We can also use [^a-c].
[0-9] - Matches any of the enclosed numbers.
[^0-9] - Matches any character except the enclosed characters.
(a|b) - Matches any of the character.

For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>List of all Matches for First Pattern: <b><span id="resA"></span></b></p>
   <p>List of all Matches for Second Pattern: <b><span id="resB"></span></b></p>
   <p>List of all Matches for Third Pattern: <b><span id="resC"></span></b></p>

   <script>
      let text = "WE have created fresherearth.com to provide FREE online learning.";
      let a = text.match(/[re]/gi);
      let b = text.match(/[^re]/gi);
      let c = text.match(/[a-d]/gi);
      
      document.getElementById("resA").innerHTML = a;
      document.getElementById("resB").innerHTML = b;
      document.getElementById("resC").innerHTML = c;
   </script>
   
</body>
</html>

Output

List of all Matches for First Pattern:

List of all Matches for Second Pattern:

List of all Matches for Third Pattern:

Let me create another example that uses the [0-9] and [^0-9] pattern:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>List of all Matches for First Pattern: <b><span id="A"></span></b></p>
   <p>List of all Matches for Second Pattern: <b><span id="B"></span></b></p>
   <p>List of all Matches for Third Pattern: <b><span id="C"></span></b></p>

   <script>
      let text = "X23sx495682043-234932lo6023";
      let a = text.match(/[0-9]/g);
      let b = text.match(/[^0-9]/g);
      let c = text.match(/[3-6]/g);
      
      document.getElementById("A").innerHTML = a;
      document.getElementById("B").innerHTML = b;
      document.getElementById("C").innerHTML = c;
   </script>
   
</body>
</html>

Output

List of all Matches for First Pattern:

List of all Matches for Second Pattern:

List of all Matches for Third Pattern:

Here is another example regarding (a|b) pattern:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>

   <script>
      let mystr = "What do you like? Cricket or Football?";
      let ptrn = /(cricket|football)/gi;
      document.getElementById("xyz").innerHTML = mystr.match(ptrn);
   </script>
   
</body>
</html>

Output

It is not limited to use only two character or words. We can use multiple words or characters to match, from the listed characters or words. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>

   <script>
      let mystr = "London, Berlin, london, Austin, Dallas, Seattle";
      let ptrn = /(London|Austin|Dallas|Berlin)/gi;
      document.getElementById("xyz").innerHTML = mystr.match(ptrn);
   </script>
   
</body>
</html>

Output

List of Metacharacters used in JavaScript Regular Expression

Metacharacters are characters that starts with a backslash (/) followed by character(s) that has/have special meaning in computer programming and plays an important role in defining the match pattern while working with regular expression in JavaScript.

Here are the list of metacharacters used in JavaScript regular expression:

. - used to match any character (except newline and/or other line terminators).
\w - used to match all word characters. A-Z, a-z, 0-9 and, underscore (_) are all word characters.
\W - used to match all characters except word characters.
\d - used to match any digit from 0 to 9.
\D - used to match any character other than digits (0-9).
\s - used to match any whitespace. A space, tab, vertical tab, new line, carriage return, and form feed are all whitespaces.
\S - used to match any character other than whitespace characters.
\b - used to match any word beginning or ending with specified character or combination of characters.
\B - used to match any word that does not begins or ends with specified character or combination of characters.
\0 - used to find a null character.
\n - used to match new line in the specified string.
\f - Used to match form feed character. Since it is exactly similar to matching of new line character. Therefore I have not created a separate article on it.
\r - Used to match carriage return character. It is also similar to \n
\t - Used to match tab character. Similar to \n
\v - Used to match vertical tab character. Similar to \n
\xxx - used to match a character using its octal number, in the form xxx. For example, 165, which is equal to 'u'
\xdd - used to match a character using its hexadecimal number, in the form xdd. For example, 75, which is equal to 'u'

The description and examples of above metacharacters are provided in its separate tutorial.

Quantifiers in JavaScript regular expression are described in its separate tutorial.

JavaScript Online Test

« Previous Tutorial Next Tutorial »