DEV Community

Cover image for Regular Expressions
Mike Conner
Mike Conner

Posted on

Regular Expressions

Working with strings is one of those things that seems really simple, until you encounter a problem that isn't. Regular expressions are another tool that you can use along with string methods that allow you to be much more specific in your queries! Lets learn how to use regular expressions!

Regular expressions

A regular expression, also known as a regex or regexp, is simply a pattern that you can use to match a distinct and often specific combination of characters. We can use these patterns to inspect and process strings. For example, the regular expression of /cat/ is equivalent to the exact sequence of "cat" in a string. I know what you're thinking. "How is that useful? Why not just use a string?" We'll get there! Lets talk a bit about how to build a regular expression first. A regular expression is an object that we create using either regular expression literals (//) or invoking the RegExp constructor function using the new keyword. Creating and assigning a regular expression might look something like this:

let rat;
rat = /rat/;
rat = new RegExp("rat");

Both of the above examples are equivalent ways to create the same regexp. So we've made some regular expressions. What can we do with them? Regular expressions have their own methods available to them, and they can also be used in certain string methods. For example, .test is a method that is available to regular expressions. It returns a boolean of whether the regexp was found in the string or not:

let rat = /rat/;
rat.test('I saw a rat!');  // returns true
/rat/.test('I saw a rat!');  // returns true

Both of the above patterns of calling .test are equivalent: that is, it can be called with a variable assigned to a regexp, or using the regexp directly. This is true for any use of regular expressions. Its important to note that regular expression matches must be EXACT, including any line breaks, capitalization, and white space. For example:

/rat/.test('I saw some rats!');  // returns true
/rat/.test('Meet at the bar at 9');  // returns false
/rat/.test('Rats and cats are not friends');  // returns false

But that still doesn't explain why you would use a regular expression. You could accomplish the same thing with existing string methods and regular strings, right? That's where special characters come in!

Special characters

Special characters are characters that modify or specify the character combination of a regexp. These are where regular expressions get their super powers from! One of the most useful special characters are brackets. Brackets allow you to denote that a character in your target string can be any number of characters! Lets see them in action:

const bt = /b[aeiou]t/;
bt.test('bat');  // returns true
bt.test('bet');  // returns true
bt.test('bit');  // returns true
bt.test('bot');  // returns true
bt.test('but');  // returns true
bt.test('bpt');  // returns false

Think of everything in the brackets corresponding to a single character in the string you're searching. On top of this useful ability, we can designate a specific range of characters using the "-" character!

const nums = /[0-5]/;
nums.test('0');  //  returns true
nums.test('3');  //  returns true
nums.test('7');  //  returns false

This method uses a characters Unicode number, so be careful when using this approach with alphabetical characters, as there is a small gap between lowercase and uppercase characters that contains several characters you might not be interested in. To designate all letters, you would do something like:

const letters = /[A-Za-z]/;
letters.test('M');  // returns true
letters.test('y');  // returns true
letters.test('5');  // returns false

Another special character to keep in mind is the '+' character. This indicates that a specific element may be repeated any number of times. Lets see it in action:

const bomb = /boo+m/;  
bomb.test('boom!');  // returns true
bomb.test('Boom!');  // returns false
bomb.test('boooooooooooom!');  // returns true

Now lets combine the above code with an option. Options follow your regular expression and allow you to further tweak your search pattern. We'll throw an "i" after our last regexp literal to denote that we're not worried about case.

const bomb = /boo+m/i;  
bomb.test('boom!');  // returns true
bomb.test('Boom!');  // returns true
bomb.test('boooooooooooom!');  // returns true
bomb.test('BOOOOOOOOOOOOM!');  // returns true

The "?" character is also a useful special character. This character denotes that the preceding character may or may not be included.

const color = /colou?r/; 
color.test('color');  // returns true
color.test('colour');  // returns true

The last special character I want to talk about is the "." character. This is the wildcard character. A "." can mean any other character, excluding newline.

const anything = /./; 
anything.test('a');  // returns true
anything.test('1');  // returns true
anything.test('[');  // returns true

Shortcuts

There are also several build-in shortcuts that can be used to similarly to the "[-]" combination. The "\d" shortcut can be used to denote any digit. Similarly, the "\D" shortcut refers to any character that is NOT a digit.

const digit = /\d/;  
digit.test('a');  // returns false
digit.test('1');  // returns true
digit.test('&');  // returns false

const notDigit = /\D/;  
notDigit.test('a');  // returns true
notDigit.test('1');  // returns false
notDigit.test('&');  // returns true

The "\w" character refers to any alphanumeric character. Its opposite, "\W", refers to any nonalphanumeric character.

const alphaNumber = /\w/;  
alphaNumber.test('a');  // returns true
alphaNumber.test('1');  // returns true
alphaNumber.test('&');  // returns false

const notAlphaNumber = /\W/; 
notAlphaNumber.test('a');  // returns false
notAlphaNumber.test('1');  // returns false
notAlphaNumber.test('&');  // returns true

Similarly, the "\s" character refers to any whitespace character, while the "\S" character refers to any nonwhitespace character.

const whitespace = /\s/;  
whitespace.test('a');  // returns false
whitespace.test('1');  // returns false
whitespace.test('&');  // returns false
whitespace.test(' ');  // returns true
whitespace.test('\n');  // returns true

const notWhitespace = /\S/; 
notWhitespace.test('a');  // returns true
notWhitespace.test('1');  // returns true
notWhitespace.test('&');  // returns true
notWhitespace.test(' ');  // returns false
notWhitespace.test('\n');  // returns false

Conclusion

By no means has this been a complete discussion of regular expressions. But I have hopefully conveyed how they can be more useful than using a string and string methods. You can use special characters and containers, such as brackets, to make your searches much more specific. Next time, I'll go over how to use these regular expressions with string methods to supercharge your code!

Top comments (0)