The 3 Most Useful Regexes for Front End Developers
Anchor, Groups, and Positive lookahead

> Regex Tester
- All the examples below are able to run / test on regexr
> TL;DR
Learn following Regex
- Anchor such as ^ , $
- Character Set such as [a-z] , [A-Z]
- Quantifiers such as * , + , ?
- Alternation such as {5} , {2,} {1,3}
- Groups such as (abc)
- Positive lookahead such as (?=abc)
- Alternation such as ab | cd
Hope you enjoy
> 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 "-" characterCheat 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 abovea* : 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 abovea{5} : exactly 5
a{2,} : two or more
a{1,3} : between 1 & 3 (1 , 2 or 3)
PROBLEM
Invalid email address such as
12glipms12um_1%-@gmail.edu.df12glipms12um_1%-@gmail.edu
is passing the regex test above … ALERT! 💥
Advanced Valid Email Regex
(Advanced) Quantifiers
a? : 0 or 1
Therefore, is the ()
group is repeated more than once, the string disqualifies from the test
> 2: Password Strength
(?=(.*[0-9]))(?=.*[!@#$%^&*()-_+=~`|:;\"'<>,./?])(?=.*[a-z])(?=(.*[A-Z]))(?=(.*)).{8,}
- Before you go further, you will see many positive lookaround
?=(..)
in this Regex expression. - There are positive & negative lookahead and they are both good to be used for the case where the position of the letters are not fixed
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 unpredictableIn 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
Groups
Capturing Group : groups multiple tokens together and creates a capture group for extracting a substring or using a backreference
Positive lookahead
Positive lookahead : matches a group after the main expression without including it in the result
The syntax is X(?=Y)
, it means “look for X
, but match only if followed by Y
Or
X(?=Y)(?=Z)
,
- Find
X
- Check if
Y
is immediately afterX
(skip if is not) - Check if
Z
is also immediately afterX
(skip if is not) - If both tests passed, then the
X
is a match, otherwise continue searching
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] afterTherefore, both
"helloworld1" & "123" --> true
In other words,
(?=(.*[0-9]))(?=.*[!@#$%^&*()-_+=~`|:;\"'<>,./?])(?=.*[a-z])(?=(.*[A-Z]))(?=(.*)).{8,}
can be broken down into multiple positive lookaround
(?=(.*[0-9])) : looks for numbers
(?=.*[!@#$%^&*()-_+=~`|:;\"'<>,./?]) : looks for special characters
(?=.*[a-z]) : looks for lowercase letters
(?=(.*[A-Z])) : looks for upper case letters
(?=(.*)) : looks for everything5 groups of positive lookaround is greedily looking for its matches and regex test passes only if all of the criteria are matched
Last but not least,
.{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 regexror([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]))
can be broken down into 3 parts (separated by \
)
([12]\\d{3}-
(0[1-9]|1[0-2])-
(0[1-9]|[12]\\d|3[01]))
It’s like bunch of if-statement
([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 23 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
We have launched three new publications! Show some love for our new publications by following them: AI in Plain English, UX in Plain English, Python in Plain English — thank you and keep learning!
We are also always interested in helping to promote quality content. If you have an article that you would like to submit to any of our publications, send us an email at submissions@plainenglish.io with your Medium username and we will get you added as a writer. Also let us know which publication/s you want to be added to.