12 Quick Example References for Javascript Regular Expressions

1. Search for a substring:

var str = "The quick brown fox jumps over the lazy dog"
n = str.search(/fox/); 

16

For something as simple as searching a searching a string, you could use String.indexOf or String.search for faster performance.

2. If a string starts with a substring:

The key here is ^ operator which stands for start of string.

var str = "The quick brown fox jumps over the lazy dog"
var query = "The";
var searchPattern = new RegExp('^' + query);

searchPattern.test(str); 

true

var str = "The quick brown fox jumps over the lazy dog"
var query = "fox";
var searchPattern = new RegExp('^' + query);

searchPattern.test(str); 

false

3. If a string ends with a substring:

Again the the key operator here is $ which stands for end of a string.

var str = "The quick brown fox jumps over the lazy dog"
var query = "The";
var searchPattern = new RegExp(query + '$');

searchPattern.test(str); 

true

var str = "The quick brown fox jumps over the lazy dog"
var query = "dog";
var searchPattern = new RegExp(query + '$');

searchPattern.test(str); 

true

4. Regex for Domain:

5. Regex for Email:

Like test@gmail.com, testy.test@w.com

A regex that works well is:

var searchString = new RegExp(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,5})+$/)

Let's see why this works

^\w+([\.-]?\w+)*

• ^ stands for start
• \w+ stands for any alpha numeric character and underscore. Equivalent to [A-Za-z0-9_].
• . and - are allowed so [\.-] matches for them but they must be followed by another alphanumeric character so ? ensures they are either not present or appear only once.
• Then \w+ matches any alpha numeric character after . or -.
• Finally we wrap it in ()* which allows 0 or many occurences of such patterns.

Now we have a compulsory @, followed by \w+([.-]?\w+)*

• The idea is similar, there must be at least one alpha numeric character matched by \w.
• The rest can be . followed by more alpha numeric characters in repeat.

Finally (\.\w{2,5})+$/)

• \. matches the ., the \ is needed to escape it.
• Matches at least two alphanumeric character (disallowing @gmail.c for e.g.) and upto 5 characters domain extensions.

6. Regex for Phone number:

There could be multiple types of phone numbers you may want to match. The important part is here is matching digits, which can be done using \d pattern. \d is alternative to [0-9].

• To Match 10 digit phone numbers you could use:  new RegExp(/\d{10}/). Note that \d works inside / /. Alternatively, you could use new RegExp("\\d{10}").
• If you are looking for something more permissive which allows country code, spaces and -, you could use:

new RegExp(/^(+\d{1,2}\s)?(?\d{3})?[\s.-]?\d{3}[\s.-]?\d{4}$/)

This will match 123 345 5443, 123-345-5443, +1 123 345 5443, +12 123 345 5443.

[\s.-] here matches spaces and - and the rest of the pattern allows for matching of digits.

8. Regex for URL

7. Only contains alphabets

8. Only contains numbers

9. Only contains alphanumeric

In order to ensure there are only some category of characters, we need to include our matching pattern inside ^ and $. So to include only alphanumeric characters we can use:  

^[a-zA-Z0-9]*$

10. Only contains lowercase alphabets

If we only wanted to have a subset of these characters we can further restrict the regex to

^[a-z]*$

11. Only contains some characters

Let's we choose only some characters like say, @, -, ! we can change the pattern to

^[@\-!]*$

12. Contains some characters but does not contain some characters

The simplest option here is to use two regexes, one for positive match and another for negative match. Let's say we wanted to match @, -, ! but not $, we can do

var re1 = new RegExp(/^[@\-!]*$/)

var re2 = new RegExp(/^[^$]/)

var matchChars = function(s) { return re1.test('') && re2.test('') }

This will match only the strings which contain our permitted characters and not the blocked ones.

matchChars('@@--')
true
matchChars('@$--')
false
matchChars('@--@!')
true
matchChars('@--@fdfdf')
false

How much is a great User Experience worth to you?

Browsee helps you understand your user's behaviour on your site. It's the next best thing to talking to them.

Learn More Already have an account? Sign in.