DEV Community

Cover image for RegEx in JavaScript with a cool project πŸ”₯
Jaspal Singh
Jaspal Singh

Posted on

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/
Enter fullscreen mode Exit fullscreen mode
  1. Using RegEx object
let regPat = new RegExp('abc');
Enter fullscreen mode Exit fullscreen mode

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

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')
Enter fullscreen mode Exit fullscreen mode

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}/
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

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
(555)555-5555
(555) 555-5555
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 πŸ’œβ˜•"

Discussion (5)

Collapse
lukeshiru profile image
LUKESHIRU • Edited on

I believe you can have a validation for all those formats in a single RegExp that would look something like this:

/^(1 )*\(*\d{3}([ \-\)] ?)?\d{3}[ \-]?\d{4}/
Enter fullscreen mode Exit fullscreen mode

Maybe I'm missing some case, but afaik that single expressing matches all your examples.

Cheers!

Edit: Yup, it works

Collapse
fjones profile image
FJones • Edited on

It also incorrectly matches:

  1. Multiple opening ( e.g. ((555) 555-5555
  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}/
Enter fullscreen mode Exit fullscreen mode
Collapse
jaspalsingh1998 profile image
Jaspal Singh Author

Thank For sharing this regex pattern with us πŸ˜…πŸ”₯

Collapse
tracygjg profile image
TGJ Gilmore • Edited on

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

Collapse
jaspalsingh1998 profile image
Jaspal Singh Author

Thank you so for the tips mate πŸ˜…πŸ’œ