From the course: Angular: Testing and Debugging

Using regular expressions to find content - Angular Tutorial

From the course: Angular: Testing and Debugging

Start my 1-month free trial

Using regular expressions to find content

“

- [Instructor] In the last video, we added a new custom pipe using the Angular CLI tool. Now we're going to update the transform method in that pipe to find usernames based on our filter string. I'll start by updating the default type annotations here in the transform method. We know that the value will be a string, and that the optional parameter is going to be our filter, which is also a string, but not an array, just a string. This transform method is going to return a string, so we can update the return type as well. We don't need to update the type annotations, but it's a good practice and it helps the compiler understand what we want our code to do. Next, we want to return the original value right away if there's no filter. This keeps our code performant and avoids unnecessary processing. I'll do that by creating an if statement here on a new line. If the filter.length is equal to zero, return the value. If the filter has a length, we want to use it to replace content in the value with something else. We do this using the replace method. Here, right after the word value on line 13, I'll type .replace(). Replace expects two arguments. The first is the search text. In our case, that would be the filter. And the second argument is the replacement text. I'll set that to a simple string for now just to make sure everything works. Let's go with x. Back in the browser, when we refresh the page and search for a name, let's say Cooper, the list filters correctly because we handle that in the component, not the pipe, but we're not seeing any change in the content. And this is because our filter string, as entered, is lowercase. But if we inspect the HTML itself, I'll right-click on Cooper, click inspect, we can see that in the HTML markup, Cooper has an uppercase C. if I clear the filter and search for Cooper with an uppercase C, then the pipe replaces the search text with an x as expected. So how do we ignore the case of the letters? There are a few ways we could do this. And I think the cleanest way is by using a regular expression. Regular expressions are a very powerful way to build complex search patterns. And I encourage you to learn more about them. Just search for the phrase regular expressions here in our library for more info. The replacement method that we use in our pipe accepts either a string or a regular expression as the first argument. So instead of passing in a string directly, we'll pass in a regular expression that ignores letter case. We'll do this by making a new variable to hold our regular expression. I'll make a new line and type const search = new RegExp(). The RegExp class takes two arguments. The first is the search pattern. This is our filter variable, so I'll pass that in here. And the second argument is a string containing flags. Flags change how the search pattern is applied to content. I'm going to pass in the i flag here. I stands for ignore case. We then replace the filter reference here in our return statement with a reference to the regular expression instead. Back in the browser, if I search for Cooper again, everything works as expected. One thing to note here, if we search for a user where the first and last name start with the same letter, say we search for Camden Chan or Callie Cote, right down here, only the first instance of that letter is changed. This is because regular expressions look for only the first instance of search text by default. We need to pass in another flag to tell the regular expression to look for our search pattern everywhere. We do this using the g flag. G stands for global. Quick note, you can pass in flags in any order. Back in the browser, if I reload the page, and I search for Callie Cote or Camden Chan again, now every instance of that search term is updated. Things are great so far. We can find the filter string in each username and replace that string with new content. But how exactly do we highlight the text? We'll take a look at that in the next video.

Contents