Search a String by matching against a regex in JavaScript

Learn to match a String pattern inside another String using Regular Expression in JavaScript. This video teaches a use case on where this scenario might be useful and how regular expressions can help solve the problem We will use String.match api in combination with regular expression in this video. We will also look at the API documentation available on Mozilla Developer Network (MDN).

You may also want to learn about Matching Numbers in JavaScript Strings using Regular Expressions


const data = ["Jesenia Downard",
"4716 3558 2962 8986",
"Phylis Sansom",
"4532 0252 3274 0270",
"Chrissy Parsley",
"3766 9798 5170 2343",
"Yoshiko Bernardi",
"5186 4586 2667 8788",
"Myrtle Yoon",
"3461 6706 6163 3320",
"Benny Coppage",
"5361 6979 7003 8092",
"Hilde Garvin",
"3791 5243 6221 2833",
"Liberty Goucher",
"4539 1831 8210 9047",
"Nannie Lipka",
"4916 5089 1053 5522",
"Lindsy Salais",
"3764 9429 3142 8329"]
// Matching the name - attempt 01
data.forEach(entry => {
console.log('entry => ', entry);
let regex = /[a-z]+/i;
let result = entry.match(regex)
console.log('result => ', result)
// Matching the name - attempt 02
let regex = /[a-z]+/gi;
// Matching the name - attempt 03
let regex = /[a-z ]+/gi;
let regex = /[a-z \s]+/gi;

Full Transcript

0:00 Hey, it's Harit Himanshu from bonsaiilabs. Welcome to the series on JavaScript. Today. In this video you will learn about how to find a string pattern inside another string pattern using regular expressions. But when would that searching inside another string might be useful? Well, we all do that all the time even if you're not aware of using them. For example, when searching for a specific string among all our emails or filtering a spreadsheet with a specific term we are interested in or when searching for a string pattern using our browsers. We do these searches all the time, but as you see we are looking for the specific information inside the data which is not structured. Also, there is not a predefined specific location where you can find this pattern. In fact, the string may appear anywhere in the text and often more than once.

0:50 So does that mean that you will have to go and read the entire file to find the pattern you're looking for? No, you don't. The truth is that it happens behind the scenes for you and you don't even worry about all of that. But as developer, if you need to implement such a search, how would you implement it? Let's say we have a given data set that contains three pieces of information about the user's data and in no particular order. Their name, their phone number and their credit card information and there are two teams, marketing and billing who need this specific information from this dataset. The marketing team needs the name and phone number while the billing team needs to have credit card information so that they can collect the payment from the users. Now our task as developer is to find this data using the patterns and collect specific information.

1:36 How do we achieve this in JavaScript? Enter regular expressions. Regular expressions are patterns used to match character combinations and strings. In JavaScript, Regular expressions are also objects so you can use them as literal as shown here or instantiate them using the new operator with the regex constructor. In this video you have going to look at the literal syntax only as it is the compact and most common in use. So how do we write a regular expression? A regular expression literal is written with two forward slashes. Between the two slash we have a pattern that we wish to find and after the second forward slash there could be some flags related to the search. The flags portion is optional. This video in no way is a complete demonstration of the regular expressions. We will cover regular expressions in future videos as we've worked on the problems.

2:25 But we will stick to what parts of regular expressions we can use today to solve our problem related to name. And in the followup video we will see how to extract the phone numbers and credit card information from the same dataset. So given this regular expressions, how do we find a name in our data? So we know that all the names that we have here are made up of English letters. So the name pattern can contain any available in this letter. For that purpose, we need to tell our pattern that the names can be a range of letters. Right? For that we will use the square brackets to define what's known as character set pattern. This pattern defines the boundary which identifies what all to look for when searching for the pattern. In our case, it is any available English letter. So we supply all the characters in the character set.

3:10 Now as you can see that this is a pretty cumbersome way to write all the letters by hand. So there is a shorthand notation to you use it is using a followed by a dash followed by Z. It creates a range of letters and behaves exactly the same as the above pattern. Okay, so would that fetch all the names for us in the dataset? Let's find out. But hang on, I did not tell you how to use the regular expressions using JavaScript. Right? For that we will use JavaScript strings dot match method. The match method accepts a regular expression object and retrieves the result of matching a string against the regular expression object. Let's see that with a working example. Currently our data contains the name, phone number and the credit card information. Now let's go ahead and extract the names. So first thing we do, we loop over the dataset, we get the entry for every data line and then we print the line what we got on the console.

4:03 And to separate each entries we are going to put the star line next to every entry. And when we run that you would see that every entry has name, phone number and the credit card information. Now let's go ahead and write the regular expression. So first thing we'll do, we'll create a regex object with two forward slash adding the character set with a to Z pattern. And then since we need more than one characters in the name, we will add a plus sign to signify that the pattern may contain one or more characters. And now since our name can contain the capital letters, so we want to make the search as case insensitive. So we are using I as the case insensitive flag on our regular expression object. The next thing we're going to do is we're going to call the match method on the entry using the regular expression object.

4:55 And finally, whatever results we received, we are printing that on the console. Let's run the code and see the output. As we see our entry has been printed here along with the result which is an array. What does this array tells us? If you look at the documentation on MDN, you would find that the array contains the results along with few additional properties. The first properties is the input, which is the copy of the search string. The second one is the index. The index is the place where the search result was found. And the third one is the groups, which is an array of named capturing groups. And since we are not using any named capturing groups in our regular expression object, it is currently undefined. But if you pay a close attention, our result, only consistent the first name and did not find the complete name as part of the search result.

5:43 But why is that? It's because our regular expression is not matching on the spaces. It is only looking for all the available English characters and that's why when the first space occurred, the search stop there and return the first name as the result. Let's fix that. The first thing is we will tell our regular expression to not stop at the first occurrence and instead do a global search for that. We will add a G flag on our regular expression object and run it again. So as you see now you're getting both the names, the first and the last one, but as two different entries. It's because it has a space in between which is not being considered so and our character set we are going to add a space and run it again. Once we run, we see that the entire name has been picked up as one entry by this regular expression object.

6:32 For phone number, the regular expression object does not match the data, which is why the result is not in the cases of credit card. However, only the space matches, which is why we are getting the entry as one array with three different spaces denoting the spaces between the credit card numbers, but again, it's not the complete match on the customer names. Another way to tell that you need a space is by adding a \s in your character set. If you run, you would see that it results in the same set of output, matching the entire customer names in the dataset, and that's it. We will cover how to extract the phone numbers and credit card in a followup video. But I hope you learned something new today. If you liked the video, please hit the subscribe button on our channel to receive more engaging content about JavaScript every single week. Until then, keep trying new skills and apply them regularly to become an expert programmer. See you next time.