Get Started with Regular Expressions in JavaScript

[00:00] A regular expression can be defined as a sequence of characters that defines a pattern that can be used to match that pattern inside of another string. So to get us started let's go ahead and create a string for us to try to match against. Here I'm just going to say, "Is this this?" So there's our string. Now in JavaScript we actually have two different ways to create a regular expression, the first one I'll call the constructor method.

[00:27] That's new rex, I'm sorry regex for regular expression, and then we just pass in the pattern that we're looking for. Now it's important that we understand this is a pattern, it's not a string. So what we're looking for here is a lower case i following by a lower case s. A regular expressions provide us a handful of methods to use to find our pattern, and the first one, and the simplest one, would be test. So we're going to say regex.test, and we're just going pass it our string.

[00:58] So we'll save that, and we can see that we do in fact get a true. Test is always going to return a true or false, so if I change our pattern to "it" we get a false. The second method for creating a regular expression I'll call the literal regular expression. So regex equals, and to create a regular expression literal we delimit that with two forward slashes, and then we pass in the pattern that we're looking for. So at this point, these two regular expressions are perfectly equivalent.

[01:29] Save that, and we get the exact same result. Now if we wanted to get a bit more information about our match, we could use the execute method on our regular expressions. So I'll say regex.exec and again I'll just pass in our string, and when I save that you can see we get the match that was found, we also get its index. In this case is 5, if we look at the string, 01, 2, 3, 4, 5 is where it found that match, then we get the source input for our regular expression.

[02:01] Regular expressions also provide us with a series of flags that we can use to identify additional parameters of our pattern. So one that we can use is the global flag, so to do that in a regular expression literal we just add on a g at the end, in the constructor version it's just the second argument, and we pass it in as a string. Now that we run this we're actually going to get the exact same result, however, if we run it twice we'll see that it actually found our pattern once at index 5, and once at index 10, and if we run one more time, we'll get a null.

[02:39] The result of test is always true or false, whether or not we found the string, whereas exec will return null when it doesn't find the string. This also exposes that regular expressions are state aware, so the first time we ran it we got our index to 5, the second time we got it we got our index at 10, and the third time we didn't find it at all so we got a null. So if we don't find the string, exec will return null. If we do it a fifth time, I'm sorry a fourth time, it will actually start over.

[03:08] So you'll notice that it only found our pattern two times, and then it went to null. So it found this lower case i followed by s, then it found this lower case i followed by s. Another flag we can add onto this which is the i flag, which is for ignore case. So if we save that, we can see that it actually found the first "is", I-S at index 0then again at index 5, again at index 10, and then we got our null.

[03:36] So since regular expressions are meant to work with strings it shouldn't be a surprise that the string prototype worked really, really well with regular expressions. One thing we can do here is execute a match from the string prototype and pass in our regular expression, and that's going to return an array of each of the patterns that were found in our string. We could also do a replace, so let's log string.replace we'll pass in our regex and then we'll create a function here and we'll just return a double x for each of those.

[04:10] So if we run that we can see that each pattern that was found was replaced with a double x. Also using the string prototype we could do a string.search for our regex, save that, and what that will return is the index of the first pattern found. If I get rid of the ignore case flag, you'll see that that index is 5 for this guy right here. So for the purposes of this series, we are going to set up a quick little regex highlighter, so I'm going to add a pre tag here and then I'm just going to drop in some styling, so we're going to say pre,

[04:47] I'm going to give that a line-height of 2, and then what we're going to do is we're going to use the string prototype replace method to replace all the patterns that we find, and wrap them in a span. So on those guys we're going to give them a background color of EEE, we're going to give them padding of 1 pixel, and we're also going to give them an outline of 1 pixel solid, we'll make that a little darker, call it 999, then in our code we're going to create a method called output.

[05:14] It's going to take in our string, our regex, and a target which in our case will be the pre. We're just going to say target.innerHTML = string.replace pass in our regex, take our string, and we'll return a template literal with a span, and we'll just pass in our string. So now we should just be able to say output string regex then document.querySelector pre, and we can see that our patterns are in fact being highlighted. If we wanted to go ahead and save that with an ignore case flag we can see that all three "is" are being highlighted.