Regex Tutorial: Beginners Guide to Regular Expressions using JavaScript

Muhsin Warfa
Image by /u/nixcraft/

Ah, regex! The bane of my existence! Regex is like the end slice of a bread everyone skips when learning programming. If you can relate to this hopefully, by the end of this article you will change your mind about regular expressions just like i did mine, and make it your ally with its vast range of applications.

What the h*ck is a regex?

Regex also known as regular expressions is a sequence of characters that is used to search for one or more matches in search pattern. Its basically a way to look for patterns in a sentence. Want the input format of a date or an email address to be in a specific way? regex is your ally! Want to parse and replace string? regex! As a developer, regex can look intimidating at first but once you leash this beast it can save you thousands of hours especially when you need to parse large amount of data. Different programming languages may slightly vary in implementing regex but the underlying concepts are mostly the same.Let us go over some concepts before diving into examples.

Basic guide

Special Characters.      Match any character except newline^      Match the start of a string$      Match the end of a string+      Match 1 or more repetitions of RE*      Match 0 or more repetitions of RE{m}    Match exactly m copies of the previous RE{m,n}  Match exactly m to n copies of RE\      Escape special charactersSpecial Escape Characters\A     Match only at the start of the string \b     Match the empty string at the beginning or end of a word\d     Match any decimal digits this includes [0-9]\D     Match any character which is not a decimal digit\s     Match white space characters including tab and newline\S     Match any character which is not a white space\w     Match Unicode word characters including [a-zA-­Z0-9_]\W     Match the opposite of \w

These references cover the basics of regex and you can find a complete regex version in this cheat sheet. Lets now take a look at some examples,shall we?

Open the developer tools in your browser, If you are on chrome use the keyboard shortcut Ctrl+Shift+I. If you are on Firefox use Ctrl+Shift+K .Type in the following code line by line in the console, we will do the examples then I will give a brief explanation.

Matching Literal strings

let testStr = "Hello, my name is Muhsin.";
let testRegex = /Muhsin/;
testRegex.test(testStr);
// Returns true

In JavaScript the .test() method takes a regex and applies it to a string which is placed inside the parenthesis and returns true or false if your pattern matches anything in that string. In this example, the regex searched for a literal match of the string “Muhsin”. Any other form of “Muhsin” will not match for example “mUhSiN” or “muhsin”. It is case specific.

by memegenerator

Ignore case while matching

let myString = "freeCodeCamp";
let fccRegex = /freeCodeCamp/i;
let result = fccRegex.test(myString);

Normally, the regex looks for a literal match of the strings but sometimes you would want to match different case for example capital letters or all small letters so you use a flag. Here we use the flag i that ignores the cases and matches different variations of the string “freeCodeCamp”.

Extract Matches

So far we are only testing whether there is a match or not. What if we want to extract the matches and use them for some other computations? That’s where the .match() method comes to play. Note: To use this method, you have to use it with a string and pass the regex inside the parentheses.

let extractStr = "Extract the word 'fun' from this string.";
let codingRegex = /fun/;
let result = extractStr.match(codingRegex);
// Returns ["fun"]

The “result” variable returns the list of the extracted words. In this case it’s “fun”.

Find More Than the First Match

So far we only had to extract one pattern. To search for more than one pattern we use the flag g.

let twinkleStar = "twinkle, twinkle, little star";
let starRegex = /twinkle/g;
let result = twinkleStar.match(starRegex);
// Returns ["twinkle","twinkle"]

The g flag makes it possible for us to find and extract both “twinkle” words in the string twinklestar.

Match Anything with Wildcard Period

Sometimes, you don’t know/remember the exact word you are looking for but only know what letters it starts with. In this case we use a wildcard period or dot. The . wild character will match any character.

let exampleStr = "Let's have fun with regular expressions!";
let unRegex = /.un/;
let result = unRegex.test(exampleStr);
//returns true

In this example, the result variable will return true for any variations of a word that ends with un for example “fun”, “run”, “bun” etc.

Match Single Character with Multiple Possibilities

So far, we learned how to match a literal pattern which is denoted /literal/ and wildcard /./ which matches anything. These are the two extremes but what if we want a balance?

You can search for a literal pattern with some flexibility with character classes. Character classes allow you to define a group of characters you wish to match by placing them inside square [] brackets.

let bigStr = "big";
let bagStr = "bag";
let bugStr = "bug";
let bogStr = "bog";
let bgRegex = /b[aiuo]g/;
bigStr.match(bgRegex); // Returns ["big"]
bagStr.match(bgRegex); // Returns ["bag"]
bugStr.match(bgRegex); // Returns ["bug"]
bogStr.match(bgRegex); // Returns ["bog"]

the [aiuo] is character class that will return true for “big”,”bag”, “bug” and “bog” anything else will return false. “beg” will return false because the letter “e” is not in the character class.

Match Numbers and Letters of the Alphabet

We can also find ranges of letters and numbers to match the regex. For example, /[0–4]/ matches any digits between 0 and 4.

let bigman = "muhsin8675309";
let myRegex = /[a-z0-9]/;
// matches all letters and numbers in bigman
bigman.match(myRegex);

The hyphen (-) denotes a range. This example will match because the string does contact digits and strings.

Match Beginning String Patterns

Regex can also search for positions of the characters/words in the string if its at the beginning of the sentence or the end.

let firstString = "Muhsin is first and can be found.";
let firstRegex = /^Muhsin/;
firstRegex.test(firstString);
// Returns true
let notFirst = "You can't find Muhsin now.";
firstRegex.test(notFirst);
// Returns false

Note: This can be confused with the Not caret pattern search. When the ^ is used inside the character set then it means NOT! for example /[^a-z] means any character that is NOT an alphabet.

Match Ending String Patterns

We can also look for a word that appears at the end of a string. In this case we use a $ sign after the regex.

let theEnding = "This is a never ending story";
let storyRegex = /story$/;
storyRegex.test(theEnding);
// Returns true
let noEnding = "Sometimes a story will have to end";
storyRegex.test(noEnding);
// Returns false

In the first string the word “story” appears at the end of the string.While the second string it appears in the middle. Hence the test return true and false respectively.

Intermediate Guide

So far so good! In the next few examples we will be moving up a gear and reuse a combination of concepts provided in the reference table above. So feel free to go over them one more time before we proceed to the next step.

by memegenerator

Specify Upper and Lower Number of Matches

Recall that the * returns zero or more matches while the + returns one or more matches. What if you want to match a certain range of characters? That is when curly braces come to play. We call them quantity specifiers inside which we specify the lower and upper number of patterns in the string.

let loudScream= "aaaah";
let softScream = "aah";
let multipleA = /a{3,5}h/;
multipleA.test(loudScream); // Returns true
multipleA.test(softScream); // Returns false

The loudScream variable has four a’s which returns true because it lies in between three and five while softScream variable returns false because it has two a’s which does not fall in the range three and five.

Specify Exact Number of Matches

We can specify the lower bound and the upper bound of the range but what if we want the exact number of matches? We just put one number in between the curly braces.

let A4 = "haaaah";
let A3 = "haaah";
let multipleHA = /ha{3}h/;
multipleHA.test(A4); // Returns false
multipleHA.test(A3); // Returns true

In this example, the regex returns true for any strings that contain the letter before (a) three times. That is why the variable A4 returns false while A3 variable returns true.

Check for All or None

Sometimes, words can have slightly different spellings because of dialects. For example, In British English they use“Colour” while American English they use “Color”. In this case we use a ? which checks for zero or one of the preceding element.

let american = "color";
let british = "colour";
let rainbowRegex= /colou?r/;
rainbowRegex.test(american); // Returns true
rainbowRegex.test(british); // Returns true

It basically says that the letter “u” before the ? is optional. Therefore, it returns true for both “color” and “colour”.

Use Capture Groups to Search and Replace

Some patterns that you search for occurs more than once in a string. You can search for repeated sub-strings using capture groups denoted by parenthesis. This can help us capture all the repeated substrings in a text file and replace it with whatever we want! But before that, let us use the .replace() method first, which has two inputs, one the text you want to search through and second words you want to replace with.

let wrongText = "The sky is silver.";
let silverRegex = /silver/;
wrongText.replace(silverRegex, "blue");
// Returns "The sky is blue."

We can also access capture groups in the replacement string using dollar sign $.

"Code Camp".replace(/(\w+)\s(\w+)/, '$2 $1');
// Returns "Camp Code"

The first capture group translates “capture any Unicode word character” followed by space and then “capture any Unicode word character”. These captured substrings are saved and can be accessed by using dollar signs. Therefore, in the string above we capture the word “Code” as $1 and “Camp” as $2. The replacement string “$2,$1” above switches them up hence returning “Camp Code”.

Don’t worry if you still feel a bit confused this video has a detailed explanation on the topic of capturing groups.

Find Characters with Lazy Matching

In regular expressions, a greedy match finds the longest possible part of a string that fits the regex pattern and returns it as a match. The alternative is called a lazy match, which finds the smallest possible part of the string that satisfies the regex pattern.

By default regex is greedy but we can use a question mark ? to change it to lazy matching.

let text = "<h1>Winter is coming</h1>";
let myRegex = /<h1>?/;
let result = text.match(myRegex);

In this example, instead of returning the text “<h1>Winter is coming</h1>” it returns the shortest possible pattern which is “<h1>”. You can test it by removing the question mark and putting it back again to see the difference.

Positive and Negative Lookahead

Lookaheads are patterns that tell JavaScript to look-ahead in your string to check for patterns further along. This can be useful when you want to search for multiple patterns over the same string.

There are two kinds of lookaheads positive and negative lookaheads. A positive lookaheads makes sure a pattern is there but won’t match it while a negative lookahead will make sure a pattern is not there. Lookaheads are often used for password validations. In this last example, we will make a regex that will match passwords that are greater than five characters long and have two consecutive digits.

let sampleWord = "astronaut";
let pwRegex = /(?=\w{5,})(?=\D*\d{2})/;
let result = pwRegex.test(sampleWord);

The above example uses two lookaheads to check the patterns in the string. The first checks for any word characters with the lower bound being 5 and upper bound being any number, while the second lookahead checks for exactly two digits.

Conclusion

I hope this post was helpful. In case, you want some additionally resources, I highly recommend FreeCodeCamp. They have an online course which has a detailed section on Regex. YouTube icons such as Daniel Shiffman has entertaining yet educative videos about regex. Lastly, you can also use this online regex tester tool to test out your new skills!

Wishing you peace and prosperity!

Muhsin Warfa

Written by

Come along and see the world through the lenses of a Somali-Kenyan. Carnegie Mellon university. Software developer/Technical writer/Fitness enthusiast

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade