Regular Expressions

What is a regular expression?

	Let's begin by actually opening up our console – go to any page and pop open 	your inspector. (command + option + I)

	A regular expression is a form of notation used to identify patterns within strings.
	They are most notably used for string validations: for example verifying that a 	user's input into a form field is actually an email address based on a particular 	pattern.

	We've actually seen a little taste of regex before, can anyone remember?

A regular expression for verifying a user has input a first and last name into a form field	might look something like this:
		/^([A-z][A-Za-z]*\s+[A-Za-z]*)|([A-z][A-Za-z]*)$/



	This pretty much looks like the Rosetta Stone right now, but we will break it down 	into smaller pieces.

	Regular expressions, also commonly called RegEx originated in the 1950s and are 	widely supported today in most programming languages (Java, Python, Ruby, C+	+) and native to most browsers. Obviously, today we will be talking about how to incorporate them into our JavaScript code.

So how do we use regular expressions?

	Now, There are two ways to create a Regular Expression: we can create a 	constructor

	>>> RegExp(“abc”);

	which is useful when we know the pattern is changing or need to capture 	information in a variable

	>>var foo = “123”

	>> RegExp(“abc” + foo”)


	We can use the literal notation by entering the pattern between two front 	slashes when we know the expression will remain constant.

	Let's write a literal expression of the word hello.

	>>     /hello/

	What we have created here is a regular expression that matches strings that 	contain the string “hello” together in this order. We would use an expression like 	this when we want to find an exact match within a string.

For example, for this expression we would find a match in a string that says, “hello, front-end!” but not in a string like this “he llo” because it is not the exact pattern of h-e-l-l-o. We have that space.

	I am going to use a String method that executes a search for a match in a string. It 	will return an array of information or it will be null.

	 >> "hello".match(/hello/) finds the matching pattern


	>> console.log("he llo, front-end".match(/hello/)); womp womp

	What if our situation was a little more complicated than finding an exact match?
	Well, regex provides us with a list special characters that can enhance our 	matching abilities.

	Some of the special characters we have in our regex tool belt are: ^  $ |  * [] and 	we will go over some of their use cases. There is a nice list on MDN that I 	recommend bookmarking for reference as well.

	We can use these characters for situations in which we might need to 	find a string 	with white space, or a reoccurring letter, etc.

	\d represents a character from 0-9

		>> "I have 2 eyes".match(/\d/)

	you can add on character/s to the special character as well

		>> "I am the 3rd child".match(/\drd/)

	\s represents a whitespace character

		>> "I am the 3rd child".match(/\drd\s/)

	you can see the white space here added to our string in the console and how we 	might begin to add on more characters to create more intricate patterns.

\w represents a symbol of the latin alphabet or a digit or an underscore
Any ideas of the expression we might write out to print “3rd Child?”

	>> "I am the 3rd child".match(/\drd\s\w\w\w\w\w/)

“.” represents any character except a newline:

	>> "tacos!".match(/tacos./) works!
	>> "tacos?".match(/tacos./) works!

	>> "tacos".match(/tacos./) womp womp

Now knowing dot is a special character, but what if we want to match a pattern like “1.25”? How do we indicate this in our regex without causing confusion?
We call this escaping.

To use one of our special characters as a regular symbol, it must be escaped.
We escape by prepending with a blackslash.

How might we match 1.25 in this string?

>> "version 1.25".match(/\d\.\d\d/)

Now, what if our version name was even longer? 1.25356
we could write this as:

>> "version 1.25356".match(/\d\.\d\d\d\d\d/)

Or we can use another special character – our curly braces to notate the digits in a number. Our version 1.25356 could be written as.

"version 1.25356".match(/\d\.\d{5}/)

Another important character is the asterisk.
In the example /ab*c/
“*” matches any character combination in which a single A is followed by zero or more Bs and then immediately followed by a c.

"ac".match(/ab*c/) = “ac”
"cbbabbbbcdebc".match(/ab*c/) = "abbbbc"

Character sets are also an important aspect of pattern matching.
[a-z] matches a lowercase character from a-z.
"LIZ".match(/[a-z]/) = null
"liz".match(/[a-z]/) = 'l' because it finds the first

on the contrary [A-Z] matches the uppercase

We've tackled a few of the most commonly used RegEx characters and their basic functionality.  I highly recommend popping up MDN as you write so that you have a guide as you write your code.

Taking a look at our form field input from the beginning we can already identify a few key pieces we've learned here in just a few minutes:

/^([A-z][A-Za-z]*\s+[A-Za-z]*)|([A-z][A-Za-z]*)$/

The key to breaking down regex is breaking down your expressions into one little bite at a time. Don't be intimidated by their look!

Any questions?