in , ,

JavaScript Regex

JavaScript Regex
JavaScript Regex

In this tutorial, you will learn about JavaScript regular expressions (Regex) with the assistance of examples.

What Is a Regular Expression?

A regular expression is a sequence of characters that forms a search pattern.

At the point when you look for information in a text, you can use this search pattern to portray what you are looking for.

A regular expression can be a single character or a more complicated example.

regular expressions can be used to play out a wide range of text search and text replace activities.

In JavaScript, a Regular Expression (RegEx) is an object that portrays an arrangement of characters used for characterizing a search pattern. For instance,

/^a...s$/

The above code characterizes a RegEx design. An example is any five-letter string beginning with an and finishing with s.

An example characterized using RegEx can be used to coordinate against a string.

ExpressionStringMatched?
/^a…s$/absNo match
 aliasMatch
 abyssMatch
 AliasNo match
 An abacusNo match

Create a RegEx

There are two different ways you can create a regular expression in JavaScript.

  1. Using a regular expression literal:

The regular expression comprises of an example enclosed between slashes/. For instance,

cost regularExp = /abc/;

Here, /abc/ is a regular expression.

2. Using the RegExp() constructor function:

You can likewise create a regular expression by calling the RegExp() constructor work. For instance,

const reguarExp = new RegExp('abc');

For instance,

const regex = new RegExp(/^a...s$/);
console.log(regex.test('alias')); // true

In the above example, the string alias name matches with the RegEx design/^a…s$/. Here, the test() strategy is used to check if the string matches the example.

There are a few different techniques accessible to use with JavaScript RegEx. Before we explore them, we should learn about regular expressions themselves.

In the event that you definitely know the rudiments of RegEx, leap to JavaScript RegEx Methods.


Determine Pattern Using RegEx

To indicate regular expressions, metacharacters are used. In the above example (/^a…s$/), ^ and $ are metacharacters.


MetaCharacters

Metacharacters are characters that are deciphered in an exceptional manner by a RegEx engine. Here’s the list of metacharacters:

[] . ^ $ * + ? {} () \ |


[] – Square brackets

Square brackets specify a set of characters you wish to match.

ExpressionStringMatched?
[abc]a1 match
 ac2 matches
 Hey SohailNo match
 abc de ca5 matches

Here, [abc] will match if the string you are trying to match contains any of the a, b or c.

You can also specify a range of characters using – inside square brackets.

[a-e] is the same as [abcde].

[1-4] is the same as [1234].

[0-39] is the same as [01239].

You can complement (invert) the character set by using the caret ^ symbol toward the beginning of a square-bracket.

[^abc] means any character except a or b or c.

[^0-9] means any non-digit character.


. – Period

A period matches any single character (except newline ‘\n’).

ExpressionStringMatched?
..aNo match
 ac1 match
 acd1 match
 acde2 matches (contains 4 characters)

^ – Caret

The caret symbol ^ is used to check if a string starts with a certain character.

ExpressionStringMatched?
^aa1 match
 abc1 match
 bacNo match
^ababc1 match
 acbNo match (starts with a but not followed by b)

$ – Dollar

The dollar symbol $ is used to check if a string ends with a certain character.

ExpressionStringMatched?
a$a1 match
 formula1 match
 cabNo match

*- Star

The star symbol * matches zero or more occurrences of the pattern left to it.

ExpressionStringMatched?
ma*nmn1 match
 man1 match
 mann1 match
 mainNo match (a is not followed by n)
 woman1 match

+- Plus

The plus symbol + matches one or more occurrences of the pattern left to it.

ExpressionStringMatched?
ma+nmnNo match (no a character)
 man1 match
 mann1 match
 mainNo match (a is not followed by n)
 woman1 match

? – Question Mark

The question mark symbol? matches zero or one occurrence of the pattern left to it.

ExpressionStringMatched?
ma?nmn1 match
 man1 match
 mannNo match (more than one n character)
 mainNo match (a is not followed by n)
 woman1 match

{} – Braces

Think about this code: {n,m}. This implies at any rate n, and at most m repetitions of the example left to it.

ExpressionStringMatched?
a{2,3}abc datNo match
 abc daat1 match (at daat)
 aabc daaat2 matches (at aabc and daaat)
 aabc daaaat2 matches (at aabc and daaaat)

How about we attempt one more example. This RegEx [0-9]{2, 4} matches at any rate 2 digits yet not more than 4digits.

ExpressionStringMatched?
[0-9]{2,4}ab123csde1 match (match at ab123csde)
 12 and 3456733 matches (12, 3456, 73)
 1 and 2No match

| – Alternation

Vertical bar | is used for alternation (or operator).

ExpressionStringMatched?
a|bcdeNo match
 ade1 match (match at ade)
 acdbea3 matches (at acdbea)

Here, a|b match any string that contains either a or b


() – Group

Parentheses () is used to group sub-designs. For instance, (a|b|c)xz coordinate any string that matches either an or b or c followed by xz

ExpressionStringMatched?
(a|b|c)xzab xzNo match
 abxz1 match (match at abxz)
 axz cabxz2 matches (at axzbc cabxz)

\ – Backslash

Backslash \ is used to escape different characters including all metacharacters. For instance,

\$a coordinate if a string contains $ followed by a. Here, $ isn’t deciphered by a RegEx engine in a special manner.

On the off chance that you are uncertain if a character has uncommon importance or not, you can put \ before it. This ensures the character isn’t treated in an extraordinary manner.


Special Sequences

Special sequences make normally used examples simpler to compose. Here’s a list of special sequences:

\A – Matches if the predefined characters are toward the beginning of a string.

ExpressionStringMatched?
\Athethe sunMatch
 In the sunNo match

\b – Matches if the specified characters are at the beginning or end of a word.

ExpressionStringMatched?
\bfoofootballMatch
 a footballMatch
foo\ba footballNo match
 the fooMatch
 the afoo testMatch
 the afootestNo match

\B – Opposite of \b. Matches if the specified characters are not at the beginning or end of a word.

ExpressionStringMatched?
\BfoofootballNo match
 a footballNo match
foo\Ba footballMatch
 the fooNo match
 the afoo testNo match
 the afootestMatch

\d – Matches any decimal digit. Equivalent to [0-9]

ExpressionStringMatched?
\d12abc33 matches (at 12abc3)
 JavaScriptNo match

\D – Matches any non-decimal digit. Equivalent to [^0-9]

ExpressionStringMatched?
\D1ab34″503 matches (at 1ab34″50)
 1345No match

\s – Matches where a string contains any whitespace character. Identical to [ \t\n\r\f\v].

ExpressionStringMatched?
\sJavaScript RegEx1 match
 JavaScriptRegExNo match

\S – Matches where a string contains any non-whitespace character. Identical to [^ \t\n\r\f\v].

ExpressionStringMatched?
\Sa b2 matches (at a b)
  No match

\w – Matches any alphanumeric character (digits and alphabets)). Identical to [a-zA-Z0-9_]. Coincidentally, underscore _ is likewise viewed as an alphanumeric character.

ExpressionStringMatched?
\w12&”: ;c3 matches (at 12&”: ;c)
 %”> !No match

\W – Matches any non-alphanumeric character. Identical to [^a-zA-Z0-9_]

ExpressionStringMatched?
\W1a2%c1 match (at 1a2%c)
 JavaScriptNo match

\Z – Matches if the specified characters are at the end of a string.

ExpressionStringMatched?
JavaScript\ZI like JavaScript1 match
 I like JavaScript ProgrammingNo match
 JavaScript is funNo match

Tip: To assemble and test regular expression, you can use RegEx tester tools, for example, regex101. This tool causes you in creating regular expressions, however, it also helps you to learn them.

Presently you comprehend the essentials of RegEx, let’s discuss how to use RegEx in your JavaScript code.


JavaScript Regular Expression Methods

As referenced above, you can either use RegExp() or regular expression literal to make a RegEx in JavaScript.

const regex1 = /^ab/;
const regex2 = new Regexp('/^ab/');

In JavaScript, you can use regular expressions with RegExp() strategies: test() and exec().

There are additionally some string strategies that allow you to pass RegEx as its parameter. They are: match(), replace(), search(), and split().

MethodDescription
exec()Executes a search for a match in a string and returns an array of data. It returns invalid on a mismatch.
test()Tests for a match in a string and returns true or false.
match()Returns an array containing all the matches. It returns null on a mismatch.
matchAll()Returns an iterator containing all of the matches.
search()Tests for a match in a string and returns the index of the match. It returns -1 if the search fails.
replace()Looks for a match in a string and replaces the coordinated substring with a replacement substring.
split()Break a string into an array of substrings.

Example 1: Regular Expressions

const string = 'Find me';
const pattern = /me/;

// search if the pattern is in string variable
const result1 = string.search(pattern);
console.log(result1); // 5

// replace the character with another character
const string1 = 'Find me';
string1.replace(pattern, 'found you'); // Find found you

// splitting strings into array elements
const regex1 = /[\s,]+/;
const result2 = 'Hello world! '.split(regex1);
console.log(result2); // ["I", "am", "learning", "JavaScript", "RegEx"]

// searching the phone number pattern
const regex2 = /(\d{3})\D(\d{3})-(\d{4})/g;
const result3 = regex2.exec('My phone number is: ..... .');
console.log(result3); // [" -", "", "", ""]

Regular Expression Flags

Flags are used with regular expressions that allow different alternatives, for example, global search case-insensitive search, and so forth They can be used separately or together.

FlagsDescription
gPerforms a global match (find all matches)
mPerforms multiline match
iPerforms case-insensitive matching

Example 2: Regular Expression Modifier

const string = 'Hello hello hello';

// performing a replacement
const result1 = string.replace(/hello/, 'world');
console.log(result1); // Hello world hello

// performing global replacement
const result2 = string.replace(/hello/g, 'world');
console.log(result2); // Hello world world

// performing case-insensitive replacement
const result3 = string.replace(/hello/i, 'world');
console.log(result3); // world hello hello

// performing global case-insensitive replacement
const result4 = string.replace(/hello/gi, 'world');
console.log(result4); // world world world

Example 3: Validating the Phone Number

// program to validate the phone number

function validatePhone(num) {

    // regex pattern for phone number
    const re = /^\(?([X-X]{X})\)?[-. ]?([X-X]{X})[-. ]?([X-X]{X})$/g;

    // check if the phone 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);
    }
}

// take input
let number = prompt('Enter a number XXX-XXX-XXXX');

validatePhone(number);

Output

Enter a number XXX-XXX-XXXX: 
Enter number in XXX-XXX-XXXX format: 
The number is valid

Example 4: Validating the Email Address

// program to validate the email address

function validateEmail(email) {

    // regex pattern for email
    const re = /\[email protected]\S+\.\S+/g;

    // check 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);
    }
}

// take input
let email = prompt('Enter an email: ');

validateEmail(email);

Output

Enter an email: hello hello
Enter a valid email: [email protected]
The email is valid.

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

salman khan

Written by worldofitech

Leave a Reply

JavaScript Generators

JavaScript Generators