DEV Community

Augustus Otu
Augustus Otu

Posted on • Edited on

Js regex cheatsheet Part 1

Hey there and welcome to this quick tutorial. I woke up to a mail about today being a year's anniversary since joining this awesome community, so I decided to write something in celebration.

This is just a little cheat sheet you can bookmark and check whenever you want to write a regular expression for that awesome program you are writing.

I won't bore you with much info as I assume you already now what regular expressions are. If not, they are patterns that you can use to manipulate text or match character combinations in strings. Read more

Let's dive right in shall we.

When writing regular expressions, we can use a literal like

let kofi = /ama/;
Enter fullscreen mode Exit fullscreen mode

or we can use the constructor like

let kofi  = new RegExp("ama");
Enter fullscreen mode Exit fullscreen mode

Both of these are valid and mean the same thing. So you can use any format.

Note that the pattern used in the constructor is always a string or better yet wrapped in quotes. Also when using literals, if by any case there will be special characters like question marks, plus signs in your pattern you have to make sure a backslash "\" precedes them as they have meanings in regular expressions as you are about to see.

I will be using two methods with regular expressions;

  1. RegExp.test();
  2. RegExp.exec();

RegExp.test() is a method that tests for your pattern and returns either true or false. If it finds your pattern in the given string, it returns true. if not, false.

RegExp.exec() is a method that searches for a match in a string and returns information when it finds the match, as an array and null when it doesn't find a match.

RegExp.test()

For the method test these are the ways you can use it


/**
This finds the exact match in a string. Thus the string must contain "abc" in the exact order or sequence.
**/
/ama/.test("lamal"); //returns true
/ama/.test("almal"); //returns false

/**
This next one lets you find a range of characters in a string and is one of my favourites to use.
**/
/[196]/.test("i was born in 1996"); //returns true

//or

//This means all the numbers from 0-9, thus 0123456789.
/[0-9]/.test("i was born in 1996");  //returns true


//This returns false because there is neither 0,4 nor 3 in the string
/[043]/.test("i was born in 1996"); //returns false

Enter fullscreen mode Exit fullscreen mode

Let's catch a breather here. Remember the special characters I mentioned earlier on? We will get to that real quick but first, let's look at a couple of common shortcuts for writing expressions.

Please take note of these

\d  //returns true if any number is found in a given string "19"
\D //returns true if there aren't any numbers in a string "the"

\w //returns true if any alphanumeric is found in a given string "u2"
\W //returns true if there aren't any alphanumeric in a given string  "(-)"

\s //returns true if there is any whitespace thus space, tab and newline " "
\S //returns true if there is any non-whitespace character "khi "

. //returns true for any character except a new line

Enter fullscreen mode Exit fullscreen mode

A special character like a caret ^ is used for negative matching a range of values. This means if any other value exists in a given string other than the ones it precedes in a pattern, return true.

/[^1996]/.test("199619961996") //returns false

/[^1996]/.test("1996199619967") //returns true because of 7
Enter fullscreen mode Exit fullscreen mode

And now to our special characters

/**
Question marks are used for optional matching, meaning the value they come right after can be present in a given string or not and in this case was the letter "u"
**/
/favou?rite/.test("favourite"); // returns true
/favou?rite/.test("favorite"); //returns true

/**
Plus signs are used to indicate whether the value it comes after will appear once or more times in a given string
**/
/vo+/.test("volvo"); //returns true

/\d+/.test("20019"); //returns true

/\d+/.test("volvo"); //returns false

/\d+/.test(" "); //returns false

/**
A star also does the same as a plus but also returns true when there is no match too
**/

/\d*/.test("volvo"); //returns true


/**
Braces are used to make sure a pattern is represented exactly a number of times. 
It can also be used to specify a range. A good example is when you want to validate dates and time. {3} means the value it comes after must appear exactly 4 times in a given string. 
{1,3} means the value it comes after must be present at least once and at most 3 times. In the example below, the first set means any digit given to represent a day can be either "3" or "30" thus one or two digits as there is only up to 31 days in a month.
 The next means the month can be either "4" or "12" as there is only up to 12 months in a year and the last accepts exactly 4 digits.
**/
/\d{1,2}-\d{1,2}-\d{4}/.test("3-01-1996"); //returns true

Enter fullscreen mode Exit fullscreen mode

That will be it for part one, part two will tackle RegExp.exec() and more advanced regular expressions that will help you build your own expressions with ease. So bye for now, catch you soon on part two. Hope this helped you understand a bit of what you can do with regular expressions.

Comments are welcome😊

Top comments (0)