DEV Community

loading...
Cover image for Introduction to Regular Expressions

Introduction to Regular Expressions

saoud profile image Saoud ・2 min read

Terminology


Regular expression: Also known as a regex, a regular expression is a set of characters we can use to find patterns in a string. The set of characters is enclosed in / / and may include flags after the second slash.

Methods That Use Regular Expressions

  • String.prototype.replace(): Takes two arguments - the first is a regular expression, the second is what the pattern should be replaced by.
  • String.prototype.match(): Takes a regular expression as an argument and then returns an array with all matches.
  • RegExp.prototype.test(): Takes a string as an argument - the regular expression is the receiver - and returns a boolean if the string contains the pattern.

Regex Characters

  • \d: Numbers
  • \D: Not numbers
  • \w: Matches any alphanumeric character (including underscores) - so numbers and letters
  • \W: Matches any character that's not a number, letter or underscore
  • \s: Matches a whitespace character
  • \S: Matches any non-whitespace character
  • .: Any single character (wildcard)
  • ^Not this pattern

Regex Flags

Regex flags come after the second slash in a regular expression. For instance: /cat/gi.

  • g is the global flag. Without this flag, regular expressions usually just find the first matching pattern in the string. With this flag, the regex will find all matching patterns in the string.
  • i is the case insensitivity flag. When it's added, the regular expression will ignore case sensitivity.

Regex Groups and Ranges

  • [ ] denotes that all characters inside the brackets should be considered a matching pattern. For instance, the pattern /[aieou]/ will match any vowels in a string.
  • ` denotes a range of characters. For instance, the pattern /[0-9]/ denotes all numerical digits. [A-Z] and [a-z]` are other common ranges.

Regex Quantifiers

  • +: Match the preceding character one or more times
  • ``: Match the preceding character zero or more times
  • ?: Match the preceding character zero or one times
  • {x}: Match the pattern x number of times
  • {x,}: Match the pattern at least x times
  • {x,y}: Match the pattern at least x but no more than y times

Other Helpful Regex Symbols

  • |: Represents or. For example, /cat|dog/ states match either "cat" or "dog"
  • \b: Denotes a pattern boundary. Can be used at beginning or end of a pattern. For example, /\bcat\b/ represents an exact match with "cat" - and doesn't match with "cathedral".

Check out Mozilla's Regular expression syntax cheatsheet for more.

Discussion (5)

pic
Editor guide
Collapse
jtfinlay profile image
James Finlay

Great article, love how direct and to succinct it is. Regex is the #1 thing I can never remember how to use 😅

I'm a fan of using tools like regexr.com to test my regex, they've got a nice experience for validation.

Collapse
olsard profile image
olsard

Great, easy to read, thanks for sharing!

Collapse
toqeer__abbas profile image
Collapse
andrewbaisden profile image
Andrew Baisden

This is good I feel like regex requires reference every now and then.

Collapse
saoud profile image
Saoud Author

It’s something I always have to look up.