Skip to content

Instantly share code, notes, and snippets.

@anthonypena97
Last active September 23, 2021 11:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anthonypena97/d3bbea1231354e16edec0fab8ec98693 to your computer and use it in GitHub Desktop.
Save anthonypena97/d3bbea1231354e16edec0fab8ec98693 to your computer and use it in GitHub Desktop.
Email RegEx Validation Tutorial

Email RegEx Validation

Follow along this gist for an explanation on targeting email address strings using a Regular Expression in JavaScript.

Summary

Our Regular Expression: /^([a-z0-9_.-]+)@([\da-z.-]+).([a-z.]{2,6})$/

A Regular Expression, or RegEx, is used to target a string value. The expression itselfs specifies the composition of the string that is being targetted.

Throughout this page, the individual components of RegEx above will be explained. This particular expression is used to validate and or target email addresses.

Table of Contents

Regex Components

Delimiters

At the highest level of our expression are two /, or better known as, Delimiters. These two forwards slashes declare that there is a RegEx conatined in between. The email address must match this expression that is found in between the Delimiters.

Anchors

Our next component in the heirerchy, is our Anchors. In our expression, we have the use of ^ and $. The ^ indicates that are target string must begin with the following expression. The $ indicates that our target must end with the expression stated before. Thus, the use of both symbols, in this case, means our targeted string must be an exact match to our RegEx. Our target string, or email address, may not contain anything before or after.

Within our Anchors we find three Groupings and two different Literals

Grouping and Capturing

The Expression above contains three groupings indicated by the use of () paranthesis. ([a-z0-9_\.-]+), ([\da-z\.-]+), and ([a-z\.]{2,6}). Specifying groups within an expressions allows for the capture of different sections to a target. In our use case, we are first targetting the username, domain name, and lastly the top-level-domain, or TLD. johndoe gmail .com

Within our Groupings, we find a Bracket Expression paired with a Quantifier

Literals

Outside of the groupings, we find two Single Characters, or Literals, with the use of \. and @. These target the specific, or literal character in a string. The @ targets the symbol used in emails to distinguish the username from the domain. The \. searches for the . character wich is found in ".com" or ".net". The \., must include the blackslash, unlike the @, as it alone is a Character Class with the rule of matching any character, thus, the combination of the \ and . make it an "Escaped Character, instead of a Literal Character.

Bracket Expressions

Our RegEx expression conatains three Bracket Expressions, [a-z0-9_\.-], [\da-z\.-], and [a-z\.]. Bracket Expressions define a rule of what character can be targetted. These Bracket Expressions are made up of Meta Character ranges, a Literal, and a Character Class. The Meta Character ranges, a-z, and 0-9 specify the target may be any lowercase character and or any number. There is the use of the \. to specify the . character literal can be targeted, as well as the - character. And lastly, the use of \d, a Character Class, targets any single digit.

These Bracket Expressions are paired with Quantifiers to specify how many characters long this rule extends for.

Quantifiers

Each Bracket Expression within our RegEx is paired with a Quantifier with the use of + and {2,6}. Quantifiers specify how many times the previous specified rules extends for. In our case, the + specifies there must exist 1 or more of the previous Bracket Expression. The {2,6}, states there should be 2 to 6 characters which match the previous Bracket Expression rules. This is range is used for the amount of characters in TLD , ".com" or ".org", for example.

The list of Quantifiers includes *, +, ?, and {}.

Character Classes

Character Classes are special short hand expressions. We see the use \d, which indicates any single digit, within the second Bracket Expression used for targeting the domain name.

The list of Character Classes includes: \d, \w, \s, and .

Usage

One manner of usage in JavaScript is using the .test() method in order to test if a string fufills the RegEx rule.

const r = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
const s = "john.doe@gmail.com";
 
console.log(r.test(s));// expected output => true

The .match() is another usage. This method will take a string and search if there is any part of the string that matches the RegEx rule.

const r = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
const s = "My email is john.doe@gmail.com thank you!";
 
console.log(s.match(r)[0]);// expected output => john.doe@gmail.com

Author

This gist was written by Anthony Pena. Anthony is a current student at the University of Utah. Visit Anthony's repositories here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment