regex101 website<\/a>. All future screenshots will utilize this website for visual reference.<\/p>\n<\/blockquote>\n\n\n\nIn the “Test” example the letters test formed the search pattern, same as a simple search.
You know, like a phone number:<\/p>\n\n\n
^(?:\\d{3}-){2}\\d{4}$<\/code><\/span><\/pre>\n\n\nThe phone number “555-555-5555” will match with the regex above, but “555-abc-5555” will not<\/figcaption><\/figure>\n\n\n\nThis regex may look complicated, but two things to keep in mind:<\/p>\n\n\n\n
\nWe’ll teach you how to read and write these in this article<\/li>\n\n\n\n This is a fairly complex way of writing this regex.<\/li>\n<\/ol>\n\n\n\nIn fact, most regexes can be written in multiple ways, just like other forms of programming. For example, the above can be rewritten into a longer but slightly more readable version:<\/p>\n\n\n
^[0-9]{3}-[0-9]{3}-[0-9]{4}$<\/code><\/span><\/pre>\n\n\n\nMost languages provide a built-in method for searching and replacing strings using regex. However, each language may have a different set of syntaxes based on what the language dictates.<\/p>\n\n\n\n
In this article, we’ll focus on the ECMAScript variant of Regex, which is used in JavaScript and shares a lot of commonalities with other languages’ implementations of regex as well.<\/p>\n<\/blockquote>\n\n\n\n
How to read (and write) regexes<\/h2>\n\n\n\nQuantifiers<\/h3>\n\n\n\n Regex quantifiers check to see how many times you should search for a character.<\/p>\n\n\n\n
Here is a list of all quantifiers:<\/p>\n\n\n\n
\na|b<\/code>– Match either “a” or “b<\/li>\n\n\n\n?<\/code> – Zero or one<\/li>\n\n\n\n+<\/code> – one or more<\/li>\n\n\n\n*<\/code> – zero or more<\/li>\n\n\n\n{N}<\/code> – Exactly N number of times (where N is a number)<\/li>\n\n\n\n {N,}<\/code> – N or more number of times (where N is a number)<\/li>\n\n\n\n{N,M}<\/code> – Between N and M number of times (where N and M are numbers and N < M)<\/li>\n\n\n\n*?<\/code> – Zero or more, but stop after first match<\/li>\n<\/ul>\n\n\n\nFor example, the following regex:<\/p>\n\n\n
Hello|Goodbye<\/code><\/span><\/pre>\n\n\nMatches both the string “Hello” and “Goodbye”.<\/p>\n\n\n\n
Meanwhile:<\/p>\n\n\n
Hey?<\/code><\/span><\/pre>\n\n\nWill track “y” zero to one time, so will match up with “He” and “Hey”.<\/p>\n\n\n\n
Alternatively:<\/p>\n\n\n
Hello{1,3}<\/code><\/span><\/pre>\n\n\nWill match “Hello”, “Helloo”, “Hellooo”, but not “Helloooo”, as it is looking for the letter “o” between 1 and 3 times.<\/p>\n\n\n\n
These can even be combined with one another:<\/p>\n\n\n
He?llo{2}<\/code><\/span><\/pre>\n\n\nHere we’re looking for strings with zero-to-one instances of “e” and the letter “o” times 2, so this will match “Helloo” and “Hlloo”.<\/p>\n\n\n\n
Greedy matching<\/h4>\n\n\n\n One of the regex quantifiers we touched on in the previous list was the +<\/code> symbol. This symbol matches one or more characters. This means that:<\/p>\n\n\nHi+<\/code><\/span><\/pre>\n\n\nWill match everything from “Hi” to “Hiiiiiiiiiiiiiiii”. This is because all quantifiers are considered “greedy” by default.<\/p>\n\n\n\n
However, if you change it to be “lazy” using a question mark symbol (?<\/code>) to the following, the behavior changes.<\/p>\n\n\nHi+?<\/code><\/span><\/pre>\n\n\nNow, the i<\/code> matcher will try to match as few times as possible. Since the +<\/code>icon means “one or more”, it will only match one “i”. This means that if we input the string “Hiiiiiiiiiii”, only “Hi” will be matched.<\/p>\n\n\n\nWhile this isn’t particularly useful on its own, when combined with broader matches like the the .<\/code> symbol, it becomes extremely important as we’ll cover in the next section. The .<\/code>symbol is used in regex to find “any character”.<\/p>\n\n\n\nNow if you use:<\/p>\n\n\n
H.*llo<\/code><\/span><\/pre>\n\n\nYou can match everything from “Hillo” to “Hello” to “Hellollollo”.<\/p>\n\n\n\n>We’re using a regex \/H.*llo\/ to look for the words “Hillo”, “Hello”, and “Helloollo”<\/figcaption><\/figure>\n\n\n\nHowever, what if you want to only match “Hello” from the final example?<\/p>\n\n\n\n
Well, simply make the search lazy with a ?<\/code> and it’ll work as we want:<\/p>\n\n\nH.*?llo<\/code><\/span><\/pre>\n\n\nWe’re using a regex \/H.*?llo\/ to look for the words “Hillo”, “Hello”, and partially match the “Hello” in “Helloollo”<\/figcaption><\/figure>\n\n\n\nPattern collections<\/h3>\n\n\n\n Pattern collections allow you to search for a collection of characters to match against. For example, using the following regex:<\/p>\n\n\n
My<\/span> favorite<\/span> vowel<\/span> is<\/span> [aeiou]<\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nYou could match the following strings:<\/p>\n\n\n
My favorite vowel is a\nMy favorite vowel is e\nMy favorite vowel is i\nMy favorite vowel is o\nMy favorite vowel is u<\/code><\/span><\/pre>\n\n\nBut nothing else.<\/p>\n\n\n\n
Here’s a list of the most common pattern collections:<\/p>\n\n\n\n
\n[A-Z]<\/code>– Match any uppercase character from “A” to “Z”<\/li>\n\n\n\n[a-z]<\/code>– Match any lowercase character from “a” to “z”<\/li>\n\n\n\n[0-9]<\/code> – Match any number<\/li>\n\n\n\n[asdf]<\/code>– Match any character that’s either “a”, “s”, “d”, or “f”<\/li>\n\n\n\n[^asdf]<\/code>– Match any character that’s not any of the following: “a”, “s”, “d”, or “f”<\/li>\n<\/ul>\n\n\n\nYou can even combine these together:<\/p>\n\n\n\n
\n[0-9A-Z]<\/code>– Match any character that’s either a number or a capital letter from “A” to “Z”<\/li>\n\n\n\n[^a-z]<\/code> – Match any non-lowercase letter<\/li>\n<\/ul>\n\n\n\nGeneral tokens<\/h3>\n\n\n\n Not every character is so easily identifiable. While keys like “a” to “z” make sense to match using regex, what about the newline character?<\/p>\n\n\n\n
\nThe “newline” character is the character that you input whenever you press “Enter” to add a new line.<\/p>\n<\/blockquote>\n\n\n\n
\n.<\/code> – Any character<\/li>\n\n\n\n\\n<\/code> – Newline character<\/li>\n\n\n\n\\t<\/code> – Tab character<\/li>\n\n\n\n\\s<\/code>– Any whitespace character (including \\t<\/code>, \\n<\/code> and a few others)<\/li>\n\n\n\n\\S<\/code> – Any non-whitespace character<\/li>\n\n\n\n\\w<\/code>– Any word character (Uppercase and lowercase Latin alphabet, numbers 0-9, and _<\/code>)<\/li>\n\n\n\n\\W<\/code>– Any non-word character (the inverse of the \\w<\/code> token)<\/li>\n\n\n\n\\b<\/code>– Word boundary: The boundaries between \\w<\/code> and \\W<\/code>, but matches in-between characters<\/li>\n\n\n\n\\B<\/code>– Non-word boundary: The inverse of \\b<\/code><\/li>\n\n\n\n^<\/code> – The start of a line<\/li>\n\n\n\n$<\/code> – The end of a line <\/li>\n\n\n\n\\<\/code>– The literal character “\\”<\/li>\n<\/ul>\n\n\n\nSo if you wanted to remove every character that starts a new word you could use something like the following regex:<\/p>\n\n\n
\\s.<\/code><\/span><\/pre>\n\n\nAnd replace the results with an empty string. Doing this, the following:<\/p>\n\n\n
Hello world how are you<\/code><\/span><\/pre>\n\n\nBecomes:<\/p>\n\n\n
Helloorldowreou<\/code><\/span><\/pre>\n\n\nWe’re using a regex \/\\s.\/ to look for the whitespaces alongside the following character in the string “Hello world how are you”<\/figcaption><\/figure>\n\n\n\nCombining with collections<\/h3>\n\n\n\n These tokens aren’t just useful on their own, though! Let’s say that we want to remove any uppercase letter or whitespace character. Sure, we could write<\/p>\n\n\n
[A-Z]|\\s<\/code><\/span><\/pre>\n\n\nBut we can actually merge these together and place our \\s<\/code> token into the collection:<\/p>\n\n\n[A-Z\\s]<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\nWe’re using a regex \/[A-Z\\s]\/ to look for uppercase letters and whitespaces in the string “Hello World how are you”<\/figcaption><\/figure>\n\n\n\nWord boundaries<\/h3>\n\n\n\n In our list of tokens, we mentioned \\b<\/code> to match word boundaries. I thought I’d take a second to explain how it acts a bit differently from others.We’re using a word boundary regex \/\\b\/ to look for the in-between spaces in characters<\/figcaption><\/figure>\n\n\n\nThis can be tricky to get your head around, but it’s unusual to simply match against a word boundary. Instead, you might have something like the following to match full words:<\/p>\n\n\n
\\b\\w+\\b<\/code><\/span><\/pre>\n\n\nWe’re using a regex \/\\b\\w+\\b\/ to look for full words. In the string “This is a string” we match “this”, “is”, “a”, and “string”<\/figcaption><\/figure>\n\n\n\nYou can interpret that regex statement like this:<\/p>\n\n\n\n
“A word boundary. Then, one or more ‘word’ characters. Finally, another word boundary”.<\/p>\n\n\n\n
Start and end line<\/h3>\n\n\n\n Two more tokens that we touched on are ^<\/code> and $<\/code>. These mark off the start of a line and end of a line, respectively.<\/p>\n\n\n\nSo, if you want to find the first word, you might do something like this:<\/p>\n\n\n
^\\w+<\/code><\/span><\/pre>\n\n\nTo match one or more “word” characters, but only immediately after the line starts. Remember, a “word” character is any character that’s an uppercase or lowercase Latin alphabet letters, numbers 0-9, and_<\/code>.<\/p>\n\n\n\nThe regex \/^\\w+\/ matches the first word in the string. In “This is a string” we match “This”<\/figcaption><\/figure>\n\n\n\nLikewise, if you want to find the last word your regex might look something like this:<\/p>\n\n\n
\\w+$<\/code><\/span><\/pre>\n\n\nYou can use \/\\w+$\/ to match the last word in the string. In “This is a string” we match “string”<\/figcaption><\/figure>\n\n\n\nHowever, just because these tokens typically<\/strong> end a line doesn’t mean that they can’t have characters after them.<\/p>\n\n\n\nFor example, what if we wanted to find every whitespace character between newlines to act as a basic JavaScript minifier<\/a>? <\/p>\n\n\n\nWell, we can say “Find all whitespace characters after the end of a line” using the following regex:<\/p>\n\n\n
$\\s+<\/code><\/span><\/pre>\n\n\nWe can use \/$\\s+\/ to find all whitespace between the end of a string and the start of the next string.<\/figcaption><\/figure>\n\n\n\nCharacter escaping<\/h3>\n\n\n\n While tokens are super helpful, they can introduce some complexity when trying to match strings that actually contain tokens. For example, say you have the following string in a blog post:<\/p>\n\n\n
\"The newline character is '\\n'\"<\/span><\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\nOr want to find every instance of this blog post’s usage of the “\\n” string. Well, you can escape characters using\\<\/code>. This means that your regex might look something like this:<\/p>\n\n\n\\\\n<\/code><\/span><\/pre>\n\n\nHow to use a regex<\/h2>\n\n\n\n Regular expressions aren’t simply useful for finding<\/em> strings, however. You’re also able to use them in other methods to help modify or otherwise work with strings.<\/p>\n\n\n\nWhile many languages have similar methods, let’s use JavaScript as an example.<\/p>\n\n\n\n
Creating and searching using regex<\/h3>\n\n\n\n First, let’s look at how regex strings are constructed. <\/p>\n\n\n\n
In JavaScript (along with many other languages), we place our regex inside of \/\/<\/code> blocks. The regex searching for a lowercase letter looks like this:<\/p>\n\n\n\/[a-z]\/<\/code><\/span><\/pre>\n\n\nThis syntax then generates a RegExp object<\/a> which we can use with built-in methods, like