Intro
In an effort to be intentional with my weekly reflections on the #100DaysOfCode Challenge, I want to focus this post on regular expressions. While completing the scripting challenges on freeCodeCamp I struggled and felt very frustrated with the challenges that involved regular expressions. Which means ... I needed to learn more about them and on a deeper level. So here goes!
In this article, I'll give a basic overview of what regular expression are and how to get started using them. This by no means will be a comprehensive overview of them, but an introduction to regular expressions from one beginner to another.
What are Regular Expressions?
Regular expressions are patterns that are used to match strings. We place them inside a set of forward slashes / /. In JavaScript, they are also objects and can be used with a variety of methods such as match(), replace(), split(), and more.
Basically, you're telling the computer to look for this pattern of characters within a string. That pattern could be letters, numbers, whitespace, special characters, etc. When a match is found it will be recorded or returned to you (depending on what method you're using).
How do you use Regular Expressions?
In JavaScript we can make use of regular expression by declaring a variable or place them directly inside a function. Before we look at those two use cases, let's start with an example.
Example
Let's say I have the string of text 'For us, we like to take the dogs on a walk far from home.' and I want to match all words that start with f and end with r. I can use the regular expression /f[aeiou]r/gi to match the words For and far in my sentence. But what does this goop of /f[aeiou]r/gi mean? Let's break it down.
The Expression (Inside the Slashes)
First, we already know the expression falls between the slashes so let's focus in it: f[aeiou]r. I'm looking for three-letter words that start with f and end with r, but have a vowel (a, e, i, o, or u) in between them. The square brackets [] are used for matching character sets. Since I have the possibility of any vowel in between the f and the r I want to indicate that the brackets. In other words, it will match any word that starts with f and ends with r regardless of what vowel is in the center so it would match far, fer, fir, for, or fur.
The Flags (Outside the Slashes)
Second, let's break down the gi that appears outside the slashes. These are expression flags and change how the expression is interpreted. Here, g stands for global meaning I want to search the entire string. If I remove the g, then it will only provide the first match in the string.
The letter i stands for case insensitive meaning it ignores the case of the letter. This allows us to match the word For at the beginning of the sentence. Without the i it would only match the word far in the sentence.
Variable Declaration
There are two ways to implement this in your script so let's start with the variable declaration. Consider the following:
let string = `For us, we like to take the dogs on a walk far from home`
let regex = /f[aeiou]r/gi
console.log(string.search(regex));
// expected output: 0, 42
Here I've got variables for my string and the regular expression, and I'm using the search() method which provides the index of any matches. In this example, the method will search the string (the sentence) and return the indexes for any matches of word that starts with an f and ends with an r.
The advantage of using a variable declaration is that if we need to change the string or the regular expression, we can easily do that with out having to modify the rest of our script. In this case, we're only making use of our regular expression in the line console.log(), but other cases might be more complex or lengthly.
In particular if we end up searching multiple strings it's easier just to have to type the regular expression once (when we declare the variable) than each time we need to use it. This is especially helpful as regular expressions can get very complicated depending on what you're looking for.
Inside the Function
Alternatively, we could have also done the following and returned the same result:
let string = `For us, we like to take the dogs on a walk far from home`
console.log(string.search(/f[aeiou]r/gi));
// expected output: 0, 42
Notice in this case I've placed the regular expression as parameter directly into the search() function.
Resources
When I wasn't banging my head against the keyboard trying to figure out how regular expressions work, I cruised around the internet to find out what resources I could use to help understand them better.
My first go-to resource with any problem I have is to consult the documentation. The Mozilla Developer Network (MDN) is my preferred place for this. Most times I figured out what I need from reading through their guides.
When the documentation doesn't help or it's still not clear to me, I move on to YouTube and find a tutorial (because having a person explain it to me usually does the trick). For regular expressions, I found the tutorial "Learn Regular Expressions In 20 Minutes" by Web Dev Simplified to most helpful. It includes several examples and pointed me to my next suggested resource: RegExr.
RegExr allows you to input the text you want to search and write your regular expressions to search the text. What I like about it (especially as a beginner) is it will highlight the characters that are being matched based on your expression and (my favorite part) it also provides description of what each part of your expression is doing in the match. I'm sure there are other tools out there like this, but this is the one I stumbled upon. Feel free to use what works best for you.
Conclusion
I've kept the above example simple because I'm writing this article for beginners who are just getting started. As a beginner myself, reading through the documentation can be overwhelming, particularly when we look at the Character Class, Assertions, Groups and Backreferences, Quantifers, and Unique property escapes that make up the special character in regular expressions. However, that doesn't mean it's impossible to get better at using regular expressions.
I've still got more to learn when it comes to regular expressions, but my confidence is growing. Resources like RegExr and writing this blog post are helping me learn them. What are some resources you have found helpful in learning regular expressions?
Top comments (0)