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

Triggering vibrations from your website

javascript


Most common mobile browsers (excluding safari) allow you to trigger the device's vibration motor from your web application using the Vibration API. The Vibration API is provided to you by the mobile browser itself.

Five practical .htaccess tricks

apache - php


Apache's '.htaccess' has some very powerful tools that you can use with minimal effort to enhance the user experience and even performance, of your website.

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.