Hello and welcome back in this lesson, we're going to do a quick code review, and I'm also going to
do a little bonus improvement on our application to make it function a little bit more seamlessly for
the user.
So the user, the objective of this application is for users that have a whole bunch of string content
and they want to get the emails out and they not only want to get the emails, they want to get the
unique emails out of this huge string of content.
And this is actually a really useful application for the users.
So we see the way that it works.
When you press get emails, we output the emails into the new text area.
So this is that extracted version of the emails.
We're extracting it nice and neatly and also Colen separating these out.
So again, really nice, useful application, only taking out the unique emails and using regex in order
to accomplish that.
So let's run through the code that we used in order to set this up.
We didn't have any styling.
And of course, you can apply styling as needed to make it look a whole lot better.
But we did want to focus on JavaScript for this application.
So the bulk of the lessons were focused on JavaScript.
Of course, we created a text area.
We created a button.
We created another area here where we can output some content, some information to the user about how
many emails were found and the last.
We have another text area where we've got our output being shown.
So we selected all of the elements into JavaScript objects to make them really easy to access and utilize
within our code.
Then we went and started to build out our application code, so we needed to have interaction and interaction.
The only interaction on the page is other than to paste content is to do get emails.
So we've got a button that adds an event listener.
So whatever that button gets clicked, we get the raw text value that's contained within the paste text
text area.
We use our regular expression.
So we built out a regular expression that extracts out email content.
So it looks for uppercase lowercase letters and digits, zero to nine also for decimals underscores
and dashes.
So these are all valid within an email address, takes all of the content over until it hits an at symbol.
So that's the next part of what we're looking for.
So we make sure that we do have an add symbol within that string.
And then the same thing.
We look for all of that content and then that content all the way up until we hit a decimal point,
because as we know, with every email address, you need to have a domain name, a domain names all
have decimals.
So we need to have that dot, that decimal there and or the period, whatever you want to call it.
And we know with after the period, we can have any number of characters, again, representing the
domain.
So most of them, they don't have digits.
So you could probably remove this part out, but we'll just keep it just in case.
And you can also formalize this a little bit better.
But for now, we'll just keep this in and we're looking for the same characters, numbers and so on
and looking for all of that information until the next space.
So we're grabbing all of that and it's grabbing the content as well as creating a case insensitive so
it doesn't matter if it's upper or lower case.
So that makes it really flexible and grabbing the email addresses.
So that's our expression that we created using regular expressions.
And we use JavaScript method of match to check to see if our string or string value here.
The text input here has any matches for the regular expression.
And if it does the way JavaScript works when you use batch, it builds out an array of the returned
values.
So we create an array called email data and we had a problem because we needed to remove out only unique
values.
So we saw that email data worked fine.
We were able to output that content into the inner text and we were able to actually create our mini
application for that.
But in order to move out and get only unique items, we created a loop.
So looping through all that data, we created a brand new array in order to have hello's.
How is that data?
And then we also, as we loop through, we have a condition that checks to see if the value of email
data X, whatever that email address is, is already existing within that holdaway.
And if it is, then we skip it, we don't add it.
And if it's not, then that's where we get the negative one.
And that means that we need to add it into the new array that we're building.
So it's the holder array.
And then over here is where we're joining together, the array back into a string.
We have an option in JavaScript using join to separate it out by whatever characters we want.
We can have a whole bunch of characters and we can have one.
So we do the semicolon by default.
It's going to be the comma.
So if you don't list anything there, it'll just be the comma.
So they'll output it just as we saw the regular array being output within the text area.
And then we've got some information for the user.
So we see how many emails we have within the holder because this is an array, it's got a length value.
And then last, we would put that value into the entire text, so one of the other functions that I
still want to add in, and this is kind of a little bit bonus function, is whenever we click on this,
I want to be able to select all of that content.
So the user what they're typically going to be doing is in this text area, they want to select everything
to copy it out.
So let's make that a little bit easier.
And we already do have that object sitting here so we can add in to that object, adding an event listener.
So out of that listener, the that listener that we're listening for is click.
So whenever the user clicks on our finished text area, what we want to do is we want to invoke some
type of function and this one needs an extra T there at the end.
And the function could be another anonymous function.
Or you can link it out to a function if you want it to, if you want it to have something a little bit
more complex and flexible.
So what we want to do is we want to select the content so we can use this select method.
And this allows us to essentially select the content that is there and just do this select.
So what's going to happen now?
Whenever I do get emails and I click it, it's automatically going to select all the content.
So make it a little bit easier for the user in order to copy those emails.
So that's it.
And I hope you've enjoyed this section and building out this email extractor application.
Try it out for yourself.
The source code has been included.
If you have any questions or comments, I'm always happy to help answer them and clarify anything that
we've covered within the previous lessons.
Thanks again for taking the section.