1 00:00:00,110 --> 00:00:01,340 So I've been going around the firm and 2 00:00:01,340 --> 00:00:03,410 looking for content suggestions, and I came across 3 00:00:03,410 --> 00:00:05,820 this post by Caleb King, asking for a 4 00:00:05,820 --> 00:00:09,180 tutorial or a practice session on regular expressions. 5 00:00:09,180 --> 00:00:10,660 I'm going to take you through a couple of 6 00:00:10,660 --> 00:00:13,610 regular expressions and what you can do with them. 7 00:00:13,610 --> 00:00:16,800 And maybe you can extend this project for later in your own time. 8 00:00:16,800 --> 00:00:18,940 >> Once you've downloaded the project make sure 9 00:00:18,940 --> 00:00:23,710 you have the, index file an the address here. 10 00:00:23,710 --> 00:00:26,860 And what this project is, is a sign up form. 11 00:00:26,860 --> 00:00:28,650 So, in the web browser here you can see 12 00:00:28,650 --> 00:00:31,780 we've got a username, a telephone and a password. 13 00:00:31,780 --> 00:00:34,170 And this is a really good example of what. 14 00:00:34,170 --> 00:00:36,390 When you'd want to use a regular expression. 15 00:00:36,390 --> 00:00:42,950 A regular expression tends to be used for validation, or, a process called parsing. 16 00:00:42,950 --> 00:00:46,420 Now, parsing something would be, like, how a browser 17 00:00:46,420 --> 00:00:50,510 reads and HTML file and creates, say, the DOM. 18 00:00:50,510 --> 00:00:54,070 It transforms one form of information into another. 19 00:00:54,070 --> 00:01:00,490 So a regular expression say all the things within the tags. 20 00:01:00,490 --> 00:01:04,250 Or a regular expression could be, the pattern 21 00:01:04,250 --> 00:01:07,500 of the paragraph with the label input and span. 22 00:01:08,790 --> 00:01:13,600 Generally patterns that arise in text, so you can 23 00:01:13,600 --> 00:01:18,850 use it for this parsing, like creating your own DOM tree, 24 00:01:18,850 --> 00:01:24,490 if you were to be so brave or doing something simple like a validation. 25 00:01:24,490 --> 00:01:27,950 So, at the moment we have. 26 00:01:27,950 --> 00:01:32,460 When we type in the username it says, can only be letters A to Z in lowercase. 27 00:01:32,460 --> 00:01:36,330 And currently there's no validation code whatsoever. 28 00:01:37,540 --> 00:01:41,480 And here, there's a telephone number in the American format. 29 00:01:41,480 --> 00:01:45,530 And just to show you there's no validation whatsoever. 30 00:01:45,530 --> 00:01:50,960 And in the password we're going to Type in just anything. 31 00:01:50,960 --> 00:01:52,880 And there's no validation whatsoever. 32 00:01:52,880 --> 00:01:56,780 What I'm gonna do is change this password field to text field. 33 00:01:56,780 --> 00:02:01,670 So I'm just gonna jump into here and just do text. 34 00:02:01,670 --> 00:02:06,690 This is a bad idea to do in production, but in the terms 35 00:02:06,690 --> 00:02:12,020 of showing regular expression it's best to show it, matching and not matching. 36 00:02:12,020 --> 00:02:17,220 So in the AppJS file we're using a bit of jQuery and modified example. 37 00:02:17,220 --> 00:02:21,690 From one of my courses jQuery basics. 38 00:02:21,690 --> 00:02:23,930 Now this code is fairly straight forward. 39 00:02:23,930 --> 00:02:28,050 We're just concentrate on these methods here. 40 00:02:28,050 --> 00:02:29,490 Is the user name valid? 41 00:02:29,490 --> 00:02:33,470 Is the telephone valid and is the password valid? 42 00:02:33,470 --> 00:02:37,230 This code down here just binds to the focus and key up 43 00:02:37,230 --> 00:02:41,840 prevents on the user name field, the password field and the telephone field. 44 00:02:41,840 --> 00:02:45,300 And it will basically call the is valid method. 45 00:02:45,300 --> 00:02:51,150 The is password valid method and the is user name method. 46 00:02:51,150 --> 00:02:58,310 Or, should I say, function on the particular input. 47 00:02:58,310 --> 00:03:06,550 And it will show or hide these spans, these spans here are next to the input. 48 00:03:06,550 --> 00:03:09,160 So, we're gonna use. 49 00:03:09,160 --> 00:03:11,180 This code here for that. 50 00:03:11,180 --> 00:03:15,480 So, let's take a look at the is using invalid. 51 00:03:15,480 --> 00:03:19,880 The hint says can only be lowercase letters. 52 00:03:19,880 --> 00:03:23,060 So, to do a regular expression you can do a number of things. 53 00:03:23,060 --> 00:03:27,070 You can, first define one. 54 00:03:27,070 --> 00:03:32,990 So I'm gonna say expression Equals new rej X. 55 00:03:32,990 --> 00:03:36,530 And then, within that you can pass in a pattern. 56 00:03:36,530 --> 00:03:39,280 So there's two important things to remember 57 00:03:39,280 --> 00:03:46,099 with regular expressions, and that's patterns, and modifiers. 58 00:03:48,390 --> 00:03:50,950 And so we're gonna just look at the patterns right now. 59 00:03:50,950 --> 00:03:54,410 Later on we'll need to deal with some modifiers. 60 00:03:54,410 --> 00:03:56,110 But we're gonna deal with patterns. 61 00:03:56,110 --> 00:03:58,080 And they can be defined in a number of ways. 62 00:03:58,080 --> 00:04:01,180 They can be defined within slashes like this. 63 00:04:01,180 --> 00:04:07,678 So we could search for the pattern user, so, let's take a look oh, 64 00:04:07,678 --> 00:04:14,740 let's first return a test so you can use an expression to test some text. 65 00:04:14,740 --> 00:04:21,150 So in this case we're gonna test the user name, and the value in that. 66 00:04:21,150 --> 00:04:23,260 So, we're gonna test. 67 00:04:23,260 --> 00:04:26,180 This string against this pattern here. 68 00:04:26,180 --> 00:04:31,200 So, let's check if we've got user in the pattern. 69 00:04:32,890 --> 00:04:33,870 So, let's refresh. 70 00:04:34,900 --> 00:04:37,890 Oops, we don't want to save passwords for this thing. 71 00:04:37,890 --> 00:04:39,800 And type in user. 72 00:04:40,800 --> 00:04:42,260 Oh, something's gone wrong. 73 00:04:42,260 --> 00:04:46,410 Let's just do inspect element, and go to console. 74 00:04:46,410 --> 00:04:50,430 Rejects is not is not defined. 75 00:04:50,430 --> 00:04:55,636 That's because it's rejectsp, not rej X, 76 00:04:55,636 --> 00:05:01,320 so that's a common mistake I guess. 77 00:05:01,320 --> 00:05:03,560 Let's refresh again and type in user so. 78 00:05:04,560 --> 00:05:07,530 When it gets to user the things passes so let's 79 00:05:07,530 --> 00:05:14,940 try my user and it still passes, but if we try. 80 00:05:14,940 --> 00:05:21,370 My user A, that's still passes as well, so anything with the user in it should pass. 81 00:05:21,370 --> 00:05:26,380 So, let's see, if we wanted to have user just at 82 00:05:26,380 --> 00:05:31,520 the end of this expression, that's why we can use this dollar. 83 00:05:31,520 --> 00:05:34,160 There's a few special symbols that you can use 84 00:05:34,160 --> 00:05:37,430 in regular expressions and dollar symbol is one of them. 85 00:05:37,430 --> 00:05:39,490 So let's check that out now. 86 00:05:40,910 --> 00:05:43,610 And we'll refresh the page. 87 00:05:43,610 --> 00:05:47,480 And we'll keep this console here because it's handy if we type any errors. 88 00:05:47,480 --> 00:05:49,660 And let's type Andrew user. 89 00:05:49,660 --> 00:05:50,790 And it's valid. 90 00:05:50,790 --> 00:05:52,620 But let's try user. 91 00:05:52,620 --> 00:05:53,980 Because it's still at the end. 92 00:05:54,980 --> 00:05:56,210 It's still valid. 93 00:05:56,210 --> 00:05:58,720 Let's try user Andrew. 94 00:05:58,720 --> 00:06:02,490 And as you can see, anything that has, has 95 00:06:02,490 --> 00:06:05,040 other characters of than user at the end is invalid. 96 00:06:05,040 --> 00:06:08,185 So we've learned about an expression at the 97 00:06:08,185 --> 00:06:11,720 end, how about an expression at the beginning? 98 00:06:13,720 --> 00:06:17,590 And that's using this caret symbol, above the six 99 00:06:17,590 --> 00:06:21,670 on the keyboard and so this matches expressions that start. 100 00:06:22,840 --> 00:06:24,610 And ends with user. 101 00:06:25,820 --> 00:06:32,090 When I say and ends with user it's basically this string here. 102 00:06:32,090 --> 00:06:36,740 It's not a or statement, so it doesn't start with. 103 00:06:36,740 --> 00:06:39,210 username, or ends with username. 104 00:06:39,210 --> 00:06:42,200 It's the specific user. 105 00:06:42,200 --> 00:06:46,412 And, and I'm saying username, but the it's the username of 106 00:06:46,412 --> 00:06:50,790 user, let's just make that clear by showing you the example. 107 00:06:54,620 --> 00:06:55,850 So let's Refresh. 108 00:06:55,850 --> 00:06:59,315 And then let's try Andrewuser. 109 00:07:01,120 --> 00:07:03,280 And as you can see it fails. 110 00:07:03,280 --> 00:07:05,810 If we do user by itself, it pa, passes. 111 00:07:05,810 --> 00:07:07,645 But if we do Andrew, it fails. 112 00:07:07,645 --> 00:07:13,090 [LAUGH] So in order to just do it, say a user at the beginning. 113 00:07:13,090 --> 00:07:17,840 Of a string you would just do the carrot here so, you just do 114 00:07:19,460 --> 00:07:24,450 user Andrew or whatever your a name is. 115 00:07:24,450 --> 00:07:25,320 And it matches. 116 00:07:28,120 --> 00:07:31,070 So as you can see, we can be very specific in our 117 00:07:31,070 --> 00:07:35,310 strings, but you can also have a little bit of flexibility to. 118 00:07:35,310 --> 00:07:39,270 So, like for example you can do user. 119 00:07:39,270 --> 00:07:40,020 Or name. 120 00:07:41,960 --> 00:07:45,500 This is just like in many programming languages, 121 00:07:45,500 --> 00:07:50,190 except, you know, you do double pipes for all. 122 00:07:50,190 --> 00:07:54,730 This is just a single pipe just to say or user name or name. 123 00:07:54,730 --> 00:08:00,400 And it has to start or end with this particular thing, and these brackets here 124 00:08:00,400 --> 00:08:06,380 are just defining that this is a fixed part of the expression. 125 00:08:07,630 --> 00:08:15,738 So lets jump back to our browser, refresh and type Andrew, it's invalid, name. 126 00:08:15,738 --> 00:08:20,130 Is valid, user is invalid. 127 00:08:20,130 --> 00:08:22,430 So you can start to see the power of a 128 00:08:22,430 --> 00:08:26,450 regular expression, being expressed like this rather than an if statement. 129 00:08:26,450 --> 00:08:35,170 Say, if username is equal to user or. 130 00:08:35,170 --> 00:08:37,960 User name is equal to name. 131 00:08:37,960 --> 00:08:46,410 You know, regular expressions are a great way to encapsulate a lot of valid terms. 132 00:08:46,410 --> 00:08:49,640 So, let's take another look at null statement. 133 00:08:49,640 --> 00:08:55,170 Say, if you were, type in the color gray in Britain or America, 134 00:08:55,170 --> 00:09:00,680 you may spell it slightly differently and it is still is a valid color. 135 00:09:00,680 --> 00:09:03,500 So, let's use this as an example. 136 00:09:03,500 --> 00:09:06,700 So it has to start with 'gr' and it needs to be 137 00:09:06,700 --> 00:09:11,260 followed with an a or an e and then ends with a y. 138 00:09:11,260 --> 00:09:14,040 So that's with what that ends with is there. 139 00:09:14,040 --> 00:09:17,500 And that starts with and that's the optional. 140 00:09:17,500 --> 00:09:18,590 Letters in the middle. 141 00:09:18,590 --> 00:09:23,630 And it has to be either one or the other, it can't be any character you want. 142 00:09:23,630 --> 00:09:31,655 So, let's try that out, refresh the page and do, gray, gray. 143 00:09:31,655 --> 00:09:35,210 And if you do a capital letter it doesn't do anything. 144 00:09:36,954 --> 00:09:41,980 That you expect it to, but you could use something called a modifier. 145 00:09:41,980 --> 00:09:45,240 Now there's a shortcut what you can do instead of saying 146 00:09:45,240 --> 00:09:49,880 this rejsp like this you can just define it like that. 147 00:09:49,880 --> 00:09:51,160 Then after the pattern. 148 00:09:52,610 --> 00:09:57,770 You can add the modifier where I stands for in case sensitivity, 149 00:09:57,770 --> 00:10:03,390 so you don't need to worry about the K sensitiveness of this expression. 150 00:10:03,390 --> 00:10:10,320 So let's try that now and we can do G-R-A-Y and it's valid. 151 00:10:10,320 --> 00:10:13,845 So we can capital A we can do a lower case a, we can do a capital R. 152 00:10:13,845 --> 00:10:16,750 Capital Y, and there's a few of the permutations 153 00:10:16,750 --> 00:10:19,530 that I'm not going to go through, but that's also 154 00:10:19,530 --> 00:10:21,610 the power of irregular expression, you can add these 155 00:10:21,610 --> 00:10:29,160 modifiers to modify the case sensitivity of the regular expressions. 156 00:10:29,160 --> 00:10:34,770 Since this is going to be a lower case requirement in this password field. 157 00:10:34,770 --> 00:10:38,660 This is what's contained only letters a to Z in lower case. 158 00:10:38,660 --> 00:10:42,020 I'm just not going to put that case in sensitivity in there. 159 00:10:43,240 --> 00:10:45,900 So now this fairly static still. 160 00:10:45,900 --> 00:10:48,610 We need to push it a little bit further. 161 00:10:48,610 --> 00:10:51,200 And that's by using something. 162 00:10:52,270 --> 00:10:55,288 Called it, a group of letters. 163 00:10:55,288 --> 00:11:02,610 [LAUGH] Yeah, where you can just do A to Z, and it will set any characters 164 00:11:02,610 --> 00:11:07,890 within A to Z, and that's because it's within this little grouping thing here. 165 00:11:07,890 --> 00:11:11,380 It allows you to do a full range of letters. 166 00:11:11,380 --> 00:11:20,520 So let's try it now and refresh, A works great, X works, F works, G works. 167 00:11:20,520 --> 00:11:25,890 So, all the letters, in theory, are working and saying it's valid. 168 00:11:25,890 --> 00:11:29,850 But what happens if I do two letters like AN for Andrew? 169 00:11:29,850 --> 00:11:32,040 Must only contain letters A to Z, so. 170 00:11:32,040 --> 00:11:34,360 Something's not working here. 171 00:11:34,360 --> 00:11:39,550 And that's because A to Z is just for one letter. 172 00:11:39,550 --> 00:11:42,590 So I could technically do one, two, three, four, fiive, six, 173 00:11:42,590 --> 00:11:45,830 seven, eight, nine, ten, you know, all the way up to that. 174 00:11:45,830 --> 00:11:51,760 And this should be valid, until I get up to the right number. 175 00:11:51,760 --> 00:11:53,210 Of, things. 176 00:11:53,210 --> 00:11:55,520 But that's still restrictive for me. 177 00:11:56,680 --> 00:12:04,390 I could, say if the, the username has to be between has to be like six characters. 178 00:12:04,390 --> 00:12:09,920 We can use another little, trick and that's these squiggly brackets. 179 00:12:09,920 --> 00:12:12,420 And we can say like number six in here. 180 00:12:12,420 --> 00:12:17,110 So only six characters, so Andrew is six characters. 181 00:12:18,190 --> 00:12:21,760 Let's try Robert, that's six characters. 182 00:12:21,760 --> 00:12:26,530 But then, as soon as you get more than six or less than six it's invalid. 183 00:12:26,530 --> 00:12:32,590 So we need another type of modifier, we, we could do 184 00:12:32,590 --> 00:12:38,640 between six and eight [LAUGH] as well, And, let me show you that in action. 185 00:12:38,640 --> 00:12:44,273 So, Andrew S-S, Andrew B-B, Andrew A-J-K, 186 00:12:44,273 --> 00:12:49,513 isn't, A-K is, so, so we, we, we starting 187 00:12:49,513 --> 00:12:55,180 to see we can do a little bit more flexibility. 188 00:12:55,180 --> 00:12:58,030 So, this is only designed to be a very. 189 00:12:58,030 --> 00:13:02,440 A quick tour of what regular expressions could do. 190 00:13:02,440 --> 00:13:04,980 But, as you can see, it's started to become a little bit 191 00:13:04,980 --> 00:13:10,840 more in depth, even just with these things, we can validate certain things. 192 00:13:10,840 --> 00:13:14,570 But, what if we want to do one or more characters? 193 00:13:14,570 --> 00:13:17,920 And that is by using the plus symbol, so. 194 00:13:19,500 --> 00:13:23,730 Don't expect to necessarily memorize these things, but, there are 195 00:13:23,730 --> 00:13:28,730 these special symbols that allows you to define an expression. 196 00:13:28,730 --> 00:13:31,905 So now let's go back to Chrome. 197 00:13:31,905 --> 00:13:35,870 [SOUND] And refresh. 198 00:13:35,870 --> 00:13:38,040 And do Andrew. 199 00:13:38,040 --> 00:13:40,830 Yeah, so any length of characters. 200 00:13:40,830 --> 00:13:41,950 Let's do upper case. 201 00:13:41,950 --> 00:13:43,910 Obviously it's not valid. 202 00:13:43,910 --> 00:13:46,830 A plus symbol, a and, a 203 00:13:49,160 --> 00:13:52,750 apostrophe, a exclamation mark, an at symbol. 204 00:13:52,750 --> 00:13:57,000 As you can see they're all causing invalid usernames. 205 00:13:57,000 --> 00:14:00,240 So, that is how to do letters A to Z. 206 00:14:00,240 --> 00:14:04,530 If you wanted to do uppercase you could do A to Z as well. 207 00:14:04,530 --> 00:14:09,720 So, we can do A-N-D-R-E-W and that is valid, 208 00:14:09,720 --> 00:14:12,490 but as I've added a space it's not valid. 209 00:14:12,490 --> 00:14:14,030 And, we could do. 210 00:14:14,030 --> 00:14:15,870 Zero to nine as well. 211 00:14:15,870 --> 00:14:17,470 And, let's try that. 212 00:14:17,470 --> 00:14:21,390 And Andrew nine, a exclamation mark? 213 00:14:21,390 --> 00:14:22,990 Nope, with a capital A at the end? 214 00:14:22,990 --> 00:14:24,550 Yep that's fine. 215 00:14:24,550 --> 00:14:27,350 Because we've added these to the range and we 216 00:14:27,350 --> 00:14:33,080 need at least one character within this range of characters. 217 00:14:33,080 --> 00:14:33,820 So. 218 00:14:33,820 --> 00:14:35,530 It's really powerful stuff. 219 00:14:35,530 --> 00:14:36,780 Cool. 220 00:14:36,780 --> 00:14:39,120 So based on all those examples that I showed you now, 221 00:14:39,120 --> 00:14:43,300 let's try and move over, and do a valid telephone number. 222 00:14:43,300 --> 00:14:47,730 So, if we look here, we've got three numbers, a dash. 223 00:14:49,020 --> 00:14:51,090 Three more numbers, a dash. 224 00:14:51,090 --> 00:14:52,770 And four numbers. 225 00:14:52,770 --> 00:14:56,260 So let's just copy this across here just for reference. 226 00:14:56,260 --> 00:14:58,730 And let's create an expression. 227 00:14:58,730 --> 00:15:03,270 So, var expression is equal to, 228 00:15:04,720 --> 00:15:10,390 let's say a number, from I don't know exactly in the US if you can start 229 00:15:10,390 --> 00:15:13,640 a number with a zero, like zero five five, I don't 230 00:15:13,640 --> 00:15:17,860 think you can so I'm just going to do one to nine. 231 00:15:17,860 --> 00:15:21,200 So you don't have to use the full range of characters here. 232 00:15:21,200 --> 00:15:24,950 You can go from one to nine, rather than from zero to nine. 233 00:15:24,950 --> 00:15:26,680 So we can start with one dash nine. 234 00:15:26,680 --> 00:15:32,390 And then we can go from naught to nine for the next two characters. 235 00:15:32,390 --> 00:15:38,000 So remember, you can do the squiggly brackets then, two and then a dash. 236 00:15:38,000 --> 00:15:42,470 But as you notice, we're using dashes up here as special characters. 237 00:15:42,470 --> 00:15:45,000 Now, generally in programming you may see 238 00:15:45,000 --> 00:15:48,800 things like, a backslash to escape characters. 239 00:15:48,800 --> 00:15:51,330 And that's what exactly you can do here. 240 00:15:51,330 --> 00:15:54,660 To escape this, to make this the, just the dash 241 00:15:54,660 --> 00:15:58,140 itself in terms of the expression, you just add a. 242 00:15:59,380 --> 00:16:02,670 Forward slash like that, backslash sorry. 243 00:16:02,670 --> 00:16:08,150 And then we can do one one zero to nine and 244 00:16:08,150 --> 00:16:12,676 then for three characters, so for three, like that. 245 00:16:14,810 --> 00:16:16,950 Add another back slash and dash, 246 00:16:19,120 --> 00:16:22,448 and then we want to do four characters, so let's do that. 247 00:16:22,448 --> 00:16:24,700 It's zero to nine. 248 00:16:24,700 --> 00:16:25,890 There we go. 249 00:16:25,890 --> 00:16:26,710 Cool. 250 00:16:26,710 --> 00:16:28,870 So, let's try this out. 251 00:16:28,870 --> 00:16:32,340 Let's start it and end with this. 252 00:16:33,700 --> 00:16:36,570 And we probably just want to group it all together anyway, so 253 00:16:36,570 --> 00:16:41,580 that it doesn't think a it it just needs that to start 254 00:16:41,580 --> 00:16:44,560 with and that to end with, but the whole expression is the 255 00:16:44,560 --> 00:16:50,630 start and end so let's try that out when we do expression.test. 256 00:16:50,630 --> 00:16:55,358 Dollar telephone.val. 257 00:16:55,358 --> 00:16:59,180 Yeah, so that's the jQuery method for the value of the, of the thing. 258 00:16:59,180 --> 00:17:01,900 If you're unfamiliar with jQuery, check out my course. 259 00:17:01,900 --> 00:17:05,500 And [SOUND] let's try it out here. 260 00:17:05,500 --> 00:17:08,660 So the user name's valid. 261 00:17:08,660 --> 00:17:11,102 The telephone number, which I'm not gonna tell you. 262 00:17:11,102 --> 00:17:16,480 [LAUGH] Is valid as well. 263 00:17:16,480 --> 00:17:17,820 So let's just add another character. 264 00:17:17,820 --> 00:17:18,370 No it doesn't work. 265 00:17:18,370 --> 00:17:20,320 This space at the beginning doesn't work. 266 00:17:20,320 --> 00:17:22,020 Space at the end doesn't work either. 267 00:17:22,020 --> 00:17:23,250 Cool. 268 00:17:23,250 --> 00:17:26,160 So let's try, a password now. 269 00:17:26,160 --> 00:17:32,930 So a password must contain a lowercase, uppercase letter and a number. 270 00:17:32,930 --> 00:17:39,190 So we can actually join a number of these together. 271 00:17:39,190 --> 00:17:45,949 So we can say var-expression let's call this lower case. 272 00:17:48,910 --> 00:17:50,340 Expression. 273 00:17:50,340 --> 00:17:55,620 And remember we want it to do a lowercase, 274 00:17:55,620 --> 00:17:59,650 that's this from up here like we did before. 275 00:17:59,650 --> 00:18:04,320 But instead, we don't want it to just be at the end At the beginning. 276 00:18:04,320 --> 00:18:08,160 We wanted to be anywhere in the string itself, and 277 00:18:08,160 --> 00:18:12,130 we can do that by using G, which means global. 278 00:18:12,130 --> 00:18:15,680 That means within the whole of the string, so remember we can 279 00:18:15,680 --> 00:18:22,190 do Global and insensitive, case insensitive, or you can make it like that. 280 00:18:22,190 --> 00:18:27,420 Or you can just do a single modifier like this, and do global. 281 00:18:27,420 --> 00:18:32,400 So let's do another one, using an expression. 282 00:18:33,980 --> 00:18:39,670 Sorry U for upper case for the news in there and let's do a 283 00:18:39,670 --> 00:18:45,280 to Z, so where we're going to test this multiple times and 284 00:18:45,280 --> 00:18:50,670 we're gonna check for a number as well and that's from naught to nine. 285 00:18:50,670 --> 00:18:57,370 Cool and that means that it'll search anywhere in the string for. 286 00:18:57,370 --> 00:19:02,740 A lowercase letter, an uppercase letter, and a number. 287 00:19:02,740 --> 00:19:08,790 So, let's do L expression.test, and we can 288 00:19:08,790 --> 00:19:14,800 type in password .val, and then we 289 00:19:14,800 --> 00:19:20,880 can just join these expressions together because these re, return true or false. 290 00:19:20,880 --> 00:19:27,120 And we can just, do ampersand, ampersand between them. 291 00:19:27,120 --> 00:19:28,790 And we can set N for number. 292 00:19:29,790 --> 00:19:31,750 And we can do that for uppercase. 293 00:19:31,750 --> 00:19:36,370 So we're doing an expression test three times. 294 00:19:36,370 --> 00:19:39,039 Now, lets try over here and refresh. 295 00:19:42,340 --> 00:19:43,430 No. 296 00:19:43,430 --> 00:19:45,880 I was going to password, there we go.It just kicked in. 297 00:19:45,880 --> 00:19:47,470 And let's get to the password. 298 00:19:47,470 --> 00:19:49,644 And let's type a-b-1. 299 00:19:49,644 --> 00:19:53,660 And it, it passes, so let's try a- b-b, no. 300 00:19:53,660 --> 00:19:55,800 Let's just try b-b-1. 301 00:19:55,800 --> 00:19:56,220 No. 302 00:19:56,220 --> 00:19:56,673 Doesn't work. 303 00:19:56,673 --> 00:20:01,220 A-a-1, a-a-b it does work. 304 00:20:01,220 --> 00:20:05,800 So, it checks anywhere in this string so I could do the 305 00:20:05,800 --> 00:20:10,310 B first a uppercase the Y lowercase and then the eight or I 306 00:20:10,310 --> 00:20:14,560 could just move that anywhere around in the string as many times as 307 00:20:14,560 --> 00:20:19,020 I wanted and it will match those expressions but you may be asking. 308 00:20:20,390 --> 00:20:20,870 Wow, Andrew. 309 00:20:20,870 --> 00:20:23,300 You're doing alot of regular expressions there. 310 00:20:23,300 --> 00:20:27,740 Isn't there a regular expression to define this in one go. 311 00:20:27,740 --> 00:20:34,210 And the answer is yes but this is where things get really complex and scary. 312 00:20:34,210 --> 00:20:35,690 So, I don't necessarily. 313 00:20:35,690 --> 00:20:40,660 Want you to feel too daunted by this, but this is totally normal I had to look this 314 00:20:40,660 --> 00:20:43,000 up because I've, you know, that's what I do 315 00:20:43,000 --> 00:20:47,030 when I do regular expressions I look up references. 316 00:20:47,030 --> 00:20:54,792 And the reference that I use is regularexpressions.info 317 00:20:54,792 --> 00:20:58,630 and on here is probably from. 318 00:20:58,630 --> 00:21:02,680 Early in the 90s it looks like the, the, when this paper was created. 319 00:21:02,680 --> 00:21:04,080 Oh, early 2000s. 320 00:21:05,290 --> 00:21:08,060 And it, it hasn't changed much over the years. 321 00:21:08,060 --> 00:21:09,790 Even if you're watching this in, several years 322 00:21:09,790 --> 00:21:12,340 in the future this probably still looks the same. 323 00:21:12,340 --> 00:21:15,700 So you can look at quick start, expressions here. 324 00:21:15,700 --> 00:21:18,650 And you can look at the reference material. 325 00:21:18,650 --> 00:21:24,410 And it can take you through a tutorial of how to use different particular things 326 00:21:24,410 --> 00:21:31,790 like special characters, and balancing groups, all these wonderful things. 327 00:21:31,790 --> 00:21:37,800 And you can actually see examples over here like to do date 328 00:21:37,800 --> 00:21:44,100 ranges, email addresses, valid dates, and card numbers. 329 00:21:44,100 --> 00:21:46,570 And it seems like a lot of these have already been 330 00:21:46,570 --> 00:21:50,320 done before, so you're not having to create these regular expressions. 331 00:21:50,320 --> 00:21:51,720 So you can go to say. 332 00:21:53,988 --> 00:21:59,664 The royal mail I believe used to do, the, post 333 00:21:59,664 --> 00:22:05,450 code, regular expression, I used in a project before, 334 00:22:07,770 --> 00:22:12,450 and, yeah it looks like, the, it's 335 00:22:12,450 --> 00:22:18,000 been, Deprecated now and you can pick it up on an archive of the page. 336 00:22:18,000 --> 00:22:20,620 But, look this is, this is the kind of regular expression 337 00:22:20,620 --> 00:22:25,670 that you wouldn't necessarily know off the top of your head. 338 00:22:25,670 --> 00:22:28,310 You could make a basic one, but this is a more 339 00:22:28,310 --> 00:22:34,270 comprehensive regular expression for all the post codes in the UK. 340 00:22:34,270 --> 00:22:38,080 So, you don't necessarily have to memorize all these different ways but. 341 00:22:39,460 --> 00:22:44,630 That, this website here is a great resource for going through some tutorials, 342 00:22:44,630 --> 00:22:50,540 some, my, operational option, optional items sorry. 343 00:22:50,540 --> 00:22:59,220 I say if you wanted to validate February and all should I say Feb, Feb by itself. 344 00:22:59,220 --> 00:23:03,560 You could group ruary in a bracket and have a question mark. 345 00:23:03,560 --> 00:23:05,920 And on this website here I, I was able to find a 346 00:23:05,920 --> 00:23:13,650 reference on how to create this, to be a singular regular expression. 347 00:23:13,650 --> 00:23:16,550 And that's by using something. 348 00:23:16,550 --> 00:23:20,750 Called the forward I think it's called forward positive matcher. 349 00:23:20,750 --> 00:23:27,090 So this looks forward in the whole of the string to see if it contains this. 350 00:23:28,410 --> 00:23:34,760 But you can also to make it valid you need to do this .star. 351 00:23:34,760 --> 00:23:37,905 Now if you've ever used a file system and done 352 00:23:37,905 --> 00:23:42,490 start.start which means everything that's kind of what this is. 353 00:23:42,490 --> 00:23:44,360 The dot means any character. 354 00:23:44,360 --> 00:23:47,250 And then star for any number of length. 355 00:23:47,250 --> 00:23:50,885 So, it looks forward in the string for any character, 356 00:23:50,885 --> 00:23:54,650 which, which may be an empty character may be empty, 357 00:23:54,650 --> 00:23:57,330 so this could be the beginning or any part of 358 00:23:57,330 --> 00:24:01,230 the string that has a lower case, A to Z. 359 00:24:01,230 --> 00:24:08,870 And you can combine all of these expressions together to contains. 360 00:24:08,870 --> 00:24:12,190 Like an uppercase, anywhere in the string. 361 00:24:13,680 --> 00:24:14,550 And a 362 00:24:18,250 --> 00:24:21,830 naught to nine anywhere in the string. 363 00:24:21,830 --> 00:24:25,110 So, I've made that into one expression which 364 00:24:25,110 --> 00:24:30,360 may be, quicker computationally than doing three separate things. 365 00:24:32,160 --> 00:24:34,710 Or it may not be, I haven't really tested it. 366 00:24:34,710 --> 00:24:39,760 But, for conciseness this is obviously the expression you want to use. 367 00:24:39,760 --> 00:24:41,780 But, in terms of. 368 00:24:42,800 --> 00:24:48,470 readability, it may not be that readable to a regular expression novice. 369 00:24:48,470 --> 00:24:51,750 Now, let's just try this out to make sure it still works. 370 00:24:54,582 --> 00:25:02,250 A-b-87 yeah let's put a question mark in, in the one yeah and things like that. 371 00:25:02,250 --> 00:25:06,500 Now there's a lot more to regular expressions than this. 372 00:25:06,500 --> 00:25:12,560 I encourage you to like try and maybe modify this code here, so that the 373 00:25:12,560 --> 00:25:17,930 password requires some characters which are not A's to Z's, 374 00:25:20,300 --> 00:25:20,795 or, 9's. 375 00:25:20,795 --> 00:25:23,100 [LAUGH] Numbers, not to nine. 376 00:25:23,100 --> 00:25:27,680 And you can find out a list of special regular expression. 377 00:25:27,680 --> 00:25:30,660 Characters over on this page somewhere. 378 00:25:33,250 --> 00:25:34,940 Let's have a look Reference. 379 00:25:36,015 --> 00:25:38,510 Yes, so in here you can see these special groups. 380 00:25:38,510 --> 00:25:42,170 This is where I found this positive lookahead. 381 00:25:42,170 --> 00:25:46,420 So, it looks ahead of the string to make sure it's got the word rejected. 382 00:25:46,420 --> 00:25:48,210 And you can see what languages there. 383 00:25:50,050 --> 00:25:51,240 Available in say PHP. 384 00:25:51,240 --> 00:25:54,330 Yeah, that's available in JavaScript. 385 00:25:54,330 --> 00:26:00,470 Let's have look, you know, that one particular is but some of these aren't so. 386 00:26:00,470 --> 00:26:03,450 Generally regular expressions are possible between languages, and 387 00:26:03,450 --> 00:26:06,140 you can come to this site as a reference. 388 00:26:06,140 --> 00:26:09,040 So probably the most valuable page you could 389 00:26:09,040 --> 00:26:11,650 use on this site is this quick reference here. 390 00:26:11,650 --> 00:26:15,120 So you can take a look and say oh what's this 391 00:26:15,120 --> 00:26:17,760 Question mark greedy out quantifier, let's take a look at that. 392 00:26:17,760 --> 00:26:20,570 And so that's like a, an optional thing. 393 00:26:22,270 --> 00:26:25,350 Can take a look at the star means a greedy quantifier. 394 00:26:26,600 --> 00:26:27,680 Well. 395 00:26:27,680 --> 00:26:29,080 They're all greedy quantifiers. 396 00:26:30,300 --> 00:26:33,430 You see regular expressions [LAUGH] you don't 397 00:26:33,430 --> 00:26:35,500 necessarily need to understand everything about them. 398 00:26:35,500 --> 00:26:39,990 But as long as it matches what you want it to, to match. 399 00:26:39,990 --> 00:26:47,510 And here's some interesting examples here, where you can set D for digits. 400 00:26:47,510 --> 00:26:52,354 So no to nine is similar to /d, so 401 00:26:52,354 --> 00:26:57,590 you can do /d instead of no to nine. 402 00:26:57,590 --> 00:27:01,780 I believe /w is for all. 403 00:27:03,030 --> 00:27:04,370 Letter characters. 404 00:27:04,370 --> 00:27:05,970 Word characters in shorthand. 405 00:27:07,810 --> 00:27:09,280 So you can use /w. 406 00:27:09,280 --> 00:27:14,180 Let, let me show you one more quick example of 407 00:27:14,180 --> 00:27:16,020 how you'd maybe want to use it as a pauser. 408 00:27:16,020 --> 00:27:18,980 So let's do that. 409 00:27:18,980 --> 00:27:22,480 Andrew is equal to Andrew Chokely. 410 00:27:22,480 --> 00:27:26,730 Well, let's call it name, which makes more sense. 411 00:27:26,730 --> 00:27:28,800 And, let's do an expression. 412 00:27:28,800 --> 00:27:35,070 So, var x, I'm just doing it shorthand, and do all word characters. 413 00:27:35,070 --> 00:27:40,180 So, we can do that for any number of characters. 414 00:27:40,180 --> 00:27:41,830 And we'll do that globally as well. 415 00:27:41,830 --> 00:27:44,660 So we're doing that within the whole string. 416 00:27:44,660 --> 00:27:45,760 So. 417 00:27:45,760 --> 00:27:48,960 The, the space isn't a match. 418 00:27:48,960 --> 00:27:56,100 But, but Andrew is and Chockley, so what we can do is do exp.test, sorry, 419 00:27:56,100 --> 00:28:01,390 test if it wants to make sure that it, it, it matches that. 420 00:28:01,390 --> 00:28:05,860 But, there's multiple matches in here, and what we can do is, do exec. 421 00:28:07,390 --> 00:28:12,565 And we can do name and it pops out Chokeley, and if 422 00:28:12,565 --> 00:28:17,470 you do [LAUGH] I don't know why it didn't the first time. 423 00:28:17,470 --> 00:28:18,980 It's because I did the test. 424 00:28:18,980 --> 00:28:23,280 So every time you call something on the expression, it tests 425 00:28:23,280 --> 00:28:28,310 for something and it returns the, the first matched thing sir. 426 00:28:28,310 --> 00:28:31,050 When I did the first time, it did Andrew and 427 00:28:31,050 --> 00:28:33,550 then the second time when I did exactly, it did. 428 00:28:33,550 --> 00:28:38,490 Chalkley and then when he did it again it goes null so what you can do is cycle 429 00:28:38,490 --> 00:28:43,940 over so the, the, expression again and again and again, so we 430 00:28:43,940 --> 00:28:48,230 found Andrew is a match and then Chalkley is a match and then if you 431 00:28:48,230 --> 00:28:52,749 call it again you get a null so you can do a while loop, so while. 432 00:28:54,070 --> 00:28:57,490 Something doesn't equal a null, then perform 433 00:28:57,490 --> 00:29:00,540 some sort of like transformation on the text. 434 00:29:00,540 --> 00:29:02,790 You could maybe lower to case it. 435 00:29:02,790 --> 00:29:05,090 Or you could create some sort of like DOM tree 436 00:29:05,090 --> 00:29:11,440 or [INAUDIBLE] if you're creating your own browser based language. 437 00:29:11,440 --> 00:29:13,830 And you can like skim over through 438 00:29:13,830 --> 00:29:16,600 using regular expressions which can be quite daunting. 439 00:29:16,600 --> 00:29:19,640 But kind of fun if you're into this kind of things. 440 00:29:19,640 --> 00:29:22,450 Well, I hope you enjoyed this, so far and I'll, at 441 00:29:22,450 --> 00:29:26,630 least you've got a brief overview of what regular expressions are. 442 00:29:26,630 --> 00:29:29,740 What they can be used to test, and what you can use to 443 00:29:29,740 --> 00:29:34,930 actually create your own [INAUDIBLE] you can pull matching strings out of strings. 444 00:29:34,930 --> 00:29:39,650 Using these expressions cool, I hope you found this tutorial helpful and if you've 445 00:29:39,650 --> 00:29:42,740 got any questions or the suggestions please 446 00:29:42,740 --> 00:29:44,290 feel free to post them in the forum.