1
00:00:00,440 --> 00:00:05,360
Welcome back, how's it going, this lesson we're going to be looking at regex and how to build regular

2
00:00:05,360 --> 00:00:08,120
expressions in order to pattern match content.

3
00:00:08,150 --> 00:00:10,280
So first of all, we need some content as well.

4
00:00:10,290 --> 00:00:12,260
So I'm going to put some default content.

5
00:00:12,260 --> 00:00:16,580
And really the objective is to type in and add in some real emails.

6
00:00:16,580 --> 00:00:23,030
So if we had real email, dotcom and a bunch of text here and I'm just going to be typing away, adding

7
00:00:23,030 --> 00:00:26,720
in some default content and I'll make a few other real emails.

8
00:00:26,720 --> 00:00:28,790
So I have email one.

9
00:00:28,790 --> 00:00:36,410
And sometimes we know with emails they've got dots in the middle and also they might have added some

10
00:00:36,410 --> 00:00:37,250
additional text.

11
00:00:37,670 --> 00:00:40,170
Sometimes emails might have a dash as well.

12
00:00:40,400 --> 00:00:46,160
So we need to be able to account for all these different types of emails that might possibly be pasted

13
00:00:46,160 --> 00:00:47,400
into our text area.

14
00:00:47,450 --> 00:00:51,200
So we've got a few in there and we do have some text surrounding it.

15
00:00:51,350 --> 00:00:54,410
So we need to be able to way to extract that information out.

16
00:00:54,440 --> 00:01:00,590
And before we do that, let's place that text into a JavaScript string so that we can analyze it a little

17
00:01:00,590 --> 00:01:01,060
bit better.

18
00:01:01,280 --> 00:01:06,580
We already have that JavaScript object, the text area within an object format.

19
00:01:06,590 --> 00:01:13,700
So let's that text there, that raw text object so we can take that value out and we can get the value

20
00:01:13,700 --> 00:01:14,110
out of it.

21
00:01:14,300 --> 00:01:17,000
So let's create a temp holder would just call it temp.

22
00:01:17,190 --> 00:01:21,320
And this is basically our temp string using the raw text object.

23
00:01:21,440 --> 00:01:23,540
So we're already selecting using query selector.

24
00:01:23,540 --> 00:01:26,170
We've got that object in order to get the value.

25
00:01:26,300 --> 00:01:31,310
This is going to be the same format as if we did document query selector and then selected the element

26
00:01:31,310 --> 00:01:32,300
and did value.

27
00:01:32,310 --> 00:01:35,390
So we've got it within an object format and we can get the value.

28
00:01:35,600 --> 00:01:41,960
And the important thing here is to note as well that if I did value up here, first of all, I wouldn't

29
00:01:41,960 --> 00:01:43,300
be able to select the object.

30
00:01:43,310 --> 00:01:44,810
It would only be selecting the value.

31
00:01:44,990 --> 00:01:52,190
And because we want to value in real time when it changes, we need to ask for the value when the event

32
00:01:52,190 --> 00:01:56,480
listener gets triggered because these values are actually going to be different, because they're going

33
00:01:56,480 --> 00:01:57,140
to be changing.

34
00:01:57,290 --> 00:02:03,860
So if we set the string to contain the raw text value when it's originally loading the page, it's going

35
00:02:03,860 --> 00:02:05,870
to be different than the value.

36
00:02:06,140 --> 00:02:10,940
And of course, if it changes, it's going to be different from the value that is currently when the

37
00:02:11,240 --> 00:02:12,900
when the tax cuts clicked.

38
00:02:13,130 --> 00:02:19,070
So if we were to duplicate this and double it, this has already changed and we need it being reflected

39
00:02:19,070 --> 00:02:20,780
within the real time value.

40
00:02:21,020 --> 00:02:26,390
So next, what we do is we need to do something with that value and just to make sure that we are getting

41
00:02:26,390 --> 00:02:31,970
the value properly and the current value, we can always double check and make sure that we are pulling

42
00:02:31,970 --> 00:02:32,740
in that value.

43
00:02:32,870 --> 00:02:36,660
You see, it's being returned back as a string within our JavaScript console.

44
00:02:36,770 --> 00:02:39,980
So this is essentially whatever is being contained within here.

45
00:02:40,010 --> 00:02:44,840
And if I do that duplicating again, we get a much longer string being output.

46
00:02:45,020 --> 00:02:48,930
So as it changes within the text area, it's also changing here.

47
00:02:48,950 --> 00:02:53,060
So one of the tools that we can utilize in JavaScript is regular expressions.

48
00:02:53,330 --> 00:02:56,900
And so this time this stuff can kind of get a little bit complicated.

49
00:02:57,470 --> 00:02:59,570
But I'm going to work you through the basics of it.

50
00:02:59,720 --> 00:03:04,160
And there's a really great website called Regg X, R dot com.

51
00:03:04,280 --> 00:03:08,270
And this allows you to try out and build out your regular expressions.

52
00:03:08,450 --> 00:03:09,620
So you go to the page.

53
00:03:09,740 --> 00:03:11,390
They've got a default pattern.

54
00:03:11,450 --> 00:03:17,510
And what this pattern is doing is it's currently matching all of the characters from A to Z.

55
00:03:17,720 --> 00:03:20,180
And you see that's being returned back here.

56
00:03:20,330 --> 00:03:24,790
And it's also adding in the word what the character attached to it.

57
00:03:24,950 --> 00:03:30,830
So if we're to remove out this word part here, we see that it's matching in and it's returning back

58
00:03:30,830 --> 00:03:31,890
all of the characters.

59
00:03:32,180 --> 00:03:34,010
So this is part of what we have to do.

60
00:03:34,010 --> 00:03:35,180
And this is uppercase.

61
00:03:35,330 --> 00:03:40,310
And you can also specify if you wanted lowercase so you can do A to Z, a C.

62
00:03:40,310 --> 00:03:43,760
It's getting all of the characters, but it's not getting numbers.

63
00:03:43,760 --> 00:03:45,200
It's not getting dashes.

64
00:03:45,320 --> 00:03:47,240
It's not getting decimal places.

65
00:03:47,360 --> 00:03:52,280
So if we have our string here, I want to be able to get all of the emails.

66
00:03:52,440 --> 00:03:55,460
That's the nice thing about this tool, because I can paste that in.

67
00:03:55,670 --> 00:03:58,820
So I only want emails being returned.

68
00:03:59,030 --> 00:04:03,490
And this is where we can write up a little bit of a longer formula here.

69
00:04:03,710 --> 00:04:10,250
So we want to make sure that the string has letters, but we also want to look for the at symbol.

70
00:04:10,250 --> 00:04:12,500
So that's where we can include that into the symbol.

71
00:04:12,710 --> 00:04:18,470
And you can see as we're writing out our expression, you see that selecting those out.

72
00:04:18,500 --> 00:04:24,320
So we've got to test at and we're not accounting for the ones that have the dots either right now.

73
00:04:24,560 --> 00:04:29,600
So we need to make sure we're selecting all of the characters, including the dots.

74
00:04:29,600 --> 00:04:36,170
So that's getting a little bit more of the email addresses and as well as the underscores and the dashes.

75
00:04:36,590 --> 00:04:42,050
So now we see that we're getting the first part of the email out of the string and we've still got a

76
00:04:42,050 --> 00:04:44,210
few other characters that we need to get.

77
00:04:44,390 --> 00:04:46,630
So we need to get the email dot com.

78
00:04:46,820 --> 00:04:53,060
So that's the same type of idea as we've just been doing where we can extend on the values that we're

79
00:04:53,060 --> 00:04:53,560
looking at.

80
00:04:53,930 --> 00:04:59,600
So we're still looking for all of the A to Z, we're looking to A to Z uppercase as.

81
00:04:59,690 --> 00:05:04,880
Also, those are valid within an email and also zero to nine, so numbers are also valid.

82
00:05:05,110 --> 00:05:09,850
So in case within the domain there's numbers and we don't really have any of those.

83
00:05:09,850 --> 00:05:13,830
But I can add some in just to make it a little bit more interesting.

84
00:05:13,840 --> 00:05:21,100
So we're looking for the numbers as well, and we're also going to be looking for the dots.

85
00:05:21,340 --> 00:05:23,970
So that could also be valid within a domain.

86
00:05:24,220 --> 00:05:27,760
And we're also looking for underscores and dashes.

87
00:05:28,030 --> 00:05:31,060
So all of these are valid within an email address.

88
00:05:31,070 --> 00:05:32,770
So anything after that?

89
00:05:33,830 --> 00:05:39,470
And we also need to take the rest of the string of value, so right now we're getting the first character

90
00:05:39,650 --> 00:05:44,540
after that symbol and we're getting all of the characters before that at Symbol.

91
00:05:44,540 --> 00:05:47,600
So including it all as within an email format.

92
00:05:48,260 --> 00:05:49,460
So, so far, so good.

93
00:05:49,730 --> 00:05:53,630
And it does take a little bit of practice with creating regular expressions.

94
00:05:53,840 --> 00:05:57,050
And that's why I always recommend this tool as this is a great way.

95
00:05:57,170 --> 00:06:01,400
It's also got what's happening here within what's tools are being applied.

96
00:06:01,560 --> 00:06:08,840
You've also got some options here within your JavaScript and you can also add in to your global object

97
00:06:08,850 --> 00:06:12,490
so you can be case sensitive if you want, or you can turn that off.

98
00:06:12,500 --> 00:06:14,270
And we don't need that in this case.

99
00:06:14,780 --> 00:06:16,930
But they do have some more options as well.

100
00:06:16,940 --> 00:06:22,040
We could do multiline, which we don't need for the emails, but they are there and there's more information

101
00:06:22,040 --> 00:06:22,780
contained here.

102
00:06:22,790 --> 00:06:24,050
There's also a cheat sheet.

103
00:06:24,230 --> 00:06:26,450
So there's a lot of great stuff on this website.

104
00:06:26,660 --> 00:06:32,420
So if you are looking for regex, this is a great site once again to to check that out and to build

105
00:06:32,420 --> 00:06:33,320
out your expressions.

106
00:06:33,680 --> 00:06:35,210
So we need to get the rest of the word.

107
00:06:35,210 --> 00:06:36,650
So let's add a plus.

108
00:06:36,770 --> 00:06:41,150
And you can see that we're already grabbing the rest of the word, but we want to make sure that we're

109
00:06:41,150 --> 00:06:42,530
matching the right patterns.

110
00:06:42,740 --> 00:06:44,810
So anything up to the dot.

111
00:06:45,050 --> 00:06:46,520
So that's all valid.

112
00:06:46,760 --> 00:06:50,450
And then we don't want to have the all the same characters.

113
00:06:50,720 --> 00:06:56,240
So we want to make sure that once again, we're getting that seam matching of all of those same characters.

114
00:06:56,240 --> 00:06:57,560
So we get the dot com.

115
00:06:57,710 --> 00:07:01,970
And if we do a plus to it, you see that you get the full dot com.

116
00:07:01,970 --> 00:07:03,680
So that plus is really important.

117
00:07:03,830 --> 00:07:08,120
And the same thing that's doing over here and over here, it's by default.

118
00:07:08,120 --> 00:07:09,920
We get the first character afterwards.

119
00:07:09,920 --> 00:07:14,270
So when we add in that plus boom, there we go, we get the full email address.

120
00:07:14,510 --> 00:07:20,540
And so we could do this and we could also add into this case insensitive.

121
00:07:20,750 --> 00:07:22,700
So that actually doesn't matter about the case.

122
00:07:22,850 --> 00:07:25,640
But we're already accounting for it for upper and lower case.

123
00:07:25,910 --> 00:07:28,970
But just to be sure, it's always a good idea to add that in.

124
00:07:29,120 --> 00:07:33,260
So even if they're upper case, they're still going to be added in as email addresses.

125
00:07:33,260 --> 00:07:34,550
And I think I messed that one up.

126
00:07:34,550 --> 00:07:37,260
So let's put a dot in there and see what happens.

127
00:07:37,580 --> 00:07:43,640
So we've got our email address there and everything looks like it's working properly.

128
00:07:43,640 --> 00:07:49,220
And we also need to add in that same string value here, the zero to nine, as I don't see that that's

129
00:07:49,220 --> 00:07:49,700
added in.

130
00:07:49,710 --> 00:07:52,340
So we've got to make sure that that is added in as well.

131
00:07:52,340 --> 00:07:56,570
So that way it looks like we are able to extract it all the email addresses.

132
00:07:56,720 --> 00:08:02,240
So now it's just a matter of applying this and we can pull them back as email addresses.

133
00:08:02,480 --> 00:08:08,270
So I know this is exciting and this is where you can also compute that much string and I'll show you

134
00:08:08,270 --> 00:08:11,440
how you can add that into your JavaScript.

135
00:08:11,690 --> 00:08:17,540
So we've got our expression that we're using and it does take a little bit of time to build these out

136
00:08:17,540 --> 00:08:22,820
so these can get fairly complex and there are shorter ways to do it and a lot of different ways to do

137
00:08:22,820 --> 00:08:22,960
it.

138
00:08:23,210 --> 00:08:26,700
So once you get from more familiar with it, you can really get to utilize that.

139
00:08:26,750 --> 00:08:33,530
So let's create our expression and it can just call it expression and we can just paste that in there.

140
00:08:33,800 --> 00:08:37,850
So this is the expression that we're looking for and it didn't actually get all of it in.

141
00:08:37,850 --> 00:08:42,490
So let's go back in here because it didn't I didn't get all of the slashes.

142
00:08:42,500 --> 00:08:45,890
And so we need the guy in the in front of it.

143
00:08:45,890 --> 00:08:48,560
So when I copied it, it didn't it left those out.

144
00:08:48,560 --> 00:08:51,160
So we've got to make sure that we add those in as well.

145
00:08:51,410 --> 00:08:55,310
So we're looking for the slash and then the slash at the end.

146
00:08:55,310 --> 00:08:57,380
And this is going to be slash GI.

147
00:08:57,410 --> 00:08:59,330
So there's our expression.

148
00:08:59,870 --> 00:09:08,240
We've got that built and well, we can use that and we can get the email so we can call it emails,

149
00:09:08,570 --> 00:09:09,550
email data.

150
00:09:09,560 --> 00:09:16,640
How about we call it email data and we can use the raw text or the temp value since we do have it within

151
00:09:16,640 --> 00:09:17,040
a value.

152
00:09:17,240 --> 00:09:23,660
So this, again, is the content that's contained within the text area and take that in using much.

153
00:09:23,660 --> 00:09:30,470
We can use the match method and then the expression that we want to match to is AXP, so we can just

154
00:09:30,470 --> 00:09:31,500
copy that in there.

155
00:09:31,760 --> 00:09:36,950
So this is the regular expression that we're matching and let's put this into the console, save that

156
00:09:37,070 --> 00:09:44,990
and try that out so that when we go to emails, get emails, we get a nicely formatted listing of all

157
00:09:44,990 --> 00:09:45,710
of the emails.

158
00:09:46,100 --> 00:09:52,460
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

159
00:09:52,460 --> 00:09:55,010
going to see the same emails being extracted.

160
00:09:55,160 --> 00:10:00,530
So in that case, we had 17 and they're all valid emails because they all matching the pattern that

161
00:10:00,530 --> 00:10:01,130
we set out.

162
00:10:01,700 --> 00:10:07,640
So this is our quick and easy way to pull out email addresses out of our string.

163
00:10:07,640 --> 00:10:12,230
And doesn't matter how long the string is or how many email addresses there are, it's going to pull

164
00:10:12,230 --> 00:10:13,940
it out in a nice array format.

165
00:10:14,120 --> 00:10:20,060
So now we know we've got our array that we can work with and we can loop through these email addresses.

166
00:10:20,060 --> 00:10:23,750
We know how many are found so we can output that to the user.

167
00:10:23,900 --> 00:10:28,820
So there's a lot of things that we can do now, now that we've got the email addresses out in a nice

168
00:10:28,820 --> 00:10:29,950
array format.

169
00:10:30,440 --> 00:10:33,230
So coming up next, I'll show you how you can.

170
00:10:33,320 --> 00:10:37,920
Turn it back into a string and output it into the finished text area.

171
00:10:37,940 --> 00:10:39,890
So that is all still to come.

172
00:10:40,520 --> 00:10:48,890
So for this lesson, go over to regex gortari, check out the website, try out building out your regular

173
00:10:48,890 --> 00:10:49,480
expression.

174
00:10:49,490 --> 00:10:55,430
You can have some fun with that, create your own string, hyd some characters in there and try to get

175
00:10:55,430 --> 00:10:59,180
those out of the string value and also practice the emails.

176
00:10:59,300 --> 00:11:03,530
And by the end of it, your email string should look something similar to mine.

177
00:11:03,710 --> 00:11:07,280
And I do mention that there are different ways to extract it to email.

178
00:11:07,300 --> 00:11:09,230
So there's different ways to do the pattern matching.

179
00:11:09,710 --> 00:11:13,670
But this is a really basic format that's really easy to understand.

180
00:11:13,850 --> 00:11:18,770
And there's a whole bunch more that you can do within the cheat sheet and a whole lot just really a

181
00:11:18,770 --> 00:11:21,110
lot of stuff that's available within regex.

182
00:11:21,260 --> 00:11:25,520
So this is a great starting point if you want to get more familiar with regex and how it works.

183
00:11:25,670 --> 00:11:26,720
So go ahead and try it out.

184
00:11:27,020 --> 00:11:33,410
And in your application, make sure that you can extract all of the email addresses out of the string

185
00:11:33,410 --> 00:11:36,140
into an array format and you can be ready to move on to the next.