Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 832 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Javascript Regular Expressions: Introduction

6:00 JavaScript lesson by

In this lesson we'll learn two ways to construct a Regular Expression in Javascript, explore the methods available to us directly from the RegExp constructor, use Regular Expressions with String.prototype methods, and build a simple regex highlighter.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

In this lesson we'll learn two ways to construct a Regular Expression in Javascript, explore the methods available to us directly from the RegExp constructor, use Regular Expressions with String.prototype methods, and build a simple regex highlighter.

Avatar
EBIA

2 Important points: ECMA 6 is required (e.g. because of String templates) and app.js must be located at the buttom (after pre tags).

In reply to egghead.io
Avatar
Wayne

Good stuff

I especially like the little results viewer using css...nice!

Avatar
Jesse

How are you able to console.log() ["is", index: 5, input : "Is this This?"] from regex.exec(str)? I'm only able to log ["is"] without any of the other elements in the array

Avatar
Weng Koon

Hi how do you run your code? can't run in JSbin, the browser will complain

Line 1: Use the function form of "use strict".
Line 3: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 3: 'arrow function syntax (=>)' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 3: Unmatched '{'.
Line 5: Unexpected '`'.

In reply to egghead.io

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.

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.

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.

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, 0, 1, 2, 3, 4, 5 is where it found that match, then we get the source input for our regular expression.

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.

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.

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 0, then again at index 5, again at index 10, and then we got our null.

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.

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,

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?