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

You can also try this code with Online Javascript Compiler

Run Code

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

You can also try this code with Online Javascript Compiler

Run Code

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:

2. Predefined character class: 

Some character classes are predefined and have shortcut names as they are used very frequently. 

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:

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. 

5. Flags or Pattern Modifiers:

They allow us to control the way of pattern matching. Let us look at some examples to understand better:

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

Run Code

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

You can also try this code with Online Javascript Compiler

Run Code

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!