Regular Expression in JavaScript – Explained with Examples
A regular expression (RegExp) is a JavaScript element used to bundle the patterns you wish to find in a specific string of characters such as text, password, and email address.
In other words, RegExp is effective for pattern-matching and search-and-replace operations on strings.
Syntax of JavaScript's Regular Expression
/pattern/flags
As shown in the snippet above, a Regular Expression is composed of three main components:
- An opening and a closing slash (
/.../
) - A pattern enclosed between the pair of slashes
- Zero or more flags appended to the pair of slashes
Let's see some examples.
Example 1: RegExp with Two Flags
/CodeSweetly/gi;
The regular expression in the snippet above consists of:
- The regular expression's opening and closing slash (
/.../
) - The pattern we wish to find (
CodeSweetly
) - Two flags (
i
andg
).
The i
flag tells the computer to do a case-insensitive search of CodeSweetly
.
The g
flag instructs the system to search globally for the text that matches the CodeSweetly
pattern.
Therefore, JavaScript will not limit its search to the first string that matches CodeSweetly
. Instead, it will find all strings corresponding to the pattern's sequence.
Developers often use string methods like match()
, matchAll()
, replace()
, search()
, and split()
with regular expressions.
Example 2: RegExp Case-Insensitive Search
"I love CodeSweetly".search(/CodeSweetly/i);
We used the code above to do a case-insensitive search for the CodeSweetly
pattern in the "I love CodeSweetly"
string.
The snippet above consists of:
- The string value we wish to search (
"I love CodeSweetly"
) - A JavaScript
search()
method that we used to search the string for the regular expression pattern - The regular expression's opening and closing slash (
/.../
) - The pattern we wish to find (
CodeSweetly
) - One flag (
i
).
Example 3: RegExp Pattern Replacement
const myText = "Walker walked into a shop while walking home.";
const myReplacementResult = myText.replace(/walk/gi, "Jogg");
console.log(myReplacementResult);
// The invocation above will return:
// "Jogger Jogged into a shop while Jogging home."
We used the code above to do a global case-insensitive replacement of the walk
pattern with the "Jogg"
string.
So, now that we know what a regular expression is, we can discuss the typical RegExp operators.
Regular Expression Operators
Below are the standard operators used with regular expressions.
- Groups and ranges
- Quantifiers
- Metacharacter
- Assertions
- Flags
Let's discuss each operator.
Learn Flexbox with Images
Groups and Ranges
We use the groups and ranges operators to specify the groups and ranges of characters we wish to find in a specific string.
Types of groups and ranges RegExp operators
The common types of the groups and ranges operators are:
- Character set
- Not (also called caret)
- To
- Or
- Capturing Group
- Named Capturing Group
- Non-capturing group
Let's discuss each "groups and ranges" RegExp operator.
Character set [abc]
A regular expression's character set defines the set of characters you wish to find in a single character's position.
Developers use a pair of square brackets ([...]
) to represent RegExp's character set.
Below are some examples.