RegEx Javascript explain

gist-template.md

RegEx Tutorial

A tutorial that explains how a specific regular expression, or regex, functions by breaking down each part of the expression.

Summary

RegEx is actually a tool to define a search term parameter. It help us to programmatically search by using simple text characters but we can organize them and transform them into meta characters. For example the following regular expression will help us find any phone number in a website:

^(?:(\+|00)\d{1,3}[-\s.])?(\()?\d{3,10}(\))?(?:[-\s.)]\d{2,7}([-\s.]\d{2,5})?([-\s.]\d{2})?)?$ /i

Table of Contents

• Anchors
• Quantifiers
• OR Operator
• Character Classes
• Flags
• Grouping and Capturing
• Bracket Expressions
• Greedy and Lazy Match

Regex Components

Our regular expression is made up with five components to match with all kind of formats around the world.

1. The first component is the international suffix for the country code: ^(?:(\+|00)\d{1,3}[-\s.])?

👋 see an example screenshoot that follows.

2. Next component is the area code: (\()?\d{3,10}(\))?

👇 ...more screenshoots

3. The last three components are for the rest pf the phone separated by the preference of the user:

• (?:[-\s.)]\d{2,7}

• ([-\s.]\d{2,5})?

• ([-\s.]\d{2})?)?$

• The $ asserts position at the end of the string

✌️ last screenshoot ;)

Anchors

Anchors encapsulate regex components to define what search pattern to find.

Example: ^123$ where the ^ character indicates the start of a string, and the $ character indicates the end of a string In our example, we use two anchors. One at the beginning, and one at the end; to match the string (phone numbers) we are searching for.

Quantifiers

? Is the meta character used for like true or false.

Example: (\()? Include the ( if exists.

OR Operator

The | meta character is to define one case or another.

Example: (\+|00) if a number starts with + sign or it comes with two zeros.

Character Classes

. = Any character except newline

When combined with the \ anchor, \. [a-z] = Accepts any letter between a and z [0-9] = Accepts any digit between 0 and 9

Flags

/i modifier: insensitive. Case insensitive match (ignores case of [a-zA-Z])

Grouping and Capturing

Example: ([-\s.]) where the () group together the [-\s.] bracket expression. This regex matches any dash or white space or 0 to 9 characters.

Bracket Expressions

Bracket expressions are the syntax theory on combining character classes. Multiple character classes may be combined in a single bracket expression.

Example: [a-z0-9] where the regex would match any letter or number.

Greedy and Lazy Match

{2, } = Lazy match, searches number 2 or more {2,7} = greedy match, search BETWEEN numbers 2 and 7

Author

© 2022 Published by Vardis Sartzetakis

index.js

let phones = [
    "+1-234-567-8901",
    "+41-234-567-89-01",
    "+33-234 5678901",
    "+1 (234) 568 9901",
    "+30.234.567.8901",
    "001 234 56 78901",
    "001 234 567 8901",
    "+1 6134138417",
    "800-123-4567",
    "(800) 123 4567",
    "(212)867-5509"
]

const regex = new RegExp(/^(?:(\+|00)\d{1,3}[-\s.])?(\()?\d{3,10}(\))?(?:[-\s.)]\d{2,7}([-\s.]\d{2,5})?([-\s.]\d{2})?)?$/, 'i');

phones.forEach(phones => console.log(phones, regex.test(phones)));

view ex1-country suffix.png

view ex2-area suffix.png

view ex3-rest of numbers.png