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';
console.log(file1.match(/[\w-]+\.(jpe?g|png)/));
//returns {0: 'dog.png', 1: 'png'}

console.log(file2.match(/[\w-]+\.(jpe?g|png)/));
//returns {0: 'bird.jpg', 1: 'jpg'}

console.log(file3.match(/[\w-]+\.(jpe?g|png)/));
//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 regex101.com


Other Tutorials

View All

Using variables in CSS

css - javascript


When styling your web app, you've probably found yourself copying hex colour codes, margin parameters or other styles to several elements to achieve a consistent design across your app.

Local Storage vs Cookies (The storage showdown)

javascript


Local site storage can open up a ton of possibilities in web design and breath new life into an otherwise static web page. Whether you want to do something simple like "show a welcome message only once", or something more complex.

How to center things with CSS

html - css


Being able to center text, divs and images is one of the most important things that you can utilize to create clean and modern websites.