Chapter 17: Regex Tutorial

Redex "Tutorial".md

Chatpter 17: Computer Science for Javascript: Regex Tutorial

by: Yonas Woldemichael

This is a tutorial outlineing what a regular expression is, but more specifically, what a Regex matching an Email is.

Summary

I will be summarizing the Regex (or Regular Expression) for matching an email. As a final product, this is what the regex for a matching email looks like: "/^([a-z\d.-]+)@([a-z\d-]+).([a-z]{2,8})(.[a-z]{2,8})?$/". Now, to the naked eye, this may seem like a blop a characters thrown on a readMe (because honestly speaking that is what I initially thought of it as), however there are simple yet unique identifiers that each of those characters signify. What are they you might ask? Well continue reading as I will be explaining just that below.

Table of Contents

• Anchors
• Quantifiers
• Usage
• Flags

Regex Components

Anchors

Anchors specifically do not match any single character that you may commonly use/see on your keyboard, however they do have an important function in regex. Anchors aid in matching posisions before or after characters.

• Anchors include the following:

  • ^ Anchor matches the beginning of the text Example:

let str = 'JavaScript';
console.log(/t$/.test(str));

The above will return the value of true as Javascript ends with the letter "t"

• $ Anchor matches the end of the text

Example:

let str = 'JavaScript';
console.log(/^J/.test(str));

The above will return the value of "true" because ^J will match any text that starts with the leter "J". Hince computing out Javascript in this code.

let str = 'JavaScript';
console.log(/^S/.test(str));

The following will return the value of false, as Javascript does not begin with the letter "S".

Quantifiers

Quanitifies match the amount & frequencey a character, character class, or group in a string. They are the following:

• "*" : Match 0++ times
• "+" : Match 1++ times
• ? : Match 0 to 1 time
• { n } : Matches exacly 'n' times
• { n } : Matches at least 'n' times
• { n,m } : Matches frmo 'n' to 'm' times

Usage

Email REGEX's are broken up into 3, but sometimes 4, parts. 1st: Containing any letters, numbers, dots, and/or hyphens 2nd: Containing any letters, numbers and/pr hyphens 3rd: Containing any letters 4th: (sometimes optional) Contain a dot(.) then any letters

Traditionally, all Regex r=being with /^......and end with...$/

The completed format will be: " /^([a-z\d.-]+)@([a-z\d-]+).([a-z]{2,8})(.[a-z]{2,8})?$/ "

Below should explain why.

1. ([a-z\d.-]+)@ or (youname)@ :

• "a-z" to include any letters
• "\d" to include any numbers
• ".": "." includes any character whatsoever, however it needs to escape its default behavior, so a "" is needed before it
• "-" to allow hyphens
• "+" to signify atleast one character needed
• "@" as any email would need an at symbol..

2. ([a-z\d-]+). or (domain). :

• "a-z" to include any letters
• "\d" to include any numbers
• "-" to allow hyphens
• "+" to signify atleast one character needed
• "." as any email would need a '.' to siginfy the site it stems from

3. ([a-z]{2,8}) or (extension):

• "a-z" to include any letters
• "{2,8}" to include a range fomr 2 to 8 characters

4. (.[a-z]{2,8})? (.again)....optional

• "." as any email would need a '.'
• "a-z" to include any letters
• "{2,8}" to include a range fomr 2 to 8 characters
• "?" to signify that it is optional

Flags

There are 6 flags in JavaScript:

• "i": Renders the search case-insensitive.
• "g": Searches looks for all matches, without it.
• "m": Renders a multi-line mode.
• "s": Renders 'dotail' mode and lets '.' to match newline character \n.
• "u": Renders the correct processing of surrogate ppairs & full Unicode support.
• "y": Searches the exact position in the text.

Author

Assignment complete by Yonas Woldemichael

Link to github