Welcome back, how's it going, this lesson we're going to be looking at regex and how to build regular
expressions in order to pattern match content.
So first of all, we need some content as well.
So I'm going to put some default content.
And really the objective is to type in and add in some real emails.
So if we had real email, dotcom and a bunch of text here and I'm just going to be typing away, adding
in some default content and I'll make a few other real emails.
So I have email one.
And sometimes we know with emails they've got dots in the middle and also they might have added some
additional text.
Sometimes emails might have a dash as well.
So we need to be able to account for all these different types of emails that might possibly be pasted
into our text area.
So we've got a few in there and we do have some text surrounding it.
So we need to be able to way to extract that information out.
And before we do that, let's place that text into a JavaScript string so that we can analyze it a little
bit better.
We already have that JavaScript object, the text area within an object format.
So let's that text there, that raw text object so we can take that value out and we can get the value
out of it.
So let's create a temp holder would just call it temp.
And this is basically our temp string using the raw text object.
So we're already selecting using query selector.
We've got that object in order to get the value.
This is going to be the same format as if we did document query selector and then selected the element
and did value.
So we've got it within an object format and we can get the value.
And the important thing here is to note as well that if I did value up here, first of all, I wouldn't
be able to select the object.
It would only be selecting the value.
And because we want to value in real time when it changes, we need to ask for the value when the event
listener gets triggered because these values are actually going to be different, because they're going
to be changing.
So if we set the string to contain the raw text value when it's originally loading the page, it's going
to be different than the value.
And of course, if it changes, it's going to be different from the value that is currently when the
when the tax cuts clicked.
So if we were to duplicate this and double it, this has already changed and we need it being reflected
within the real time value.
So next, what we do is we need to do something with that value and just to make sure that we are getting
the value properly and the current value, we can always double check and make sure that we are pulling
in that value.
You see, it's being returned back as a string within our JavaScript console.
So this is essentially whatever is being contained within here.
And if I do that duplicating again, we get a much longer string being output.
So as it changes within the text area, it's also changing here.
So one of the tools that we can utilize in JavaScript is regular expressions.
And so this time this stuff can kind of get a little bit complicated.
But I'm going to work you through the basics of it.
And there's a really great website called Regg X, R dot com.
And this allows you to try out and build out your regular expressions.
So you go to the page.
They've got a default pattern.
And what this pattern is doing is it's currently matching all of the characters from A to Z.
And you see that's being returned back here.
And it's also adding in the word what the character attached to it.
So if we're to remove out this word part here, we see that it's matching in and it's returning back
all of the characters.
So this is part of what we have to do.
And this is uppercase.
And you can also specify if you wanted lowercase so you can do A to Z, a C.
It's getting all of the characters, but it's not getting numbers.
It's not getting dashes.
It's not getting decimal places.
So if we have our string here, I want to be able to get all of the emails.
That's the nice thing about this tool, because I can paste that in.
So I only want emails being returned.
And this is where we can write up a little bit of a longer formula here.
So we want to make sure that the string has letters, but we also want to look for the at symbol.
So that's where we can include that into the symbol.
And you can see as we're writing out our expression, you see that selecting those out.
So we've got to test at and we're not accounting for the ones that have the dots either right now.
So we need to make sure we're selecting all of the characters, including the dots.
So that's getting a little bit more of the email addresses and as well as the underscores and the dashes.
So now we see that we're getting the first part of the email out of the string and we've still got a
few other characters that we need to get.
So we need to get the email dot com.
So that's the same type of idea as we've just been doing where we can extend on the values that we're
looking at.
So we're still looking for all of the A to Z, we're looking to A to Z uppercase as.
Also, those are valid within an email and also zero to nine, so numbers are also valid.
So in case within the domain there's numbers and we don't really have any of those.
But I can add some in just to make it a little bit more interesting.
So we're looking for the numbers as well, and we're also going to be looking for the dots.
So that could also be valid within a domain.
And we're also looking for underscores and dashes.
So all of these are valid within an email address.
So anything after that?
And we also need to take the rest of the string of value, so right now we're getting the first character
after that symbol and we're getting all of the characters before that at Symbol.
So including it all as within an email format.
So, so far, so good.
And it does take a little bit of practice with creating regular expressions.
And that's why I always recommend this tool as this is a great way.
It's also got what's happening here within what's tools are being applied.
You've also got some options here within your JavaScript and you can also add in to your global object
so you can be case sensitive if you want, or you can turn that off.
And we don't need that in this case.
But they do have some more options as well.
We could do multiline, which we don't need for the emails, but they are there and there's more information
contained here.
There's also a cheat sheet.
So there's a lot of great stuff on this website.
So if you are looking for regex, this is a great site once again to to check that out and to build
out your expressions.
So we need to get the rest of the word.
So let's add a plus.
And you can see that we're already grabbing the rest of the word, but we want to make sure that we're
matching the right patterns.
So anything up to the dot.
So that's all valid.
And then we don't want to have the all the same characters.
So we want to make sure that once again, we're getting that seam matching of all of those same characters.
So we get the dot com.
And if we do a plus to it, you see that you get the full dot com.
So that plus is really important.
And the same thing that's doing over here and over here, it's by default.
We get the first character afterwards.
So when we add in that plus boom, there we go, we get the full email address.
And so we could do this and we could also add into this case insensitive.
So that actually doesn't matter about the case.
But we're already accounting for it for upper and lower case.
But just to be sure, it's always a good idea to add that in.
So even if they're upper case, they're still going to be added in as email addresses.
And I think I messed that one up.
So let's put a dot in there and see what happens.
So we've got our email address there and everything looks like it's working properly.
And we also need to add in that same string value here, the zero to nine, as I don't see that that's
added in.
So we've got to make sure that that is added in as well.
So that way it looks like we are able to extract it all the email addresses.
So now it's just a matter of applying this and we can pull them back as email addresses.
So I know this is exciting and this is where you can also compute that much string and I'll show you
how you can add that into your JavaScript.
So we've got our expression that we're using and it does take a little bit of time to build these out
so these can get fairly complex and there are shorter ways to do it and a lot of different ways to do
it.
So once you get from more familiar with it, you can really get to utilize that.
So let's create our expression and it can just call it expression and we can just paste that in there.
So this is the expression that we're looking for and it didn't actually get all of it in.
So let's go back in here because it didn't I didn't get all of the slashes.
And so we need the guy in the in front of it.
So when I copied it, it didn't it left those out.
So we've got to make sure that we add those in as well.
So we're looking for the slash and then the slash at the end.
And this is going to be slash GI.
So there's our expression.
We've got that built and well, we can use that and we can get the email so we can call it emails,
email data.
How about we call it email data and we can use the raw text or the temp value since we do have it within
a value.
So this, again, is the content that's contained within the text area and take that in using much.
We can use the match method and then the expression that we want to match to is AXP, so we can just
copy that in there.
So this is the regular expression that we're matching and let's put this into the console, save that
and try that out so that when we go to emails, get emails, we get a nicely formatted listing of all
of the emails.
And you can also see that if I go over to here and if I copy all of the string value in here, we're
going to see the same emails being extracted.
So in that case, we had 17 and they're all valid emails because they all matching the pattern that
we set out.
So this is our quick and easy way to pull out email addresses out of our string.
And doesn't matter how long the string is or how many email addresses there are, it's going to pull
it out in a nice array format.
So now we know we've got our array that we can work with and we can loop through these email addresses.
We know how many are found so we can output that to the user.
So there's a lot of things that we can do now, now that we've got the email addresses out in a nice
array format.
So coming up next, I'll show you how you can.
Turn it back into a string and output it into the finished text area.
So that is all still to come.
So for this lesson, go over to regex gortari, check out the website, try out building out your regular
expression.
You can have some fun with that, create your own string, hyd some characters in there and try to get
those out of the string value and also practice the emails.
And by the end of it, your email string should look something similar to mine.
And I do mention that there are different ways to extract it to email.
So there's different ways to do the pattern matching.
But this is a really basic format that's really easy to understand.
And there's a whole bunch more that you can do within the cheat sheet and a whole lot just really a
lot of stuff that's available within regex.
So this is a great starting point if you want to get more familiar with regex and how it works.
So go ahead and try it out.
And in your application, make sure that you can extract all of the email addresses out of the string
into an array format and you can be ready to move on to the next.