Okay then.
So when we create forms and we expect a user to type data into those forms, we normally want the user
to enter values that match a certain pattern.
For example, we'd want a username on a signup form to be between six and, I don't know, ten characters
long, but it could only contain numbers and letters and it can't contain any kind of special characters
or spaces.
But what's to say that a user won't type in a username that does have special characters and spaces?
Well, nothing really.
We have to implement our own checks to make sure that the value that a user types in matches the pattern
that we want.
Now to do this, we're going to be using matching patterns called regular expressions or regex for short.
And we use these regular expressions in many different programming languages to do these kinds of checks
like Python and PHP.
They're not unique to JavaScript.
Now what they allow us to do is type out character patterns to represent certain values.
For example, we could create a regular expression pattern to match some kind of string that a user
types into a form field.
Now we could say that that pattern must contain between 6 and 8 characters and they must all be lowercase
letters from A to Z.
Or we could write out a pattern to match a string of any length, but it must contain only numbers from
0 to 9.
So we start off by deciding what kind of pattern we want to match, for example, how long it should
be, what type of characters it should contain, etcetera.
Then we write a regular expression to match that pattern, and we can use the regular expression to
make sure that what a user has typed into the form field matches what we have specified.
Now that might seem a little bit like gobbledygook at the minute, but I promise you this will seem
easier as we go through some examples Now then to explain regular expressions in a lot of depth is going
to take a long, long, long time.
So I'm going to explain the basics now and show you how to perform some simple validation.
But if you want to learn more about it, then I do have a full free series on my YouTube channel with
about 20 videos, all about regular expressions in JavaScript.
So definitely check out those If you want more practice.
The link is going to be attached to this lecture anyway.
On with the basics of how to create them.
So to explain the concepts of creating these regex patterns, I'm going to be using this free, really
cool online tool called RegEx 101.
I'm going to leave the link attached to this lecture as well.
So make sure first of all, you have Atma script or JavaScript selected over here and you're going to
notice two fields, one for our regular expression where we type the pattern that we want to match and
then the test string field down here.
Imagine this is the input field that a user types into.
So we're going to write some kind of regular expression here and we're going to type something in here
and see if it matches or passes this regular expression.
So notice, first of all, regular expressions start with a forward slash.
You can see that over here.
That's automatically inside the input field for us.
And they end with a forward slash.
These two letters are known as flags, which we might touch on later on.
So say we want to write a regular expression that is going to match an exact word.
For example, Ninja.
We want to look inside a load of text somewhere and if the word ninja pops up, then we want to match
it.
And notice it highlights this now because we have a match and it says one match up here.
Okay, so ninja, that word matches this regular expression.
Now what if we only wanted to match it?
If it was a word in itself and it wasn't surrounded by other stuff, either spaces or other letters
like that, then what we'd have to do is use a combination of the dollar sign at the end and the character
sign at the start.
And what this says is only Match Ninja if it's at the end of the whole input field and at the start
of the whole input field.
So this will only match now if there's nothing before it and nothing after it.
So if we delete those things, then we're going to notice a match.
So this is typically how we'd match things in an input field.
We start it with a carrot and end it with a dollar to say it must start at the start of the input field
and end at the end of the input field.
Then we write some kind of pattern between those so that that's how we match a single word.
But what if we're a bit more flexible?
What if we want to match, for example, any letter from A to Z?
Well, we'd use a character set for that and we create a character set using these square brackets.
Then inside the character set, we say what we want to match.
Well, I want to match anything between A and Z.
So what this is going to do is only match a single letter between A and Z, so I can write H and it's
going to match it.
If I write h p, we don't get a match because.
Like I said, this is just a single character.
So if I wanted to match between, say, for example, C and P, instead we can write G, K.
They are all in between C and P, But if we write Z, which is not between C and P, we don't get a
match.
So their character sets with ranges of letters.
Now let's go back to A to Z.
What if we wanted to capture capital letters as well?
So if I currently do an A, it matches, but if I do a capital A, it doesn't match.
So what I could do is next to A to Z, also do capital A to Z as well.
And now this will match any of them still one character.
So I can write uppercase G or uppercase H a, but if I do two of them, then it doesn't match.
So we're matching letters here between A to Z, but only one character.
What if we want to match a word that's maybe between 6 and 10 characters long?
The way we do this is after the character set place a set of curly braces, and then we pass in two
values six and ten, for example, and that says we want this range of characters to be typed out between
6 and 10 letters long.
So essentially a word between 6 and 10 letters long.
So I could type in, for example, hello, and then that's five letters, one more O on the end it becomes
six, and then we get a match all the way up until ten characters after which we don't get a match.
Does that make sense?
So that's how we specify the length of a word that we want to match.
So this right here is saying, okay, we're matching a word where we can contain any lowercase letter
and any uppercase letter between 6 and 10 characters long.
But what if we want to match other things, for example, numbers?
Well, I can also add in 0 to 9, and now this is going to match any letter, uppercase or lower and
numbers.
So I could say something like Ninja one, two, three, and that is a match.
But if I do something like a special character, that's not a match.
So there's one last thing I want to show you, and that is the dot or the period now that has a special
meaning in regular expression.
So if I take away this character set and then instead place a dot before the length over here, then
that basically means any character.
So we can do, Hello, one, two, three.
That's going to pass because a dot is any character and we're writing any characters.
I can also do special characters or anything like this, and a dot will match it.
As long as it's now between 6 and 10 characters, it's absolutely fine.
Okay, so that's the basics of regular expressions.
It's going to be enough for us at the minute.
Again, if you do want to learn more, then make sure you check out my YouTube channel where I go into
much more detail about regular expressions.
I show you how to match things like email addresses, usernames, passwords and all that jazz.
But now we have the basics.
I want to put this to good use in the next video.
