Regex is so scary-looking and ugly. It took me a lot of playing around with it to realize that the code one would write if regex wasn’t a built-in part of javascript is way uglier. Strings can contain any combination of the very complex to parse characters, and regex expressions make this process methodical.
Take for example a password input inside a signup form on any average website. I can’t remember the last time they didn’t require me to have some combination of an upper and lowercase number as well as some sort of number and symbol. The code you would write to check a password for all of these things would be a tower of if statements checking charCodes and bullying a basic string around. Here’s an example I found on stack overflow here (https://stackoverflow.com/questions/5142103/regex-to-validate-password-strength) that solves that exact problem in one line, allowing a developer to easily allow a form to react to users input without a tower of conditions.
Beautiful right? Thanks to codeaddict for this amazing breakdown of what looks like RegExp hell, but if implemented would allow you to make a password checker in one line, and broken down is really easy to follow!
It’s hard to remember in the early stages of learning that things like regex aren’t problems to solve, but useful tools that definitely wouldn’t be baked into javascript if they didn’t serve a great purpose. Regex expressions need to be used with a method to mean anything. There RegExp object itself has methods, and there are String object methods that accept regexes to do their dirty work.
Here I’ll go through each one. Definitions are acquired from MDN
- REGEXP METHODS
- .test()- performs a search on a string looking for a match and either returns true or false
- .exec()- performs a search on a string and returns matches in an array, or null for no matches. This is different from match because it can perform multiple matches
- 2. STRING METHODS
.match()- returns a result array matching a regexp - .matchAll() — same as a match but gets all matches and can handle groups
- .replace(regexp, replacement) — Returns a new string with all matches of a regexp replaced with the replacement string, the replacement string can also be a replacement function to cause it to only replace some of the matches
- .replaceAll() — same as replace() but will always replace all matches
- .search() — returns the index of a match in a given string. Works like indexOf
- .split() — divides a string into a set of substrings, puts them into an array, and returns that array. If not given a regexp as an object, it converts the input into one for use. This is why we can split strings by a space between two quotations and it knows to split up our string
There are very useful tools online for learning these expressions such as:
I can’t imagine myself writing one from scratch inside vscode without testing it out in one of these first, visual tools are your friend sometimes. Give these a shot and test the different methods out with one that you wrote yourself and I promise RegExp will feel a lot less scary. It did for me anyway!
