Basics of Regular Expressions in JavaScript
So you’re here — I’m going to assume that you’re either the person who actually likes Regular Expressions (RegEx), or you’re a beginner wishing to know what RegEx is and what it is used for. All will be explained in this article, with some light sprinkles of example code throughout.
I’ll start by giving you a brief run-through of what regular expressions are, before giving a basic tutorial, showing exactly how to use regular expressions.
What are regular expressions anyway?
Regular expressions are the bane of any web developers existence — however they are possibly one of the most important aspects to know about programming and can come in very handy. They have gotten me out of a few sticky situations and I use them in some common helpers I use in most projects.
Regular expressions are sometimes called patterns andare basically an array of strings to match against for a specific purpose. A regular expression can be as simple or complex as the use case required and could pretty much match ANY string as long as you can calculate the correct regular expression.
There are numerous online tools such as RegExr, RegEx 101 and RexEx Tester — I personally prefer RexExr as it has a cleaner UI, but it doesn’t come with some of the advanced features of RegEx101 or RegEx Tester, so it’s definitely worth checking out all of the available options.
RegEx 101
A regular expression in it’s most basic form, could be as simple as:
highYes, that technically could be used as a regular expression to match against the word ‘high’. This could then be expanded on to be:
high|lowAs you’ve probably already guessed, this would match against the words high & low.
Basic RegEx Examples
Feel free to hit F12 to open the developer tools right here on this page to type the code in there if you want to follow along and try out different combination of your own — you never know, we may end up with two people in the world that actually like regular expressions.
RegEx Search
Using the javascript search() method, you can find out whether the words high or low are in a string. We would do this like so:
Notice how this disregards the ‘low’ in ‘Lowdown’ and produces the result -1. At the moment it is being disregarded as the regular expression is case sensitive. We can modify the above code to be case-insensitive by using a midifier.
There are three modifiers in JavaScript RegExp and the one we need is ‘i’. By adding it at the end of the regular expression, it will then match the ‘low’ in ‘lowdown’. Our code would then be:
But, what if we only wanted the word low if it was not part of another word? Well to ensure that the word low is not part of another word we can simply add a space each side of the word low in the regular expression.
As expected, the output is now -1, as ‘low’ is part of the larger word ‘lowdown’.
RegEx Replace
To do a string replacement is pretty similar in structure to how our search code would look.
Let’s say for arguments sake that we want to swap all occurrences of the words high & low within a string to the word extreme. The following would be an example of how we could do that:
Notice the ‘g’ added to the end of the regular expression. The ‘g’ is another modifier, similar to the ‘i’ modifier, but this one means ‘global’. Without the global modifier, only the first instance would be matched.
Meta Characters & Quantifiers
As well as RegExp modifiers, there’s also meta characters & quantifiers.
Meta characters are characters that have a special meaning, from finding a digit, to finding a white-space character or a specific Unicode character by its hexadecimal number. There are many meta characters and they can all be found in the table below.
Quantifiers are there to specify quantities to be found during regular expression matching. They are as follow:
RegEx Tutorial
During the tutorial, we’ll put what we’ve learnt about regular expressions in JavaScript so far into practice. We’ll use regular expression searching and replacing to build a handy utility function.
I hope you’ve enjoyed this article and I hope you enjoy the tutorial. Feel free to leave me some feedback and check out my tutorial right here on Medium.
