Beginners guide to Regular Expressions

03 Dec, 2018

Regular Expressions (RegEx) are an extremely powerful tool that is common across most popular languages in use today. It can be used to find, replace and match text using a specialised instruction set. Although initially, it might just seem like a garbled mess of characters. However, there is in fact, meaning behind the madness. This tutorial will go over the basic syntax and operators used in RegEx and then how to use it in JavaScript.

Because the syntax of RegEx is mainly made up by single characters on the keyboard, if you want to search for something like https://, you will need to escape the special characters with backslashes "\" so that the parser doesn't get confused.

"https://"   -->   "https\:\/\/"

Logical Operators and Basic Syntax: Useful instructions to tell the program how you want to search.

"a|b"   // a [Or] b

"whats (down|up)"   // Capture group "down" [Or] "up" from string that contains "...whats ..."

"a*"   // 0 or more repetitions of a

"a+"   // 1 or more repetitions of a

"a{2,10}"   // 2 to 10 repetitions of a

"ca?t"   // Match "cat" or "ct"

"B(?:at|og)"   // Match but don't capture

"^www."   // Match string that starts with "www."

".png$"   // Match string that ends with ".png"

"."   // Represents any charicter

Character Classes: A list of characters that can be matched.

"[AEIOU]"   // Match one of the charicters in the brackets

"[a-z]"   // Match one of the charicters between lower case "a-z"

"[a-zA-Z0-9_]"   // Match one letter, digit or underscore

"[^a-g]"   // Match anything that is not in range "a" to "g"

// Used in conjunction with Logical Opperators:
"[AEIOU]+"   // Match one or more uppercase vouls

Short-Hand Character Classes: For some of the more common character classes there exists a shorthand version built in.

"\d"   // One digit, eg: "[0-9]"

"\d"   // Not a digit, eg: "[^0-9]"

"\w"   // One word charicter (letter, digit or underscore), eg: "[a-zA-Z0-9_]"

"\W"   // Not a word charicter, eg: "[^a-zA-Z0-9_]"

"\s"   // White space

"\S"   // Not white space

"Putting it all together" - Utilising the above syntax, you are able to accomplish just about any operation on a string you can think of. Heres a relatively basic example in javascript of how RegEx might be used to only filter out unwanted file types.

//Allow only png, jpg and jpeg
var file1 = 'dog.png';
var file2 = 'bird.jpg';
var file3 = 'cat.gif';
//returns {0: 'dog.png', 1: 'png'}

//returns {0: 'bird.jpg', 1: 'jpg'}

//returns null

I definitely recommend playing around with these operators for a while yourself, to really get a feel for how they work. A great site for that is

Other Tutorials

View All

Immersive Parallax scrolling effect

javascript - css - html

You might have noticed while moving along in a car or train, how far away objects seem to move across your vision slower than those closer to your eyes. This effect is known as parallax and its a fundamental aspect of vision which can often go unnoticed.

Beme style progress bar

html - css - javascript

How to create a progress bar that wraps around the screen of any sized device similar to the Beme app.

Responsive web design guide

css - html

In 2017 it was recorded that around 63% of all U.S web traffic is made up of mobile devices. It is becoming increasingly vital that websites adopt a responsive design to accommodate this rapidly growing portion of the market.