Get the fundamentals down and the level of everything you do will rise. - Michael Jordan

As stated in my original post, I do 1 hour of video lessons from Watch and Code every day. If you're interested in learning Javascript in a way that goes beyond basic tutorials and gives you a foundational, practical knowledge without relying on frameworks - I'd highly recommend it. If you're reading these posts, please keep in mind that these are just my notes, and I'm not an expert (yet!). If your goal is also to master the fundamentals of Javascript, please head over to Watch and Code and start your journey there!

All screenshots were annotated using Shotty.

Regular expression capture groups

Let's say we want to make a simple phone number obfuscator:

555-666-7777 => XXX-XXX-7777

We're going to use a tool that helps to visualize regular expressions, called RegExr.

Let's put in a phone number as text to start:

The first thing we want to do is add a set, [], with a range to match digits, 0-9.

But this matches each single digit individually:

We want a single match that matches the whole thing. To do this, we'll first focus on the first part of the pattern: 343.

If we were to describe what we want in English, we'd say that we want a digit, 3 consecutive times.

We can take care of the 3 consecutive times part with a quantifier.

We can say "give me one or more of the preceding pattern" by leaving off the upper limit:

But we want be very specific and say that we want 3 consecutive digits. We can do this with a quantifier by just putting in one number:

That covers the first part of the pattern: 3 consecutive numbers.

The second part is easy. We want to match a hyphen. So we can just put in a literal hyphen:

We get two matches. One for each instance of this pattern of 3 digits followed by a hyphen.

But we want to match the entire thing: 343-555-.

Since the two patterns are the same, we can just take our regular expression and repeat it:

Now we've gone from having two matches that repeat, to having one single match that has the entire repeated pattern.

To match the last piece, we want a digit that happens exactly 4 times, so we can use a quantifier with the number 4:

Now we have a regular expression that entirely matches a phone number (in this format anyway).

We can use a meta character to replace the set of 0-9. This will behave exactly the same way, but will make our expression a little bit shorter. We can use \d instead of 0-9. Think of d as standing for "digit".

We can hover over parts of our regular expression to get helpful hints in RegExr:

To keep going we need to learn about the replace method on strings.

This is very much like a find and replace. It looks for the pattern in the first argument, and then it replaces it with the string in the second argument.

We can do even more powerful things with .replace.

We can refer to the string that was matched by the regular expression using the $& token.

Remember, what we want to do is change the beginning part of the phone number to X's like this:

We saw in the previous example that we can access the entire match with the $& token, but we don't know how to access just a specific portion of the match.

To save and reference a part of the regular expression, you can just wrap it in parentheses. You then reference that saved portion using the $1 token. If you saved two portions, you can use $1 for the first, $2 for the second, and so on.

This is called a matched group, which we can refer to in our replace method.

Now we're very close. We can get rid of the rest of the match:

And then we can add our X's:

Swapping first and last names

If we have a name with the last name followed by a comma and the first name, we can use regular expressions to swap them to a first/last format.

We can do that like this using capturing groups:

Summary

• We can use Regex to do Find and Replace type of actions using .replace.
• Capturing groups () let us refer to pieces of you match within .replace using $1, $2, etc.
• We can refer to our whole match with the token $&