Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript Regular Expression Beginner Guide.
// The case of string characters don't matter in case-insensitive search.
var regexInsensitive = new RegExp('abc','i')
console.log(regexInsensitive.test('Abc')); // returns true
/*************************************************************************
Character set [xyz] — 
A character set is a way to match different characters in a single position,
it matches any single character in the string from characters present inside the brackets.
*************************************************************************/
console.log(' ### Character set [xyz] ###');
var charsetRegex = /[btd]ear/;
console.log(charsetRegex.test('tear')); // returns true
console.log(charsetRegex.test('bear')); // return true
console.log(charsetRegex.test('fear')); // return false
console.log(charsetRegex.test('dear')); //return true
var charsetRegex1 = /[abc]bc.com/;
console.log(charsetRegex1.test('bbc.com')); // return true
console.log(charsetRegex1.test('bac.com')); // return false
console.log(charsetRegex1.test('abc.com')); // reutrn true
console.log(charsetRegex1.test('bbc')); // return false
/*************************************************************************
Negated character set [^xyz] — 
It matches anything that is not enclosed in the brackets.
[^xyz]- Matches all character without xyz.
*************************************************************************/
console.log('### Negated character set [^xyz] ###');
var negRegex = /[^bt]ear/;
console.log(negRegex.test('tear')); // returns false
console.log(negRegex.test('bear')); // return false
console.log(negRegex.test('fear')); // return true
/*************************************************************************
Ranges [a-z] — 
Suppose we want to match all of the letters of an alphabet in a single position,
we could write all the letters inside the brackets,
but there is an easier way and that is ranges.
For example: [a-h] will match all the letters from a to h.
Ranges can also be digits like [0-9] or capital letters like [A-Z].
*************************************************************************/
console.log('### Ranges [a-z] ###');
var rangeRegex = /[a-z]ear/;
console.log(rangeRegex.test('tear')); // returns true
console.log(rangeRegex.test('bear')); // return true
console.log(rangeRegex.test('fear')); // return true
console.log('### Meta- Character ###');
/*************************************************************************
Meta-characters — 
Meta-characters are characters with a special meaning.
There are many meta character but I am going to cover the most important ones here.
\d — Match any digit character ( same as [0-9] ).
\w — Match any word character. A word character is any letter, digit, and underscore.
(Same as [a-zA-Z0–9_] ) i.e alphanumeric character.
\s — Match a whitespace character (spaces, tabs etc).
\t — Match a tab character only.
\b — Find a match at beginning or ending of a word. Also known as word boundary.
. — (period) Matches any character except for newline.
\D — Match any non digit character (same as [^0–9]).
\W — Match any non word character (Same as [^a-zA-Z0–9_] ).
\S — Match a non whitespace character.
*************************************************************************/
console.log('### Quantifiers ###');
/*************************************************************************
Quantifiers: — Quantifiers are symbols that have a special meaning in a regular expression.
*************************************************************************/
/*************************************************************************
+ — Matches the preceding expression 1 or more times.
(Must Match One Return true , otherwise false);
*************************************************************************/
console.log('+ Pre: ');
var regex1 = /li+/;
console.log(regex1.test('life'));// true
console.log(regex1.test('liiiiiiife'));// true
console.log(regex1.test('love'));// false
console.log(regex1.test('money'));// false
/*************************************************************************
* —Matches the preceding expression 0 or more times.
(Can escapse the pre letter, Optional matching)
*************************************************************************/
console.log('* Pre: ');
var regex2 = /go*d/;
console.log(regex2.test('g')); //false
console.log(regex2.test('gd')); // true
console.log(regex2.test('god')); // true
console.log(regex2.test('good')); // true
console.log(regex2.test('goood')); // true
/*************************************************************************
? — Matches the preceding expression 0 or 1 time, that is preceding pattern is optional.
*************************************************************************/
console.log('? Pre: ');
var regex3 = /goo?d/;
console.log(regex3.test('god'));// true
console.log(regex3.test('good'));// true
console.log(regex3.test('goood'));// false
/*************************************************************************
^ — Matches the beginning of the string, the regular expression that follows
it should be at the start of the test string.
i.e the caret (^) matches the start of string.
*************************************************************************/
console.log('^ matches Beginning Of The String');
var regex4 = /^gun/;
console.log(regex4.test('gunwood'));// true
console.log(regex4.test('bad'));// false
console.log(regex4.test('tag'));// false
/*************************************************************************
$ — Matches the end of the string, that is the regular expression that
precedes it should be at the end of the test string. The dollar ($) sign
matches the end of the string.
*************************************************************************/
console.log('$ — Matches the end of the string ');
var regex5 = /.com$/;
console.log(regex5.test('test@testmail.com'));// true
console.log(regex5.test('test@testmail.co'));// false
/*************************************************************************
{N} — Matches exactly N occurrences of the preceding regular expression.
*************************************************************************/
console.log('{N} - Preceding');
var regex6 = /go{2}d/;
console.log(regex6.test('good')); // true
console.log(regex6.test('god')); // false
/*************************************************************************
{N,} — Matches at least N occurrences of the preceding regular expression.
*************************************************************************/
console.log('{N,} - Preceding');
var regex7 = /go{2,}d/;
console.log(regex7.test('god')); // false
console.log(regex7.test('good'));// true
console.log(regex7.test('goood'));// true
console.log(regex7.test('gooood'));// true
/*************************************************************************
{N,M} — Matches at least N occurrences and at most M occurrences of the preceding regular expression (where M > N).
*************************************************************************/
console.log('{N,M} - Preceding');
var regex8 = /go{1,2}d/;
console.log(regex8.test('god'));// true
console.log(regex8.test('good'));// true
console.log(regex8.test('goood'));// false
/*************************************************************************
Alternation X|Y — Matches either X or Y. For example:
*************************************************************************/
console.log('Alternation X|Y');
var regex9 = /(green|red) apple/;
console.log(regex9.test('green apple')); // true
console.log(regex9.test('red apple')); // true
console.log(regex9.test('blue apple')); // false
/*************************************************************************
Advanced
*************************************************************************/
/**
(x) — Matches x and remembers the match. These are called capturing groups.
This is also used to create sub expressions within a regular expression
\1 remembers and uses that match from first subexpression within parentheses.
**/
console.log('(x) Matches x and remembers the match');
var regex10 = /(foo)bar\1/;
console.log(regex10.test('foobarfoo')); // true
console.log(regex10.test('foobar')); // false
/** (?:x) — Matches x and does not remember the match. These are called non capturing groups.
Here \1 won’t work, it will match the literal \1. ***/
console.log('(?:x) — Matches x and does not remember the match.');
var regex11 = /(?:foo)bar\1/;
console.log(regex11.test('foobarfoo'));// false
console.log(regex11.test('foobar'));// false
console.log(regex11.test('foobar\1'));// true
/** REGEX PRACTICING **/
/** Match any 10 digit number **/
console.log('10 Digit.')
var regexDigit = /^\d{10}$/;
console.log(regexDigit.test('9995484545')); // true
/** Match a date with following format DD-MM-YYYY or DD-MM-YY **/
var dateRegex = /^([0-3][0-9]-)([0-1][0-2]-)(\d{2})?\d{2}$/;
console.log(dateRegex.test('01-02-10'));
console.log(dateRegex.test('11-12-2010'));
console.log(dateRegex.test('11-30-10'));
/** Matching Anything But a Newline **/
console.log('Matching Anything But a Newline');
var regex = /^(.{3}\.){3}.{3}$/;
console.log(regex.test('123.456.abc.def')); // true
console.log(regex.test('1243.446.abc.def'));// false
console.log(regex.test('abc.def.ghi.jkl')); // true
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.