A regular expression in JavaScript is used for text processing and manipulations. It is a sequence of specially formatted characters and forms search patterns that can be used for text search and replace operations, verifying whether the data format is correct or not, etc. They are also known as "regex" or "RegExp."
In this blog, we will study regular expressions in Javascript.
This provides a run-time compilation of the regular expression in JavaScript. If the regular expression pattern is not constant or another source enters the pattern, this method works the best.
Pattern Matching
The regular expressions in JavaScript include digits, letters, etc., and also some special characters.
Special characters are:
. * ? + [ ] ( ) { } ^ $ | \
If these characters have to be used in their literal meaning, they must be backslashed. For example, if we have to use the "*" character, then "\*" should be written.
Let us understand how we can form patterns:
1. Character Class:
A character class is created by enclosing a pattern inside square brackets. For example, [Ninjas]. Character class always matches a single character out of all the characters specified.
We can also create negated character classes by using the caret(^) symbol. A negated character class matches any symbol except those listed.
We can also define a range of characters using the hyphen(-) inside the character class.
Let us look at some examples to understand better:
Pattern
What does it match?
[ced]
any one of the c,d, or e characters
[^ced]
any one except the c,d, or e characters
[a-z]
any one of lowercase a to lowercase z characters
[A-Z]
any one of uppercase A to uppercase Z characters
[a-Z]
any one of lowercase a to uppercase Z characters
[0-9]
any digit from 0 to 9
[a-z0-9]
any one of the lowercase a to lowercase z characters or digit from 0 to 9
2. Predefined character class:
Some character classes are predefined and have shortcut names as they are used very frequently.
Shortcut
What it matches
.
Every character except newline(\n)
\d
any digit characters [0-9]
\D
Any non-digit character [^0-9]
\s
Any whitespace character [\t\n\r]
\S
Any non-whitespace character [^\t\n\r]
\w
Any word character [a-zA-Z_0-9]
\W
Any non-word character [^a-zA-Z_0-9], i.e., anything except a-z, A-Z and 0-9.
3. Repetition Quantifiers:
In character class, we could only match a single character. When we have to match more than one instance of a character, we use quantifiers. They allow us to specify the number of instances wanted.
Let us look at some examples:
RegExp
Character it matches
a+
One or more occurrences of the letter a
a*
Zero or more occurrences of the letter a
a?
Zero or one occurrence of the letter a
a{4}
Exactly four occurrences of the letter a
a{4,6}
At least four occurrences but not more than six occurrences of the letter a
a{4,}
Four or more occurrences of the letter a
a{,6}
At most six occurrences of the letter a
4. Position Anchors:
Anchors are used to match the beginning of the end of a line, word, or string. We use a caret(^) symbol to represent the start and a dollar ($) symbol to represent the end.
RegExp
Character it matches
^a
The letter 'a' at the beginning of the line
$a
The letter 'a' at the end of the line
5. Flags or Pattern Modifiers:
They allow us to control the way of pattern matching. Let us look at some examples to understand better:
Modifier
Function
g
It matches globally and finds all occurrences of the character.
i
It matches in a case-insensitive manner.
m
Changes behavior of position anchors, i.e., ^ and $ to match against a newline boundary (like a line boundary instead of string boundary).
o
It evaluates the expression only once.
s
Changes behavior of the "." (dot) symbol to match all the characters, including newlines.
x
Allows users to use whitespace and comments within a regular expression for clarity.
6. Altercation:
It allows us to specify an alternate version of the pattern. It can be specified using the bar(|). For example, 'Pizza|Burger|Hotdog'.
They are evaluated from left to right until the match is found. The right alternative is ignored entirely if the match is found in the left alternative.
7. Word Boundaries:
It helps search for words that begin or end with a particular pattern. '\b' is the word boundary character.
For example, '/\bint/ matches with words beginning with 'int' like integer. '/int\b/' matches words ending with 'int' like mint.
8. Grouping:
Regular expressions, like mathematical expressions, utilize parenthesis to organize or group subexpressions. A repetition quantifier can be applied to a whole subexpression using parentheses.
For example, the quantifier '+' is only applied to the last character 'i' in regex /hi+/, and it matches the strings "hi", "hii", and so on.
When the quantifier '+' is applied to the group of characters 'h' and 'i' in regex /(hi)+/, which matches the strings "hi", "hihi", and so on.
Examples of using Regular Expressions in JavaScript
1. Validating Phone Number:
function validatePhone(num) {
// Creating regex pattern for phone number
const re = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/g;
// Checking if the number is valid
let result = num.match(re);
if (result) {
console.log('The number is valid.');
}
else {
let num = prompt('Enter number in XXX-XXX-XXXX format:');
validatePhone(num);
}
}
let number = prompt('Enter a number XXX-XXX-XXXX');
validatePhone(number);
You can also try this code with Online Javascript Compiler
Enter a number XXX-XXX-XXXX: 2343223432
Enter number in XXX-XXX-XXXX format: 234-322-3432
The number is valid
2. Validating Email Address:
function validateEmail(email) {
// Creating regex pattern for email
const re = /\S+@\S+\.\S+/g;
// Checking if the email is valid
let result = re.test(email);
if (result) {
console.log('The email is valid.');
}
else {
let newEmail = prompt('Enter a valid email:');
validateEmail(newEmail);
}
}
let email = prompt('Enter an email: ');
validateEmail(email);
You can also try this code with Online Javascript Compiler
Ans: They are used in search engines and also in the find and replace feature in a word document and text editors.
2. Is regular expression different in all languages?
Ans: The syntax may vary slightly in other languages but has the same concept. The specific meaning of the metacharacters may also vary.
3. Is regular expression used in web scraping?
Ans: As we know, regular expressions help us search patterns in the data. We can find the data we want from the website and extract it using them.
Key Takeaways
In this blog, we studied regular expressions in Javascript and how we can use them in searching for patterns in our text. At the end of the blog, we also saw some examples related to regular expressions in JavaScript.