Skip to content

Instantly share code, notes, and snippets.

@JasmineDaniels
Last active October 6, 2022 02:41
Show Gist options
  • Save JasmineDaniels/be13f605db35e61bbc9343dd28261e15 to your computer and use it in GitHub Desktop.
Save JasmineDaniels/be13f605db35e61bbc9343dd28261e15 to your computer and use it in GitHub Desktop.
Regex Tutorial

Regex Tutorial - Validate Email

This tutorial will demonstrate how to use Regex expressions to validate an email. To follow along and test your expressions go to Regex101.

Table of Contents

Intro

A regular expression is a string of characters that helps you match a search pattern in text. Now lets break down a regex expression in the case of an email, here's an email example@example.com In a valid email we expect your username followed by an @ character, followed by your email provider, followed by a dot ., and their top-level domain TLD (ex: .com, .org).

Here is an example of an email regex expression: /^([a-z0-9A-Z\d\.-_]+)@([a-z\d-]+)\.([a-z]{2,6})?$/

Screen Shot 2022-10-05 at 9 41 31 PM

All characters between the forward slashes are the expression. The forward slashes represent the beginning and end of the expression, this is how your code editor knows you're creating a regex expression. Note in your code editor the foward slashes immediately turn red.

Screen Shot 2022-10-05 at 8 35 33 PM

Anchors

Next up, let's discuss anchors. Anchors do not match any character within the expression, they match the position of the element(s) before, after or between characters, so they expect the match to be at a certain position within the expression.

The anchors in this expression are the caret, ^, and the dollar sign, $. So the expression immediately following the caret, ([a-z0-9A-Z\d\.-_]+), is expected at the beginning of the test string, if the test string that looks to match this group is at the end, it will not be a match.

Grouping and Capturing

Also note the sections of the expression, in this expression there are 3 sections or groups that each have regex characters in them, the groups are partitioned by the parenthesis ( ), group one would be ([a-z0-9A-Z\d\.-_]+), group two would be ([a-z\d-]+), and group three is ([a-z]{2,6}).

Bracket Expressions

Inside each group is a bracket [ ] that has the expression within them, everything inside the brackets is the outline that the expression uses to make a match with a provided string. Each bracket defines what is allowed in the test string at this position. Lets take group one for example, ([a-z0-9A-Z\d\.-_]+), in this bracket we accept all lowercase letters a-z, all UPPERCASE letters A-Z, all digits 0-9, and special characters - the dot ., and underscore _, specifically.

Character Classes

Character class in a regex defines a set of characters. A character class used in this regex is \d which matches any single digit from 0-9.

Escape Characters

Escape characters such as the backlash precedes a reserved character, that would otherwise be interpreted literally. Note the backslash dot behind the second group, ([a-z\d-]+), the behavior of the dot would normally be a wildcard character matching any single character, to escape that behavior use the backlash for it to represent it's own character in the expression.

Quantifiers

Quanitfiers in Regex represents the number of character expected {2, 6} and +. The + quanitfier means that any character within the brackets should match one or more times.
The quantifier in ([a-z]{2,6}) is looking for the group at the end to be between 2-6 characters long. Examples of accepted values for ([a-z]{2,6}):

  • .com
  • .eu

Examples

For Example all of these emails will be accepted because they match our regex pattern.

  • j.daniels@gmail.com
  • jasmine_daniels@yahoo.com
  • jasmineDaniels@hotmail.com

Author - Jasmine Daniels

Follow me for more tutorials like this.
Contact Email
Github

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