Become a JavaScript RegEx Pro

Peter Etherington, Front End Developer

January 22, 2019

Java RegEx Thumbnail

Regular Expressions (RegEx) are an incredibly useful tool for any developer; from form validation to finding and replacing data amongst large datasets, they can be used for an encyclopedia of different situations. In my experience, RegEx has helped me becoming a more efficient developer, and making my code more compact. And I believe it can help you too.  

To some developers, RegEx could feel like a maze at first; there are lots of rules, modifiers, and combinations. There’s overheard in the learning process, but it pays dividends.  

I wrote this article to be a primer and cheat sheet for those that are trying to learn regular expressions. It includes important and commonly used features, as well as a walkthrough of the basics. Hopefully after reading this article you will have a better understanding of why that’s true and how to wield RegEx in your own projects, and you can return to this whenever you need a refresher.  

So, let’s begin! 

 

Regular Expressions have three main use cases: 

Validation, Extraction and Replacement 

 

Validation 

regex.test(string) 

The test method executes a search for a match between a regular expression and a specified string. It’s chained onto a regular expression and passed a string. Think of this method whenever you need to create a condition and want to execute code based on the existence of a pattern in a string. 

Returns true or false. 

 

Extraction 

string.match(regex) 

The match method retrieves a pattern from a string. It’s chained onto a string and passed a regular expression. Think of this method whenever you need to extract and manipulate a pattern in a string.  

Returns an array or null. The array will contain: 

 

  • The matched pattern  

  • Any patterns captured in parentheses,  

  • An index, groups and input property. 

  • When the /g flag is used, the array will only contain matches and no properties 

 

Replacement 

string.replace(regex, replacement) 

The replace method finds patterns in the original string and replaces those patterns. It takes two arguments, the RegEx to find patterns and a string to replace them. Think of this method when you have to strip out HTML from strings or update specific information. 

Returns a new string. 

 

 

The Basics 

NOTE: in the examples below what follows the console.log() in blue is the return value. 

 

You can search for Literal patterns using the exact characters. 

  • literal regex

 

You can search for multiple patterns using the Alternation or OR operator.  

  • alternation regex
The Wildcard selector will match any one character. Here it’s used three times.   
  • wildcard regex
Character Classes let you define a group by placing them in square brackets. Note that it only captures one character unless otherwise specified (Doug isn’t matched). Also, notice we use the global /g flag here to match every instance of our expression.  
  • char classes regex

Inside a character set, you can define a Range of Characters to match with a hyphen.  

  • in the range regex
A Negated Character Set is created by placing a caret after the opening bracket and before the characters you don’t want to match.  
  • negated chars regex
To match Repeating Characters, you can use the plus + to match one or more of a character. You can also use the asterisk * to match a character that occurs zero or more times consecutively.
 
  • repeating chars regex
Regular expressions by default find the largest sub-string possible to fit the pattern. This can be changed by using Lazy Matching with *?. This is great for capturing and replacing HTML tags, like in the example below.  
  • lazy matching regex
Outside of a character set, the caret ^ is used to search for patterns at the Beginning of Strings  and the dollar sign $ is used to match characters at the End of a String.  
  • beginning and end regex

 

If you found this useful,  you can also dowload the cheat sheet in the link below:

Posted in regex

Back to Ideas ×