RegEx in JavaScript with a cool project 🔥

Hi everyone, This is my first blog on this platform in which we are going to learn regex with the help of a cool mini project.

Outline

1. What is RegEx?
2. Use cases of RegEx.
3. Different ways to define RegEx in JavaScript.
4. RegEx Cheatsheet
5. Some useful Flags in RegEx.
6. MetaCharacters
7. Quantifiers
8. Project

What is RegEx?

RegEx is short for Regular Expresssions. RegEx are strings of special characters that are used as patterns to match against strings.

Use cases of RegEx.

• For validations (email validation, phone validation etc).
• Match and replace programs.
• Password pattern matching etc.

Ways to define RegEx in JavaScript.

There are basically two ways to define RegEx in JavaScript.

1. Using Literals
2. Using RegEx Object

Let's have a look at how to define RegEx using both ways.

1. Using Literals

let regPat = /ab/

1. Using RegEx object

let regPat = new RegExp('abc');

For the RegEx object part, you do not need to import/require anything to use it. Since, it is a global object that is available to you everywhere in your code file.

For this blog, I'll be using the literal way

RegEx Cheatsheet

Some useful Flags.

1. i --> It is used to ignore case sensitivity.
2. g --> It is used to perform global search.
3. s --> It is used to match newline character.
4. m --> It is used to perform multi-line search.

You can use more than one flag in your RegEx pattern but it is important to write flags at the end.

For Example

/gold/i.test('GolD')

this will output to true because i flag at the end will ignore the case senstivity.

Metacharacters

Metacharacters are used to match the following character either as the special character or the literals.
Some of the metacharacters are written below.

1. \d --> to match the next character from [0-9]
2. \D --> to match the following character anything but digits.
3. \s --> to match the next character as whitespace/space.
4. \w --> to match the alphabets(both capital and small ones).
5. \W --> to match anything but alphabets.

Quantifiers.

Quantifiers are used to tell how many number of characters or expressions you want to match.

For example: If you want to match 10 digits you will do something like this

let regPat = /\d{10}/

Some of the quantifiers are as follow

1. []? --> It will match the occurrence of anything in bracket for 0 or 1 times.

2. []+ --> Check if occurs 1 or more times.

3. []* --> Occurs 0 or more times.

4. []{n} --> occurs n times.

5. []{n,} --> occurs n or more times.

6. []{n,m} --> occurs at least n times but should be less than m times.

Project.

We will be building a cool mini project using RegEx to validate mobile number in US format.

function telephoneCheck(num){
  let result = false;
  const patterns = [
  /^\d{3}-\d{3}-\d{4}/,
/^\d{10}$/,
/^\d{3}\s\d{3}\s\d{4}/,
/^\(\d{3}\)\d{3}-\d{4}/,
/^1\(\d{3}\)\d{3}-\d{4}/,
/^1\s\(\d{3}\)\s\d{3}-\d{4}/,
/^1\s\d{3}\s\d{3}\s\d{4}/,
/^1\s\d{3}-\d{3}-\d{4}/
]

result = patterns.some(reg => reg.test(num))
return result;
}

telephoneCheck("1 555 555 5555")

It will return true for every format that respects the US mobile number format otherwise false will be returned.

Following are the valid US phone number format

555-555-5555
[phone]
[phone]
555 555 5555
5555555555
1 555 555 5555

--

I hope I was able to deliver something good to you guys ☺. Feedback, suggestions, etc are always welcomed.

Have a fun and safe time and Thank you so much for dedicating your time to go through this blog ❤.

You can follow me on Twitter 💜😅

"Let's Learn and Grow Together. Adios amigos/amigas hasta la proxima vez 💜☕"

Comments

[Tracy Gilmore]

A couple of tips I use when preparing regular expression are.
1, Whenever possible top and tail the expression. Use /^ to start and $/ to end the.
2, Try to replace multi-character patterns + and * with their numeric alternatives {1,N} and {0,N}. It is more characters but more performant and less open to error.
A good learning/test resource is regexr.com/.

[Jaspal Singh]

Thank you so for the tips mate 😅💜

[FJones]

It also incorrectly matches:

1. Multiple opening ( e.g. ([phone]
2. Mismatched () e.g. (555 555-5555
3. Multiple leading 1 e.g. 1 1 555 555-5555

It's important to consider both positive and negative constraints for the resulting regular language.

This should be a bit closer, but also not entirely accurate for certain edge cases:

/^(1 )?(\d{3}|\(\d{3}\))[ -]?\d{3}[ -]?\d{4}/

[Jaspal Singh]

Thank For sharing this regex pattern with us 😅🔥