These are my notes while doing the course JavaScript Algorithms and Data Structures on https://www.freecodecamp.org. I highly recommend it if you prefer to try things directly rather than watching videos.
Test Method
let myString = "Hello, World!";
let myRegex = /Hello/;
let result = myRegex.test(myString);
Match Literal Strings
Search for multiple patterns.
let petString = "Max has a pet cat.";
let petRegex = /dog|cat|bird|fish/;
let result = petRegex.test(petString);
Ignore Case While Matching using the i flag.
let petString = "Max has a pet cat.";
let petRegex = /max/i;
let result = petRegex.test(petString); //result true
Extract Matches
"Hello, World!".match(/Hello/);
Note: The .match syntax is the “opposite” of the .test method.
Find More Than the First Match
Using the g flag.
let testStr = "Repeat, Repeat, Repeat";
let repeatRegex = /Repeat/g;
testStr.match(repeatRegex); // Returns ["Repeat", "Repeat", "Repeat"]
Note: You can have multiple flags on your regex like /search/gi
Match Anything with Wildcard Period
The wildcard character: .
let exampleStr = "Let's have fun with regular expressions!";
let unRegex = /.un/;
let result = unRegex.test(exampleStr);
Match Single Character with Multiple Possibilities
let bigStr = "big";
let bagStr = "bag";
let bugStr = "bug";
let bogStr = "bog";
let bgRegex = /b[aiu]g/;
bigStr.match(bgRegex); // Returns ["big"]
bagStr.match(bgRegex); // Returns ["bag"]
bugStr.match(bgRegex); // Returns ["bug"]
bogStr.match(bgRegex); // Returns null
Inside a character set, you can define a range of characters to match using a hyphen character: -, i.e. to match lowercase letters a through e you would use [a-e] or to match any number through 0 to 5 use [0-5].
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
Outside of a character set, the caret is used to search for patterns at the beginning of strings. /^firstWord/.
You can search the end of strings using the dollar sign character $ at the end of the regex. /lastWord$/
Match Characters that Occur Zero|One or More Times
Match a character (or group of characters) that appears:
– one or more times in a row using the + character. For example, /a+/g would find a match in "aabc" and return ["aa"].
– zero or more times in a row using the * character. For example, /go*/g would find a match in "gooooooal" and return [", but only return goooooo"][" in g"]"guuuuuuual".
Find Characters with Lazy Matching
Finds the smallest possible part of the string that satisfies the regex pattern with ?. For example "titanic" matched against the adjusted regex of /t[a-z]*?i/ returns ["ti"].
Match All Letters and Numbers
The shortcut \w is equal to [A-Za-z0-9_]. This character class matches upper and lowercase letters plus numbers. Note, this character class also includes the underscore character (_).
let quoteSample = "The five boxing wizards jump quickly.";
let alphabetRegexV2 = /\w/g;
let result = quoteSample.match(alphabetRegexV2).length; // result 31
You can search for the opposite of the \w with \W. This shortcut is the same as [^A-Za-z0-9_].
Match All Numbers
The shortcut to look for digit characters is \d, with a lowercase d. This is equal to the character class [0-9], which looks for a single character of any number between zero and nine.
The shortcut to look for non-digit characters is \D. This is equal to the character class [^0-9].
Exercise: Restrict Possible Usernames
You need to check all the usernames in a database. Here are some simple rules that users have to follow when creating their username.
- Usernames can only use alpha-numeric characters.
- The only numbers in the username have to be at the end. There can be zero or more of them at the end. Username cannot start with the number.
- Username letters can be lowercase and uppercase.
- Usernames have to be at least two characters long. A two-character username can only use alphabet letters as characters.
let username = "JackOfAllTrades";
let userCheck = /^[a-z][a-z]+\d*$|^[a-z]\d\d$/i;
let result = userCheck.test(username);
Match Whitespace
You can search for whitespace using \s. Will also match return, tab, form feed, and new line characters. Similar to [ \r\t\f\n\v].
let whiteSpace = "Whitespace. Whitespace everywhere!"
let spaceRegex = /\s/g;
whiteSpace.match(spaceRegex); // Returns [" ", " "]
Search for non-whitespace using \S, Similar to the character class [^ \r\t\f\n\v]
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.
For example, to match only the letter a appearing between 3 and 5 times in the string "aaaah", your regex would be /a{3,5}h/.
To only specify the lower number of patterns, keep the first number followed by a comma. /a{3,}h/
To specify a certain number of patterns, just have that one number between the curly brackets. /ha{3}h/
Check for All or None
You can specify the possible existence of an element with a question mark ?
let american = "color";
let british = "colour";
let rainbowRegex= /colou?r/;
rainbowRegex.test(american); // Returns true
rainbowRegex.test(british); // Returns true
Positive and Negative Lookahead
Lookaheads are patterns that tell JavaScript to look-ahead in your string to check for patterns further along.
A positive lookahead will look to make sure the element in the search pattern is there, but won’t actually match it. A positive lookahead is used as (?=...)
A negative lookahead will look to make sure the element in the search pattern is not there. A negative lookahead is used as (?!...)
A practical use of lookaheads is to check two or more patterns in one string. Here is a (naively) simple password checker that looks for between 3 and 6 characters and at least one number:
let password = "abc123";
let checkPass = /(?=\w{3,6})(?=\D*\d)/;
checkPass.test(password); // Returns true
Reuse Patterns Using Capture Groups
You can search for repeat substrings using capture groups. Parentheses, ( and ), are used to find repeat substrings. To specify where that repeat string will appear, you use a backslash (\) and then a number. This number starts at 1 and increases with each additional capture group you use.
let repeatStr = "regex regex";
let repeatRegex = /(\w+)\s\1/;
repeatRegex.test(repeatStr); // Returns true
repeatStr.match(repeatRegex); // Returns ["regex regex", "regex"]
Note: Using the .match() method on a string will return an array with the string it matches, along with its capture group.
Use Capture Groups to Search and Replace
Search and replace text in a string using .replace() on a string. The inputs for .replace() is first the regex pattern you want to search for. The second parameter is the string to replace the match or a function to do something.
let str = "one two three";
let fixRegex = /(\w+)\s(\w+)\s(\w+)/;
let replaceText = "$3 $2 $1";
let result = str.replace(fixRegex, replaceText); //result "three two one"
Exercise: Remove Whitespace from Start and End
/* my solution -> selecting the String */
let hello = " Hello, World! ";
let wsRegex = /(\s+)(\w+,\s\w+!)(\s+)/i;
let result = hello.replace(wsRegex, "$2");
/* sample solution -> selecting the Whitespace */
let hello = " Hello, World! ";
let wsRegex = /^\s+|\s+$/g;
let result = hello.replace(wsRegex, "");