Regular Expressions in JavaScript

Creating Regular Expressions

Let us have a look at ways to create regular expressions in JavaScript:

1. Regular expression literal: Pattern is enclosed in slashes. During compilation, they are treated as regular expressions.

// Literal Syntax
let re = /Ninjas/; 

 

As the literal syntax is shorter and easier to read, generally, it is preferable to use this.

 

2. RegExp() Constructor: We can call a regular expression constructor as follows:

// Constructor Syntax
let re = new RegExp('Ninjas'); 

 

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);

 

Output :

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);

 

Output:

Enter an email: hellohello
Enter a valid email: learningJS@gmail.com
The email is valid.

practice by yourself with the help of an online javascript compiler.

Must Read Fibonacci Series in JavaScript

Frequently Asked Questions

1. Where are regular expressions used?

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. 

To learn more about programming in JavaScript, check out the JavaScript-guided path. If you are preparing for your next web development interview, check out the blogs, 25 CSS Interview Questions, and 30 JavaScript interview questions.

Credits: GIPHY

Happy Coding!