Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects. These patterns are used with the exec and test methods of RegExp, and with the match , matchAll , replace , replaceAll , search , and split methods of String. XSS Filter Evasion Cheat Sheet on the main website for The OWASP Foundation. OWASP is a nonprofit foundation that works to improve the security of software. JavaScript Regex Cheat Sheet. By Monty Shokeen 21 Jun 2018. Length: Medium Languages: Regular Expressions JavaScript Language Fundamentals Programming Fundamentals. Indonesian (Bahasa Indonesia) translation by Lukman Nulhakim (you can also view the original English. Download the Regular Expressions Cheat Sheet. David, Regex is programming language neutral, as in, it doesn't matter if you are programming regex expressions in javascript, c#, c, PHP, or even command line.nix, makes no difference. Only thing you have to watch out for is some programming languages may require different various.
PrevNext
When learning regexes, or when you need to use a feature you have not used yet or don't use often, itcan be quite useful to have a place for quick look-up. I hope this Regex Cheat-sheet will provide such aid for you.
Character Classes
Regex Character Classes and Special Character classes.
TODO: add examples w and d matching unicode letters and numebers.
Quantifiers
'Quantifier-modifier' aka. Minimal Matching
Other
Grouping and capturing
Anchors
Modifiers
Extended
Other Regex related articles
Official documentation
Published on 2015-08-19
Comments
In the comments, please wrap your code snippets within <pre> </pre> tags and use spaces for indentation.Please enable JavaScript to view the comments powered by Disqus.comments powered by DisqusRegex (a.k.a. Regular Expressions) is a tool for finding words or patterns of text within strings. It is also used to validate text, for example to check that you have entered a valid email address. It’s a swiss army knife that you will use again and again in both web and back-end programming using Javascript.
Before we look at the Javascript code, we’ll learn a bit about Regex itself.
Regex is a mini programming language in it’s own right, but for the purpose of finding text. With Regex you have a piece of text called an expression which is used to match text in a string. This text contains normal characters, e.g. letters that you want to match, and special characters that control how things are matched.
This is best explained with a few examples.
Firstly let start with the simplest thing, let’s say the expression is just this:
The string we want to match on looks like this:
Then the expression will match the a
in the word Mate
.
In Javascript, you can use this regex to check if a string contains an a
, and you can use it to replace any a
’s with something else. I’ll cover the functions to do that later in this tutorial.
Now for something a bit more advanced
We are now going to use a special character, the asterisk *
, which for a regex means match zero or more of a regular expression. This means if you have this regex:
It will match strings like this
These strings all have and a
followed by zero or more b
’s. When doing replacements, Javascript will replace as many b
’s as it can find up until the next character that isn’t a b
. For example. if you replace the regex ab*
with x
then abba
becomes xa
.
There are other special characters. The basic ones are:
- Asterisk (
*
) as described above, matches zero, one or more of the preceding regex. - Plus sign (
+
) matches one or more of the preceding regex. - Question mark (
?
) makes the previous regex optional. So accepts zero or one match. - Backslash (
) used when you want to match a character that has been designated a special character. E.g.
*
matches a*
- Period (
.
) used to match any character.
Let’s make an example of a simple email validator regex using just the above special characters. Our validation will assume that a valid email just needs an @
symbol somewhere inside it, and a period somewhere after the @
.
E.g. this would be a valid email: justin@domain.com
This actually allow a lot of emails that would be invalid, but it gives you an idea of how to get started, and it can be modified to make it more precise. We’ll start with the obvious thing, the @
symbol, so you could have a regex like this:
We want to match anything before that symbol. To do this we will combine two special characters: the period and the plus:
The .+
means is match any character one or more times. Or in other words there needs to be something (anything) before the @
symbol.
In a similar way, let’s match anything after the @
symbol:
It feels like we are getting close. The only thing is we want that anything to contain a period, so we can add that:
Notice how we need to use the backslash to state that the period is just a period, not the special character.
The problem with this is it won’t match anything after that period, e.g. the com
in .com
, so now we need to add another match anything regex to the end:
And that’s it, that is our basic email matching regex
Let’s test it on a few strings:
It will match the first one but not the last two.
Javascript Regex Exercise
I have put the example above on a website that lets you experiment with regular expressions and what they match.
Open the following link in a new tab: Regex Exercise on Regex101.com
You will see the regular expression for our email, and a test string with the 3 lines from above.Notice that on the right there is a single full match as you would expect:
Tasks:
- Add your own email to the test list. Once typed out it should appear in the matches section on the right.
- Add your name to the test list. Assuming there is no
@
in your name, it should not appear on the right. - Read the explanation section and make sure it matches your understanding of the regex. This section uses a bit of jargon:
- Line terminators - these are characters that cause text to go on to the next line.
- Greedy - this describes how
+
and*
will consume as many characters as they can. For example. if you replace the regexab*
withx
thenabbbbbbbbbbbbba
becomesax
. All theb
’s are consumed.
- Change the regex to match only
.com
instead of matching anything after the period. - Following on from 4, Add the email address
justin@domain.co.uk
and make sure that one doesn’t match, but the.com
version does.
Learn more
The book
To learn about the regex syntax in depth, see Mastering Regular Expressions by Jeffrey E.F. Friedl
A quick cheat
If you are strapped for time, in a corner and need a quick regex to get you out, you might want to find a good cheatsheet online. Here is one I found which gets straight to the point: https://www.debuggex.com/cheatsheet/regex/javascript.
Javascript Regex
There has been a distinct lack of the usual braces and semicolons so far you’d expect from a Javascript tutorial. It’s time to fix that by seeing some regex code example. The regex language takes some time to get use to, but once you have a regex, using it in Javascript is easy.
Create a regex
To create a regex you can either put the regex text between two slashes, which is called a regular expression literal:
Or you can construct it like this:
The literal has the advantage of being pre-compiled, which can make it run faster. The constructed version should be used if you might need to change the pattern, or the pattern isn’t known at the time of writing the program (e.g. from an input field).
Once you have made your regex, there are 6 methods you can use with the regular expression to do useful things:
- exec
- test
- match
- search
- replace
- split
exec
and test
and methods on the regex object, and the rest are methods on the string you want to test or change.
Let’s go through these and see what they do.
exec
The exec
method will search a string based on the regex, and will return some information about the first match if there is one, and will return null if there is no match.
Here is an example:
The information returned is an array whose first value is the first match, with some additional properties, which are:
Reg Expression Cheat Sheet
- The index of the match
- The original string
- Any group matches that were found. (We won’t cover group matches in this tutorial).
test
The test
method is similar to exec
but it returns less information. It will return true
if there is a match and false
if there isn’t, and that’s it.
match
The match
method is called on a string. Given a regex it will return the match or matches found in the string. To find more than one match you need to add a g
modifier to the regex.
Javascript Regexp Cheat Sheet
For example:
search
The search
method on a string returns the index (i.e. position) of the match within a string. It will return -1 if nothing is found. Either way, it will always return a number and not null/undefined.
replace
The replace
method replaces the first match it finds with a substitution. You need to specify the global flag g
after the regex if you want to replace all matches in the string.
You can also use normal strings instead of regex if you wish:
And if you are up for something a bit more advanced, you can provide a function that does the replacement in a special way. For example:
Extendclass.com has a good Regex Tester.
If you are looking for a JavaScript job or other tech job, I have created a free service called JobAlerts.
We grab jobs from around the world. Remote jobs, onsite jobs, all technologies from a tonne of trusted sources. Sign up to maximise your opportunities now!