“Okay I’m gonna do it. I’m just gonna learn regex, get it out of the way, and be that much closer to becoming a 10x developer” - Me, at least a couple times.
And I did it. I did the deep dive, practiced, tried to learn it front to back.
Do I remember what I learned from those times? Am I still asking rhetorical questions? No and yes, respectively.
Where do we go from here? Well I don’t know about you but I’m going to lower my expectations and lean into a type of learning that’s a bit more iterative. But this isn’t an online cooking recipe, let’s get to the good stuff.
Only digits
\d matches each digit.
[1-9] does too.
Given 123, the regex expression /\d/ returns three matches: [1][2][3]
Adding + matches one or more of the previous pattern:
/\d+/ or /[1-9]+/.
Given 123 again, we’re returned one match [123]
Give this 123abc345, it returns 2 matches [123]abc[345]
| expression | explanation |
|---|---|
/\d/ | match all digits in a string |
/[1-9]/ | same deal, more explicit |
/\d+/ | match all contiguous groups of digits (but not subgroups) |
/[1-9]+/ | "" |
Now we can add in the ^ and $ operators, beginning and end. These say, these matches must be in relation to the beginning and/or end.
| expression | explanation |
|---|---|
/^\d/ | Match a single digit at the beginning of a string |
/\d$/ | Match a single digit at the end of a string |
/^\d$/ | Match a string consisting only of a single digit |
/^\d+$/ | Match a string consisting only of a contiguous group of digits. |
How do we use this stuff in JS or TS?
Make sure a string is only comprised of digits in javascript with /^[1-9]$/.test(str).
The .test() method returns true if at least one match is found.
You can also get all matches found with a weirdly different syntax:
str.match(/\d/g)
The g is for global, and tells JS we want to return more than just the first match.
'123'.match(/\d/g)
// > ['1', '2', '3']If we want the indices of each match, we can get more info with matchAll:
'123'.matchAll(/\d/g)But since this returns an iterator we need to convert it into an array first:
Array.from('123'.matchAll(/\d/g))
//or
[...'123'.matchAll(/\d/g)]Stripping to alphabetic characters
So now we can tack on the .replace() method and this should make sense:
str.replace(/[^a-zA-Z]/g, '');But wait…why is the carrot ^ inside the brackets.
AHHHHHHHHHHHHHHHHHHHHHH
Good question. Turns out that if the carrot is the first character in the square brackets, it’s saying “everything but the pattern in these brackets”. So super different from what it means when it’s outside of them.
It inverts the pattern.
Random note:
const str = s.replace(/[\w]+/g, '').toLowerCase()\w corresponds to all characters [a-zA-Z0-9]