Tutorial Playlist

JavaScript Tutorial: Learn JavaScript from Scratch

Overview

An Introduction to JavaScript: Here Is All You Need to Know

Lesson - 1

JavaScript Hello World: Here's What You Need To Know

Lesson - 2

All You Need to Know About JavaScript Arrays

Lesson - 3

Using Array Filter In JavaScript to Filter Array Elements

Lesson - 4

Everything You Need to Know About Array Reduce JavaScript

Lesson - 5

Introduction To JavaScript Loops: Do-While, For, For-In Loops

Lesson - 6

All You Need to Learn About Javascript Functions

Lesson - 7

The Best Guide on How to Implement JavaScript Closures

Lesson - 8

JavaScript “This” Keyword and How to Implement It

Lesson - 9

How to Implement JavaScript Form Validation

Lesson - 10

An Introduction Guide To JavaScript RegEx

Lesson - 11

How to Validate an Email Address in JavaScript?

Lesson - 12

All You Need to Know About JavaScript Promises

Lesson - 13

How to Implement JavaScript Async/Await

Lesson - 14

JavaScript DOM Tutorial: 2020 Edition

Lesson - 15

JavaScript Objects: Properties, Methods, and Accessors

Lesson - 16

An Introduction to Javascript Games: The Best Guide

Lesson - 17

An Easy Guide To Build A Calculator App In JavaScript

Lesson - 18

Javascript Projects: The Best Guide

Lesson - 19

What is OOP in JavaScript? How is it Implemented?

Lesson - 20

The Best Guide to Understanding JavaScript Learning Path

Lesson - 21

Java Vs .NET: Which Is the Best Technology to Choose?

Lesson - 22

Top 40 JavaScript Interview Questions and Answers for 2022

Lesson - 23

Typeof in JavaScript: Checking Data Types Using the Typeof Operator

Lesson - 24

Tips and Tricks That You Should Know Before Going to a Coding Interview

Lesson - 25

Callback Functions in JavaScript

Lesson - 26

JavaScript Events

Lesson - 27
An Introduction Guide To JavaScript RegEx

Regular Expressions are patterns that match a combination of characters in a string. JavaScript supports regular expressions mostly for text search and text replacement.

What is JavaScript RegExs? 

A JavaScript RegEx is a sequence of characters that forms a search pattern. You can define what needs to be searched in a text with the help of regular expressions. These expressions can be of any number of characters, be it alphabets, digits or special characters. They are more commonly used for text search and text replacement operations.

General Syntax: 

/pattern/flag

The syntax consists of two forward-slashes separated by a character pattern and ending with a flag. 

Full Stack Java Developer Course

In Partnership with HIRIST and HackerEarthEXPLORE COURSE
Full Stack Java Developer Course

What Are the Flags, Patterns, and Quantifiers?

For the effective working of Regular Expressions, flags, patterns, and quantifiers are crucial. Let us try to understand them one by one. 

Flags

Flags alter the behavior of JavaScript RegEx. They may be appended to the end of a RegEx literal, or they may be specified as the second argument to the regular expression. Here’s a list of flags or modifiers supported by JavaScript.

  • g - Global. Finds all possible matches for the given characters
  • i - Ignore case. /[a-z]/i is equivalent to /[a-zA-Z]/
  • m - Multiline. ^ and $ are used to match the beginning and end of each line, respectively
  • u - Unicode. If this flag is not supported, you must match specific Unicode characters with \uXXXX where XXXX is the character's value in hexadecimal
  • y - Finds all consecutive matches

JavaScript-RegEx

In the example presented above, the pattern provided was the word “Welcome”. As you can see, the word is highlighted in the text. The flag ‘g’ is used to indicate that it highlights all the matches in the text for the word ‘Welcome’. 

Modifiers_JavaScript-RegEx.

In this example, the flag “i” is used to indicate case insensitivity. Although the pattern is in the lower case, the string gets matched in the text. 

Patterns

The patterns in JavaScript RegExs suggest the range of characters that are to be searched for. They are enclosed within brackets, as shown below: 

  • [a-z] - Finds all the characters from a to z (lower cases only)
  • [^a-z] - Finds all the characters that are not letters from a to z. It selects all the whitespaces as well
  • [0-9] - Finds all digits between 0 and 9 
  • [a-z|0-9] - Finds any character of digits separated by “|”

Patterns_JavaScript-Regex

In this example, all the digits are matched. 

Patterns_JavaScriptRegex.

If you closely observe, the upper case letters are not matched. This is because the flag “i” is not used. All the lowercase letters in the alphabet and digits are matched.

A ‘^’ (caret) symbol indicates that the characters following it should not be matched with the text. In the example above, all the lowercase letters are ignored. However, all the digits, whitespaces, and uppercase letters are matched in the text. 

Quantifiers

Quantifiers define the number of occurrences of a string. The most commonly used quantifiers are ‘+’, ‘*’ and ‘?’. 

+ - Indicates one or more occurrence of the character n 

* - Indicates zero or more occurrences of the character n 

? - Indicates zero or one occurrence of the character n 

In the example shown above, we are looking for the character ‘a’ in the string and rightly so, they are highlighted. 

Although the quantifier ‘*’ indicates zero or more occurrences of the character ‘a’, it is followed by the character ‘b’. As a result, the letter ‘a’ in the first text does not get matched since it is not followed by the letter ‘b’. 

Quantifiers_JavaScript-Regex

In this example, all strings with zero or more occurrences of ‘a’, followed by zero or more occurrences of ‘b’ are matched. Hence, the letter ‘a’ in the first text gets matched. 

What Are Metacharacters?

Characters with special meaning are known as metacharacters. Given below is a list of a couple of metacharacters and their descriptions. 

.

Finds a character except for newline or a line terminator 

\w 

Matches any word character

\W

Matches any word that is not a word character

\s

Matches any whitespace character

\S

Matches any character that is not a whitespace (tab, spaces, line breaks)

In the above example, all the word characters are matched. 

All the characters that are not words are matched. 

Metacharacter_JavaScript-RegE

All whitespace characters are matched. 

Metacharacter-JavaScript-RegEx

All the digits are matched. 

A Simple Demo

Now that you have understood the implementation of JavaScript RegExs, let us learn about how to search for a phone number using these expressions. 

Consider an eight-digit telephone number with a three-digit code in the beginning. It can be written in two ways: 

XXX - XXXXXXXX or XXXXXXXXXXX where X represents a digit. 

A single expression can be written that matches both these strings. 

Here, the number in the curly brackets indicates the number of digits to match. The presence of ‘?’ quantifier indicates zero of one occurrence of the preceding token, i.e., hyphen. Both the strings get matched for the same character pattern.

Master the complete JavaScript fundamentals, jQuery, Ajax, and more with the Javascript Certification Training Course. Check out the course preview!

Next Steps

This JavaScript RegEx article introduced you to Regular Expressions. To learn more about JavaScript and make a career as a developer, certification is highly recommended and could act as a catalyst to your coding career. Simplilearn's JavaScript Certification Training course helps individuals master the JavaScript programming language in an all-inclusive training program that includes complete JavaScript fundamentals, jQuery, Ajax, and more. You will also have the opportunity to apply your skills by building a real-time chat application.

If you have any questions or feedback, let us know in the comments section. Our experts will get back to you at the earliest.

About the Author

Chinmayee DeshpandeChinmayee Deshpande

Chinmayee is a Research Analyst and a passionate writer. Being a technology enthusiast, her thorough knowledge about the subject helps her develop structured content and deliver accordingly.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.