Regular Expression Example

Regular_expression

Example 1:

/expression/.test('string')

/a/.test("a"); //true
/a/.test("b"); //false

Example 2:

/a/.test("abc"); //true 
/a/.test("bcd"); //false 
/a/.test("cba"); //true


let e=/a/; 
e.test("abc"); //true 
e.test("bcd"); //false 
e.test("cba"); //true

Example 3: 
#MultiCharacter Check

/ab/.test("abacus"); //true 
/bac/.test("abacus"); //true  
/abc/.test("abacus"); //false 
/abas/.test("abacus"); //false

NOTE:
Symbol /.../ . Slash (/) marks the start and end of the regular expression. Ignore the dots, that’s where we place the pattern. The /a/ character between slashes is a pattern matched on string under test. The /abc/ characters between slashes are looked up as a sub-string during the pattern matching test on string under test.


Example 4: 
#Pattern In Numbers

let e=/0|1|2|3|4|5|6|7|8|9/;
e.test("42"); //true 
e.test("The answer is 42"); //true

Note:
For now, the pipe symbol (|) means or. Outside of regular expressions, we’ve used it as a bitwise or and conditional or with double pipes (||).


e=/[0123456789]/; 
e.test("42"); //true 
e.test("The answer is 42"); //still true

#A better representation
e=/[0-9]/; 
e.test(42); //true 
e.test("42"); //true 
e.test("The answer is 42"); //true!

Example 5:
#The prefix and suffix patterns

The answer is 42 matches our test because our pattern looks for numeric characters somewhere within the string. Not start to end.
Let’s bring in ^ and $ to help us.
^ means the start of the string. He is a double agent and he’ll trip us off. His second avatar is unmasked only in the last section.
$ means the end of the string.

Let’s get the prefix pattern sorted out:
/^a/.test("abc"); //true 
/^a/.test("bca"); //false 
/^http/.test("https://pineboat.in"); //true /^http/.test("ftp://pineboat.in"); //false

Any pattern that follows ^ should be at the start of the string under test.
The second string starts with b while our pattern looks for a. The fourth one looks for http while the string starts with ftp. This is the reason they fail.

The suffix pattern follows. $ at the end of the pattern directs the test to look for end of string.

/js$/.test("regex.js"); //true 
/js$/.test("regex.sj"); //false

That should sound in your head like, “Look for js and then the end of the string”. Better yet, “Look for a string that ends in js”.
Pattern match End to End
That paves the road to pattern match start to end, you might as well call it end to end.

let e=/^[0-9]$/ 
e.test("42"); //false - NO! 
e.test("The answer is 42"); //false 
e.test("7"); //true

Surprisingly, the first one failed when we added ^ and $.
/^[0-9]$/ reads like, “Go to the start of the string. Look for a single numeral from the character set. Check if the string ends right there.” That’s the reason the last entry returned true. It is just a single number, start to end.

That’s not what we wanted. We wanted to test if the string had one or more numerals.

We are very close. One last thing we need to learn is how to instruct the pattern to look for more than one character in the set.

A question mark (?), a plus (+) and an asterisk (*) met at a battle ground. Each is differently sighted.
The humble question mark (?)says, “I can see none or just one.”

Plus (+) says, “I need to see at least one or more.”

Asterisk (*) says, “I get you both. I can see none, one, or more.”

One of them is cleverly hiding what he is capable of.
The question mark gets on stage first:

/a?/.test(""); //true 
/a?/.test("a"); //true 
/a?/.test("b"); //true! 
/a?/.test("aa"); //true 
/^a?$/.test("aa"); //false

Matches empty string "" 
as ? stands for 0 or 1
Matches a 
one match
Matches b
matches 0 occurrence
Matches aa 
one match and the second a is not part of the pattern

/^a?$/ does not match aa

It looks for zero or one a, start to end, nothing more, nothing less
The plus (+) looks at question mark and remarks, “I’m impressed, but your focus is so binary!”. And takes the stage to show off:

/a+/.test("a"); //true 
/a+/.test("aa"); //true 
/a+/.test("ba"); //true! 
/^a+$/.test("aa"); //true  
/a+/.test(""); //false 
/a+/.test("b"); //false 
/^a+$/.test("ab"); //false

Remember what plus (+) said? It can match one or more occurrences of preceding pattern.
All those returning true have one or more a. We even managed to get a whole string comprised only of a in the last one that returned true with /^a+$/.

false should make sense now, but a word on the last one that returned false. /^a+$/ looks for a start to end, no other characters allowed. This is why ab failed the test.

Finally, star (*) of the show gets on stage. He boasts that, “I can duel alone or duel you both at once” and says, “I can match zero, one or more”.

/a*/.test("a"); //true 
/a*/.test("aa"); //true 
/a*/.test("ba"); //true 
/a*/.test(""); //true 
/a*/.test("b"); //true 
/^a*$/.test("aa"); //true 
/^a*$/.test(""); //true  
/^a*$/.test("ab"); //false

Except the last one, * was able to handle all else. /^a*$/ reads like, 0 or more a start to end. Which is why empty string "" passed the test and "ab" failed.

Back to the Universal Answer
Remember where were we before we met the three musketeers? Yes, “The answer is 42”.
Now if we need to look for only numerals, one or more, start to end, what do we do?

//Let's throw in a plus 
let e=/^[0-9]+$/ 
e.test("4"); //true 
e.test("42"); //true 
e.test("The answer 42"); //false - Hurray

The plus sign (+) in [0-9]+ comes to our rescue. Plus means more than one occurrence of the character or pattern in front of it. In our case, more than one numerals.

It also fails the match for our last case The answer is 42 because, there are no numerals at the start of the string.
Practice Patterns

Can you try to write a pattern for hexadecimal numbers (consisting of numerals 0–9 and letters a-f, with an optional # in front)?
How about a binary number? Can you test if a string is full of just 0 and 1?

[0-9] stands for any of the numeric character set and also has a shorthand version \d.
let e=/^\d+$/; e.test("4"); //true e.test("42"); //true e.test("The answer 42"); //false - Hurray
Just two characters denoting numerals. And No, it doesn’t get any shorter than that.
There are a whole bunch of such special patterns to specify clusters such as numbers (\d), alpha numeric characters (\w), white spaces (\s).
Review
[123]
The expression within square brackets are a character set
Any one of the characters match will pass the test. Just ONE character.
[0-9] 
Looks for a single numeric digit between 0 to 9
[0-5] 
Looks for a single numeric digit between 0 to 5
[a-z] 
Looks for a single letter between a to z
[A-F] 
Looks for a single letter between A to F
[123]+ 
Plus (+) looks for one or more occurrence of the characters within the set This one matches a “23132” sub-string that consists of 1, 2 and 3 within a larger string “abc23132”.
| 
Pipe symbol stands for or
\d 
A shorthand for numerals
Matches a single numeric digit.
\D 
A shorthand for non-numeric characters
Anything other than numerals that’ll be matched by \d