Professional JS: Features You Need to Know

Regular Expression Enhancements

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
Professional JS: Features You Need to Know

Check out a free preview of the full Professional JS: Features You Need to Know course

The "Regular Expression Enhancements" Lesson is part of the full, Professional JS: Features You Need to Know course featured in this preview video. Here's what you'd learn in this lesson:

Maximiliano covers various enhancements and additions to regular expressions in JavaScript including the .all flag and sticky flag. He also explains lookbehind assertions, name capture groups, and the Unicode property flag.

Preview
Close
Get $100 Off
Get $100 Off!

Transcript from the "Regular Expression Enhancements" Lesson

[00:00:00]
>> Maximiliano Firtman: The last section, it's about regular expressions, and again I'm not sure how many of you are experts or even comfortable with regular expression, not even experts. But let's cover briefly the additions that have been in this field, that it needs a whole workshop on regular expressions full day of regular expressions.

[00:00:22]
It's interesting when you learn regular expressions when you understand what's going on behind scenes. So I remember seeing that at university, so like spending several weeks learning machine states and what's going on behind scenes. To try and defend why are so cryptic okay, but anyway, we have that, let's start let's go one by one.

[00:00:49]
So we have first one known as the .all fly that will match any character including line breaks, typically line breaks we're not line breaks or taps. Special characters were not being taken by the regular expression, when you use the flag, actually it's being used after the forward slash when you create the regular expression, typically, maybe you have been playing with g, the global one.

[00:01:16]
That's the most common one, but now we have the s, that, it just check whatever you have inside, okay? So if I run this, it says true because, it works with this character, new line character. We have the sticky flag, that actually ensures that the match must start the current position in the target string, it's actually what's going on, okay?

[00:01:45]
So because if you run this, you don't really understand what's going on initially. The idea with this is that when you execute a regular expression on the same string many times, okay, in this case, it's looking for foo, okay? Exactly for foo, and it has the sticky flag, so the idea is that, for example, if I remove a character here, the second one disappears.

[00:02:14]
So I have two executions, it's exactly the same, you can see it's exactly the same execution, and why did the other one here disappear? Let's go back to the other one like that, they disappear when I'm changing this disappear. Why? Because it has some benefit pointer, so when I execute this for the first time because of the sticky flag, here, you're gonna see a sticky flag, like the y.

[00:02:36]
It has like a pointer, so it's It actually found the first foo, and it stopped there, now it has a pointer there. When you execute again, it will check for foo after that pointer, and now there is no foo after that point. Okay, make sense? It's just that.

[00:02:56]
Look behind assertions or even more complicated to actually understand if you don't have experience with regular expression. I will try to do my best to give you a quick idea of what's going on, so in this case, you can do positive loop behind or negative loop behind. By the way, ECMAScript always supported, or it has supported look ahead for a while, okay?

[00:03:24]
This is look behind, so what's the idea? So, in this case, you can look behind foo, so I'm trying to get foo as a prefix, okay? So I'm saying, hey, look behind foo, so this is a syntax, actually in the regular expression, so this is not a flag, it's part of the regular expression pattern.

[00:03:51]
So I'm saying, I wanna look behind foo, so actually the result is 123. A negative look behind is when you wanna look with this, okay, it's looking for bar, and of course, there is no bar here. So it's also giving me 123, again, by the way, it's also matching digits here.

[00:04:15]
So the digits, that should have a foo before, and the other one is a dish that shouldn't have bar before. Something like that, that's what you are matching. Name capture groups is something that you will get probably better because it's something that we have already tested before. Remember the regular expression that we use with match all that was extracting the year, was extracting the month and the day.

[00:04:45]
I'm not sure if you remember that at that point, the year was actually sub1, it wasn't array of data, but was receiving the whole date. Then we're assuming the year, then the month, then the day, but we received that in an array. And we need to go and grab the one we need by the index, well now we'll name groups that is actually something that appear in 2018.

[00:05:17]
You can name the groups and this is the name, so in this case, you use angle brackets within the already cryptic regular expression in angle brackets within the parenthesis, this is the group. We define a name, year, month, and day, so in this case, we are saying this is a group that the name is the year, and it's looking for four numeric digits.

[00:05:45]
The month, then we have a hyphen, then it should have the month two digits, and our hyphen, and the day with two digits. When we execute this with any value here, you receive name groups. With .Tintax, you can go and grab the year, the month, and the day, which is much better than just grabbing the groups by their index, Their indices, actually, make sense?

[00:06:20]
So then you receive, and of course, you pick the order, right? So you can change the order because it's name-based, not position-based. Does it make sense? And then we have also the Unicode property, that's actually the another flag. /u, which lets you match based on the properties of the Unicode set of characters.

[00:06:50]
Some for example, I can check if the string has Greek characters, so if I test this, Alpha is Greek, it's true. If I use, I don't know, a, Latin a, is false, that's not Greek, okay? Makes sense? And also another thing you can check, you can check if it's emoji, if it includes emojis, emoji flags, or whatever or punctuation characters.

[00:07:20]
So, for example, if I check on this, it gives me true that it has punctuation characters, I can also extract them. But if I remove all these marks, so if I run this, it's still true. But if I remove exclamation mark, I still have to, comma sorry, now it's false just by saying this capital P with the U flag, okay?

[00:07:51]
So that's new from ESX there are not so many use cases but typically for validation purposes, it will probably be useful, okay? So those are the new enhancements around regular expressions.
>> Student: Just in the chat, just mentioned that regex101.com is a great site for understanding them or just playing around.

[00:08:17]
>> Maximiliano Firtman: Yeah, there are a lot of resources around regular expression, regular expression is actually its own language that is not related to JavaScript. Implementations might be different on different languages, but the main idea of a regular expression, the mainstream is typically something that isn't a standard that works across many, many, many languages.

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