Skip to content

Instantly share code, notes, and snippets.

@cat-lin-morgan
Last active April 11, 2024 14:51
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save cat-lin-morgan/49bd128340e9e452f837b4fae76df091 to your computer and use it in GitHub Desktop.
Save cat-lin-morgan/49bd128340e9e452f837b4fae76df091 to your computer and use it in GitHub Desktop.
Regular Expressions - Regex: A How To For Dummies

Regular Expressions - Regex: A How To For Dummies

Ooohh, cryptic! Ahhh, strange!

confused math lady meme but instead of math its regex. meme by me

Today's Topic

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

If you're anything like me, you're probably wondering what the f❀ck am I looking at?

Regex, short for regular expressions, is a tool that can be used in just about any programming language.

It is based on the mathematical concept of regular sets and regularity.

Basically, it is a sequence of characters that are used in search patterns.

It performs four basic types of operations:

  • Validation: will determine if its pattern matches a string, returning a boolean.
  • Extraction/Find: will look through a large string to find pieces that match its own pattern.
  • Subtract/Replace: will look through large strings to find substrings that match its own pattern and replace with any other string
  • Split: will remove portions of the string its pattern finds

I found this quote that sums it up quite nicely:
"A regular expression is a string representing a pattern used for matching some portion(s) of a target string."

Summary

Today I'll be taking you through the Regex for email, because that seems easy.

This is a screenshot with my email being sixth sensed by regex magic.

Table of Contents

Regex Components

These are some basic compents, your regex might use any or all of these at a time. Here is how I use them.

Anchors

These go at the start and end of your regex string.

As you can see in the example below, I've used both the ^ anchor to open up my ^regex tag$ and I've also used the $ regex anchor to close it.

^abc$ 

highlights anchors tags in use

Grouping and Capturing

Parentheses go around your (characters sets).

My regex is made up of three groups: the user's email-username, the email service, and the top level domain.

gif showing () grouping tag

Grouping, or capturing, groups multiple characters together to create a specific group that will be used when searching for characters in your string or substrings.

(abc)

Bracket Expressions

Bracket Expressions represented by [square brackets].

highlights [] tag in use

These will match any characters in the set to the string or substring it's looking for.

[a-z0-9] <-- this will look for any character a through z and 0 through 9

Character Classes/Sets

There are quite a few of these, but I'll sum up the ones I'm using here.

In this section you'll find usage of range, digit, single/literal characters, special characters, and escaped characters.

character set gif

In the gif above you can see multiple character sets grouped together.

Range:

example of range a-z0-9

Both of the below examples will search for characters in both ranges a-z and 0-9.

Range is case sensitive

[a-z0-9]
a-z <--example of alpabetical range
0-9 <--example of numerical range

Digit:

example of the digit character class

Quite simple, it'll match any character 0-9. Should be noted it's the same as [0-9].

\d <--- all the digits

Single/Literal Charaters:

example of single characters

I am using both the - dash, . period, @ at sign, and the _ underscore single characters, allowing the user to use either or both in their email string.

_ <-- single character
- <-- single character
. <-- single character
@ <-- single character

The single/literal characters represent only themselves.

Special Characters:

Some literal characters are also special characters:

^ . [ $ ( ) | * + ? { \

In my regex I'm using three literal chacaters that are also special characters.

_ - .

Usually special characters will loose their special designation within brackets, for example, if you removed the \ the regex would still just work fine in two of the three cases.

In order to avoid using them as their special character designation I'll have to use an escaped character.

Escape Characters:

example of an escaped character, using the backslash

You'd need to use an escaped character, the backslash , for the regex to understand, that in this case, you don't want to use the . period's special character.

\ <--example of an escaped character

Best practice is to use \ before each:

\_\.\-

But in this case _\.- or _.- will work just fine. The later works because it's in a bracket expression.

In this regex the only place it's really important to use the escaped character is the period before where .com, .org would go. Why? Because it's not in a bracket expression.

example of where an escaped character is important

Quantifiers

Quanifiers determine how many times the capturing group can match characters defined within the group.

My regex uses two different quantifiers.

+ <-- quantifier
{ } <-- quantifier

example with two different types of quantifiers.

Plus: The first is the special character I use: +

This tells the regex that the user may use any amount of characters they want in their email string or tells the regex to search for an email with any amount of the allowed characters in this capturing group.

Example:

\d+ <--this will match for any digit in the capture group

Quantifier: This is represnted by the { }

This tells the regex to match length between any two digits.

Example:

[a-c]{1, 100} <--this will allow any characters a through c to have a length of 1 to 100, so like "ccccccc" would be valid

Greedy Match

My regex uses two greedy operators. They are both of our quantifiers.

+ <-- greedy
{ } <-- greedy

Quantifiers are greedy by default and will match with as many characters as possible.

Author

picture of author at desk

Hi! My name is Cat Lin and I'm a 26 year old developer and artist located in Los Angeles, CA. You can reach me on my github profile or by my portfolio.

Thanks for checking out my article on Regex.

All memes, screenshots, animations, and edits by the author, myself, Cat Lin Morgan.

External Resources

These are resources I found. Some I found very useful and others I found interesting. They're worth a peek.

  1. West Chester Uni's Tutorial on Regular Expressions - Really cool website that breaks it down really well, a little confusing at first if you start at zero knowledge like I did, but explains it best.

  2. Regexr - Text editor type site that allows realtime editing of you regex and has hover details with small snippets of regex explanations. I used many screenshots from this website.

  3. A Simple Regex cheat Sheet on Medium.com - This article breaks down other regex tags I didn't go over in this tutorial and might be worth looking at.

  4. The Coding Train Youtube Channel - Watch this man excitedly explain regex at you. I didn't watch the entire regex playlist this channel offers, but I watched the first few. They were interesting. If nothing else it hypes you on writing some regex.

  5. Regex Buddy, Owl Friend - I didn't actually use this more than once, but I've heard from multiple people that's been a value resource throughout their careers. It deserves an honorable mention.

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