Understanding Regular Expressions: A Beginner's Guide (Part 3) ✨

In Part 3 of this series, we are going to delve deeper into the fascinating world of regular expressions. We will explore general patterns and gain a better understanding of how they work. Additionally, we will focus on how to specify the number of matches to achieve desired results. By examining these concepts in detail, we can develop a comprehensive understanding of the power of regular expressions. So let's buckle up and get ready to take a deep dive into the wonderful world of regular expressions!

Match a Literal String with Different Possibilities

You can search for multiple patterns using the OR operator: |. This operator matches patterns either before or after it. For example, if you wanted to match the strings yes or no, the regex you want is /yes|no/.

You can also search for more than just two patterns. You can do this by adding more patterns with more OR operators separating them, like /yes|no|maybe/.

let petString = "I have a pet cat."; 

let petRegex = /dog|cat|bird|fish/; 

petRegex.test(petString);
//output: true

Match Anything with Wildcard Period

Sometimes you won't (or don't need to) know the exact characters in your patterns. Thinking of all words that match, say, a misspelling would take a long time. Luckily, you can save time using the wildcard character: .

The wildcard character . will match any one character. The wildcard is also called dot and period.

let humStr = "I'll hum a song";
let hugStr = "Bear hug";
let huRegex = /hu./;
huRegex.test(humStr);
// output: true
huRegex.test(hugStr);
// output: true

Match a Single Character with Multiple Possibilities

You can search for a literal pattern with some flexibility with character classes. Character classes allow you to define a group of characters you wish to match by placing them inside a square ([ and ]) brackets.

let bigStr = "big";
let bagStr = "bag";
let bugStr = "bug";
let bogStr = "bog";
let bgRegex = /b[aiu]g/;

bigStr.match(bgRegex);
//output: ["big"]
bagStr.match(bgRegex);
//output: ["bag"]
bugStr.match(bgRegex);
//output: ["bug"]
bogStr.match(bgRegex);
//output: null

Match Single Characters Not Specified

You could also create a set of characters you do not want to match. These types of character sets are called negated character sets.

To create a negated character set, you place a caret character (^) after the opening bracket and before the characters you do not want to match.

For example, /[^aeiou]/gi matches all characters that are not a vowel. Note that characters like ., !, [, @, / and white space are matched - the negated vowel character set only excludes the vowel characters.

let bigStr = "big";
let bgRegex = /[^aiu]/gi;
bigStr.match(bgRegex);
//output: ['b', 'g']

Match Characters that Occur One or More Times

Sometimes, you need to match a character (or group of characters) that appears once or more in a row. This means it occurs at least once, and may be repeated.

You can use the + character to check if that is the case. Remember, the character or pattern has to be present consecutively. That is, the character has to repeat one after the other.

let bigStr = "big brown hat";
let bgRegex = /[b+]/gi;
bigStr.match(bgRegex);
//output: ['b', 'b']

Match Characters that Occur Zero or More Times

There's also an option that matches characters that occur zero or more times. The character to do this is the asterisk or star: *.

let bigStr = "bbig";
let bagStr = "bag";
let hatStr = "hat";
let bRegex = /[b*]/gi;
bigStr.match(bRegex);
//output: ['b', 'b']
bagStr.match(bRegex);
//output: ['b']
hatStr.match(bRegex);
//output: null

Find Characters with Lazy Matching

In regular expressions, a greedy match finds the longest possible part of a string that fits the regex pattern and returns it as a match. The alternative is called a lazy match, which finds the smallest possible part of the string that satisfies the regex pattern.

You can apply the regex /t[a-z]*i/ to the string "titanic". This regex is a pattern that starts with t, ends with i, and has some letters in between.

Regular expressions are by default greedy, so the match would return ["titani"]. It finds the largest sub-string possible to fit the pattern.

However, you can use the ? character to change it to lazy matching. "titanic" matched against the adjusted regex of /t[a-z]*?i/ returns ["ti"].

let titanicStr = "titanic";
let gRegex =  /t[a-z]*i/;
titanicStr.match(gRegex);
//output: ['titani']

let lRegex = /t[a-z]*?i/;
titanicStr.match(lRegex);
//output: ['ti']

Match Beginning String Patterns

the caret ^ is used to search for patterns at the beginning of strings.

let firstString = "Ricky is first and can be found.";
let firstRegex = /^Ricky/;
firstRegex.test(firstString);
//output: true
let notFirst = "You can't find Ricky now.";
firstRegex.test(notFirst);
//output: false

Match Ending String Patterns

You can search the end of strings using the dollar sign character $ at the end of the regex.

let theEnding = "This is a never ending story";
let storyRegex = /story$/;
storyRegex.test(theEnding);
//output: true
let noEnding = "Sometimes a story will have to end";
storyRegex.test(noEnding);
//output: false

Specify the Upper and Lower Number of Matches

You can specify the lower and upper number of patterns with quantity specifiers. Quantity specifiers are used with curly brackets ({ and }). You put two numbers between the curly brackets - for the lower and upper number of patterns.

let A4 = "aaaah";
let A2 = "aah";
let multipleA = /a{3,5}h/;
multipleA.test(A4);
//output: true
multipleA.test(A2);
//output: false

Specify Only the Lower Number of Matches

To only specify the lower number of patterns, keep the first number followed by a comma.

let A4 = "haaaah";
let A2 = "haah";
let multipleA = /ha{3,}h/;
multipleA.test(A4);
//output: true
multipleA.test(A2);
//output: false

Specify the Exact Number of Matches

To specify a certain number of patterns, just have that one number between the curly brackets.

let A4 = "haaaah";
let A3 = "haaah";
let multipleHA = /ha{3}h/;
multipleHA.test(A4);
//output: false
multipleHA.test(A3);
//output: true

Thank you for your time. I hope you found it useful. ❤️

Our journey with regular expressions is nearly finished. If you enjoyed this article and want to be the first to know when I post the next part, you can follow me on Twitter or here at Habiba Wael.