JavaScript: The Recent Parts

Regex Solution

Kyle Simpson

Kyle Simpson

You Don't Know JS
JavaScript: The Recent Parts

Check out a free preview of the full JavaScript: The Recent Parts course

The "Regex Solution" Lesson is part of the full, JavaScript: The Recent Parts course featured in this preview video. Here's what you'd learn in this lesson:

Kyle live codes the solution to the exercise.


Transcript from the "Regex Solution" Lesson

>> Kyle Simpson: All right, let's see if we can untwist your brains from all of that regular expression goodness and walk through a solution. Okay, remember the hints down here were there on purpose. They were there to help you not be completely lost. So we do wanna use a generator called powers and we do want to setup a regular expression that we can then globally look through the poem.

So I'm gonna setup a regular expression with the g and the s flags. Let's think about what needs to be matched, I need to match something like the word fire, or the word wind, or the phrase of a mind, or the phrase a gun. I need to match those phrases, but I need to match those things only if they show up immediately after the phrase power of.

So what I wanna do is I wanna do a capturing group match for the thing that I'm looking at, but I wanna use a look behind assertion to make sure that the phrase power of comes immediately before it. So we will do a,
>> Kyle Simpson: Look behind assertion, that's what that syntax is.

A look behind assertion that says power of, that means that whatever this next thing is that we're about to match needs to be immediately proceeded by that phrase. Let me make sure there is a space there. And then we're gonna do a capturing group, and the syntax for a capturing group is the question mark, and the angle brackets to give it a name.

Since I can't come up with any other more creative thing, I'm just gonna literally call it, it's a thing, it's some kind of noun, it's a thing. And how I'm gonna match is, I'm going to match a as an optional match with a space. And then I'm gonna match some word character with one or more, I guess I'll use plus, with one or more characters there.

So that's gonna be my capturing group for my noun. Now, I want to essentially to pull out the verb that it can do, I need to skip forward until I see the word can. So, I'm gonna use a dot star, and the reason the dot star works is because, I have the dot all mode.

So it's gonna be able to match across a new line. And then I want to make sure it's non-greedy. So I don't want it to go all the way to the end, so we'll use the question mark to make it non-greedy. And now we're gonna do another capture group, I'm sorry, another look behind assertion.

We're gong to say that we've matched up until, we immediately before it have can with a space. And then we do a capturing group and that capturing group will name verb. And we want to match,
>> Kyle Simpson: Again, a word.
>> Kyle Simpson: So that's basically this phrase that we're breaking down, the refrain that keeps coming over and over in each line of this poem.

We've broken that down in regular expressions, okay. So there's our regular expression. Now, now we're going to loop over it is we're going to say, while, and we're gonna need a match here. So, while we are able to assign the result of calling the regular expression .exec against the poem string that was passed in.

While there's a new match let's keep looping and once we're done with that loop there's nothing else to do. Now, the match object, I could just access. But one of the reasons why we named our caption groups is we wanna be able to get these things out with the semantic name.

So what I wanna be able to do is say let and then I'm gonna do a destructuring pattern here against the match object. And specifically I know that in that match, it's gonna have a groups property that represents any named capture groups that I would have had. So I'm wanna say groups and then inside of that object I know the two names that I use would be the properties thing, and verbs, so I wanna go ahead and make thing and verb as my variables.

And then I destructure the match object. At that point, now that I have a thing and a verb, I should be able to yield out a string, I'll use a template literal. And I'll say ${thing}: ${verb}.
>> Kyle Simpson: All right, if I didn't mess something up, that should be able to work.

Let's take that over to our console and see what it does.
>> Kyle Simpson: Well, something didn't work quite right, right? Again, [INAUDIBLE]
>> Kyle Simpson: I bet I didn't make the a optional.
>> Kyle Simpson: Yep, I need to make that a optional. Otherwise it’s only gonna match ones that actually have a in front of it.

All right, let's try this again, I don’t know if anybody has ever in the history of programming written their regular expression correctly the first time. I certainly haven’t. All right, let's try this again, there we go. So, there's our three regular expression improvements at play. We have named capture groups like the thing here, we have looked behind assertions, and we have the dot all mode so that we can match across new lines.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now