Okay then.
So we've seen how to make some basic regular expression patterns and test them against a string of characters
in that online tool I showed you.
But how do we use regex in a regular JavaScript file?
Well, I'm going to show you how to do that in this video.
First of all, we have a username right here, Sean, and what I want to do is create a regular expression
to make sure that this username is at least six characters long, which it isn't.
And also check that it's only lowercase letters.
So we're going to create a regular expression and store it in a constant I'm going to call it a pattern
and I'm going to set it equal to, first of all, two forward slashes.
Now, remember, when we create a regular expression, it goes inside two forward slashes.
It's sandwiched between those two, much like a string is in quotes, A regular expression is contained
in two forward slashes.
So we write our pattern in between this.
So the first thing we want to check for is lowercase letters only.
So we'll do a character set to say A to Z lowercase letters.
Then we want it to be at least six characters long.
Now we've seen how to do length.
We say curly braces and in between we can say 6 to 10.
Now, in this case, I don't want an upper limit.
I just want it to be at least six characters long.
So if that's the case, all I need to do is take off the ten and then leave six like this and then the
comma.
And this means at least six characters long and any length beyond that.
Okay, so now we have that.
Let's come down here and test it.
Now in JavaScript we can use a method called test on a pattern.
So I'm going to say let result oops, result equal to the pattern, which is the regular expression.
Then we use a regex method called test.
So this method takes in the value that we want to test.
Now we want to test the username.
And what this is going to do is return a boolean.
Either true or false.
If it passes the test, then it's going to return true.
If it doesn't pass the test, it returns false.
So remember, we take the pattern, which is a regular expression.
Then we use the test method on it.
Inside the method we pass in.
The thing that we want to test in our case is the username.
So let's log out result to the console console dot log results.
Okay, save that and preview.
And now we can see false because it doesn't pass it and that's because we're looking for something at
least six characters long.
Our name is five characters long.
So if I add on P at the end, then that is now six characters test this and now we get true because
it passes.
Okay, so this is good.
But what now?
If we just start adding some letters and numbers and symbols at the start and the end of this, is this
still going to pass?
Well, if I save it and refresh, we see it's still true.
So it's still passing because we're looking for this pattern, which is a word at least six characters
long, only A to Z lowercase.
Now that word is in there somewhere.
It's right here.
Okay.
So as long as it's in there somewhere, then it doesn't matter.
It's still going to pass.
Now, remember, the way we combat this is by putting a dollar sign at the end to say that this word
must be at the end of the string.
And we put a carrot sign at the start to say that this word must also be at the start.
So if we test this now, save it.
We should get false and we're only going to get true now if the word is at the start and the end.
So if we save it now, we're still going to get false.
But if we take off this bump over here, then we should get true now.
Okay, so let's test this.
Now we get true.
So this is a good little thing to add because when a user types something into the field, they could
type in a valid username, but then follow it up with a load of junk like that.
Now overall, that's not valid.
We only want them to type in this.
So that's why we add the dollar and the carrot at the end and the start of the regular expression.
So then this returns a boolean right here.
What we could do is a little check.
Now we could say if and then result.
And that remember is a Boolean either true or false.
So if it's true, then we're going to find some code and we can just say console dot log and we can
say the regex test passed smiley face, and then we'll do an else clause down here to say else.
And then we're also going to log something to the console and we'll just say regex test failed and then
unhappy face.
Okay, so let's see what is output to the console.
Okay.
Unexpected token.
That's because we've misspelled else.
So let's correct that and preview in a browser again.
And we should see regex test passed.
If we change this to something not valid then we see regex test failed.
Awesome.
Now there is.
Another method we can use.
In fact, there's a couple of different methods I'm going to show you one more.
Let me just comment all of that stuff out.
And this time we're going to say let result equal to the username.
So we take the actual thing that we're testing now right here, the string before we took the pattern
and we used a method on the pattern, this time we're taking the string and we're using a method on
the string.
So the method we use is search and we pass in the regex that we want to test it against.
So if I pass in the pattern, there we go.
So this is basically the opposite of this right here we had the pattern and we used a method on the
pattern and we passed in the string.
Right here we have the string, we use the method on the string and we pass in the pattern.
So it's kind of like the opposite.
Now what this does is return to us an integer, and that integer is going to be the position at which
it finds this match.
Let me show you this in a demo.
I'm going to say console dot log results like this and save it.
And if we preview in a browser, we can see minus one and it's minus one because we don't get a match.
Because remember, this is not a match to this because we have these numbers in and we're not allowed
those numbers in.
Now, if I save it, then we see zero.
So the match is at position zero and it's position zero because this is where the match is.
The first letter JavaScript is zero based.
It's a bit like array notation.
The position of the match is the first position in the string.
Now it's never going to be any other position because we specify it must be at the start of the string
right here.
But if I were to remove this and remove this and we did some kind of numbers here and numbers here,
remember, we're still getting a match.
Now, this thing down here is going to return us the position it finds that match.
So if I save it now, we can see position four.
So zero, one, two, three, four.
This is the first letter of the word that matches.
So this has its uses as well.
Imagine you're searching maybe a paragraph or something and you want to know the position in that paragraph
when a particular pattern is matched.
This would be a good use case.
Now, most of the time I'm going to be using the test method for input fields because I think that works
a little nicer.
So I'm going to place the carrot back in over here and I'm going to place in the dollar sign over here
and then press save this now won't match anymore, so we should get minus one.
So remember this returns an integer.
It's minus one if we don't get a match.
Otherwise it's the position of the match.
