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)