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

Building a custom chromecast web app

html - javascript

Chromecasts make streaming your favourite songs, games and movies easy. But if you're like me, you might be wondering what's going on behind the scenes when you cast an app, and how you can build your own.

Handy Python tricks for beginners


When first starting out in a language like Python, things tend to move a bit slow until you learn how to use the built-in functions and operators which exist to speed up the development process. So this tutorial will try to mitigate that problem.

Essential meta tags for the modern internet


Meta tags give you the power to customise how your site appears to the rest of the internet. They provide a simple and fast way for web crawlers and other applications to get information about a website.