The 3 Most Useful Regexes for Front End Developers

Anchor, Groups, and Positive lookahead

GP Lee
GP Lee
Apr 27, 2020 · 5 min read
Image for post
Image for post

> Regex Tester

> TL;DR

Learn following Regex

Hope you enjoy

Image for post
Image for post
Photo by Ramiz Dedaković on Unsplash

> 1: Valid Email Regex

^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6})*$

Advanced Valid Email Regex is available from the bottom

EXPLANATION

Anchors^ (Caret) : beginning
$ (Dollar) : ends

Dictionary

Character Set[a-zA-Z0-9._%-] // from the regex abovea-z : Range -- Matches a character in the range "a" to "z" 
(Case Sensitive)
A-Z : Range -- Matches a character in the range "A" to "Z"
(Case Sensitive)
0-9 : Range -- Matches a character in the range "0" to "9"
. : Character -- Matches a "." character
_ : Character -- Matches a "_" character
% : Character -- Matches a "%" character
- : Character -- Matches a "-" character
Cheat Sheet
[abc] : ANY
OF "a" , "b" , or "c"
[^abc] : NOT "a" , "b" , or "c"
[a-g] : Characters between "a" & "g"
Quantifiers
[a-zA-Z0-9._%-]+ // from the regex above
a* : 0 or more of the preceding token *important*
a+ : 1 or more of the preceding token *important*
Alternation
a-zA-Z]{2,6} // from the regex above
a{5} : exactly 5
a{2,} : two or more
a{1,3} : between 1 & 3 (1 , 2 or 3)

PROBLEM

12glipms12um_1%-@gmail.edu.df12glipms12um_1%-@gmail.edu

Advanced Valid Email Regex

(Advanced) Quantifiers
a? :
0 or 1

> 2: Password Strength

(?=(.*[0-9]))(?=.*[!@#$%^&*()-_+=~`|:;\"'<>,./?])(?=.*[a-z])(?=(.*[A-Z]))(?=(.*)).{8,}

Dictionary

For example,
in the >1: Valid Email Regex, (example above)
You know the position of letters
e.g.,
<email User Name> @ <email Provider> . <extension>
However, the position of letters is not fixed for the passwords
e.g., Gwl213ed!@ , skwenfklEq!@!12 etc...
They are thousands of possibilities for the combination of passwords and it's actually better to be unpredictable
In conclusion, Positive lookaround is good to use when
the position of letters are not predictable / fixed
Groups & Positive Lookahead
(abc) :
capturing group
(?=abc) : positive lookahead
It's faster reading from the back
(?=(.*[0-9])).
^
| Dot "."
matches any character except line breaks
| (e.g,
Given `hel\nlo\n1`, "." has 6 matches except
for \n (newline)
(?=(.*[0-9])).
^^^^^^^
Same dot
any characters (".") 0 or more
and numbers [0-9] after
Therefore, both
"helloworld1" & "123" --> true

In other words,

(?=(.*[0-9]))(?=.*[!@#$%^&*()-_+=~`|:;\"'<>,./?])(?=.*[a-z])(?=(.*[A-Z]))(?=(.*)).{8,}
(?=(.*[0-9])) : looks for numbers
(?=.*[!@#$%^&*()-_+=~`|:;\"'<>,./?]) : looks for special characters
(?=.*[a-z]) : looks for lowercase letters
(?=(.*[A-Z])) : looks for upper case letters
(?=(.*)) : looks for everything
5 groups of positive lookaround is greedily looking for its matches and regex test passes only if all of the criteria are matched
.{8,} // from the regex above. : is the only regex out of positive lookaround & it is actual starting point of this regex. It looks for any character except newline &{8,} : Alternation represents 8 or more letters (>1 example above)

> 3: Dates (YYYY-MM-dd)

([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))
for regexr
or([12]\\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01]))for JavaScript additional \ in front of `\d` because we use it as a string in RegExp in JavaScript

Dictionary

Alternation
ab | cd :
match ab or cd
([12]\\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01]))
([12]\\d{3}-
(0[1-9]|1[0-2])-
(0[1-9]|[12]\\d|3[01]))
([12]\\d{3} : The first letter is either 1 or 2 [12] 
then followed by 3 digits \\d{3}
2 IF-STATEMENTS (starts with 0 | starts with 1)
(0[1-9]|1[0-2]) :
if starts with 0 then the next digit should be in
a range of 1 to 9
if starts with 1 then the next digit should be in
a range of 0 to 2
3 IF-STATEMENTS (starts with 0 | starts with 1 or 2 | starts with 3)(0[1-9]|[12]\\d|3[01])) : if starts with 0 then the next digit
should be in a range of 1 to 9
if starts with 1 or 2 then the next digit
can be any digits `\d` [0-9]
if starts with 3 then the next digit
should be 0 or 1

Happy Coding!

A note from JavaScript In Plain English

Image for post
Image for post
Photo by Christopher Gower on Unsplash

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store