Table of Contents
When it comes to Regular Expressions developers are divided into three groups. First are those who have no clue what are you talking about. These are mostly newbies without previous experiences. Second group are skilled developers who heard about Regex and don’t want to have anything in common with it. Web designers playing with some JavaScript here and there when they have to also often belong to this group. After few examples you will understand their reasons. Finally, the third group are the real masters of the trade. The guys and gals not only faced Regex, they’ve also learned it and mastered it through practice.
Understanding Regex in such a way you can read it and use as you want should be a “super power” of every web developer and programmer. If you are a web designer serious about his job, there is no excuse to not to learn Regex. Yes, it can look like freakin’ nightmare at the first moment. Yes, it can be harder to learn. But! When you learn it your work will become much easier. What’s more, just the fact of knowing Regex will move you above your competitors. By the way, Regex can be used in many ways in JavaScript (form validation, etc.) via literal or RegExp constructor. So, let’s start.
What is Regex?
What actually are Regular Expressions (Regex)? In short, they are a method or a way you can save a pattern, which can be then used with strings to check (compare) if a string matches the pattern. Regex allows you to be as vague or specific as you want. For example, you can check only for letters or numbers or words. On the other hand, you can go deeper and check for number of characters, their position, if they are upper or lower case and much much more.
How it works?
All these “properties” are parts of pattern you can either store in a variable or use right away in if statements and loops. Since there are many various specifications you can target by Regex, I will include a list of special sequences, special characters, repetitions and flags below so you will have them all in one place. Before that, let’s explain what these terms mean. Special sequences cover digits, characters and whitespace. Special characters cover page breaks, new lines and tabs. Flags are written at the end of expression and modify how its behavior. Below is the list we talked about.
Special sequences:
- . - dot - \d – any digit: [0-9] - \D – any character (not a digit): [^0-9] - \w – any digit, a letter (lowercase or capital) or underscore: [0-9a-zA-Z_] - \W – any character which is not a digit, a letter, and an underscore: [^0-9a-zA-Z_] - \s – any whitespace: [ \t\r\n\v\f] - \S – any non-whitespace: [^ \t\r\n\v\f] - note: “^” will negate whole set like in examples in list
Special characters:
- \n – new line (0x0A) - \f – page break (0x0C) - \r – “carriage return” (0x0D) - \t – horizontal tab character (0×09) - \v – vertical tab character (0x0B)
Repetitions:
- {n} – exactly n occurrences of the preceding expression
- {n,} – n or more occurrences of the preceding expression
- {n,m} – from n to m occurrences of the preceding expression
- ? – preceding item is optional (may occur 0 or 1 time)
- + – preceding element can occur one or more times
- * – preceding element can occur zero or more times
Flags:
- g – search globally - i – ignore case sensitive - m – multi-line input, starts with “^”, ends with “$”; in other words processing is applied to a string containing multiple lines
Before you start playing with available sequences or characters, you have to know how to write Regex. Fortunately, that’s easy. Every pattern starts and ends with a slash.
Regex:
/ expression goes here /
Between these slashes you can either use parenthesis to create a group or type in the expression right away like following the example above.
Regex:
/( expression goes here )/
If you want to create an expression for a specific sequence, like numbers from 0 to 9 or letters from a to z, you have to write it between square brackets. This will create a character set.
Regex:
/[ expression goes here ]/ // only small letters /[a-z]/ // only digits /[0-9]/ // only capital letters /[A-Z]/
You can also create more complex sets by combining different sequences.
Regex:
// all small and capital letters /[a-zA-Z]/ // all small and capital letters and also digits /[a-zA-Z0-9]/
Important thing to know is that if you use the examples above, regular expression will stop searching after first occurrence that suits the pattern. However, if you want it to keep going until it reaches the end of string, you have to use flag for “global” search.
Regex:
// all small and capital letters in whole string /[A-Za-Z]/g // digits in whole string /[0-9]/g
Another flag you can use is to ignore cases. It is specified as “i”. If you want to use multiple flags at once, like ignore cases and search globally, just write them next to each other – no space or any additional characters.
Regex:
// All capital letters while ignoring cases with global search /[A-Z]/ig
Let’s take a look at how you can use Regex in JavaScript. As I mentioned above, you have two options – literal or Regexp constructor (programmers use both terms in discussions – Regex and Regexp). I have some good news. You already know how to use Regex via literal – like in examples above (with slashes). The second way, through constructor, is define new Regexp object and use expression and flags as parameters. Both are written in quotes.
Regex:
new Regexp(“expression goes here”, “flag goes here”);
// small letters, search globally
new Regexp(“a-z”, “g”);
// one letter followed by digit, global search
new Regexp(“([a-z]{1})([0-9])”);
Let’s now use variable to store a string of text we want to search in and another one to store expression. In order to do this we have to learn about methods included in Regexp object. They are four of them. Well, three. One was depreciated. These are test(), exec() and toString(). We are interested only in first two. They behave almost the same way, but there is a little difference. test() will return true or false depending on the match. exec() will return matched string (in array) or null.
JavaScript:
// variable for string var string = “Have fun and break things.”; // variable for expression var pattern = /fun/; // variable for result var resultB = pattern.test(string); // true var resultA = pattern.exec(string); // [“fun”]
This is all for the first part. In the next one we will take a look at more complex examples of Regex in JavaScript. Until then, practice. Great online tool for learning and practicing Regex is RegExr. It also has a reference documentation, cheatsheet and many examples you can look at, so check it out.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
