Javascript Regular Expression - Character Classes

Character classes

Consider a practical task – we have a phone number like "+7(903)-123-45-67", and we need to turn it into pure numbers: 79035419441.

To do so, we can find and remove anything that’s not a number. Character classes can help with that.

A character class is a special notation that matches any symbol from a certain set.

For the start, let’s explore the “digit” class. It’s written as pattern:\d and corresponds to “any single digit”.

For instance, the let’s find the first digit in the phone number:

run
1
2
3
4
5
let str = "+7(903)-123-45-67";

let regexp = /\d/;

alert( str.match(regexp) ); // 7

Without the flag pattern:g, the regular expression only looks for the first match, that is the first digit pattern:\d.

Let’s add the pattern:g flag to find all digits:

run
1
2
3
4
5
6
7
8
let str = "+7(903)-123-45-67";

let regexp = /\d/g;

alert( str.match(regexp) ); // array of matches: 7,9,0,3,1,2,3,4,5,6,7

// let's make the digits-only phone number of them:
alert( str.match(regexp).join('') ); // 79035419441

That was a character class for digits. There are other character classes as well.

Most used are:

pattern:\d (“d” is from “digit”)
A digit: a character from 0 to 9.
pattern:\s (“s” is from “space”)
A space symbol: includes spaces, tabs \t, newlines \n and few other rare characters, such as \v, \f and \r.
pattern:\w (“w” is from “word”)
A “wordly” character: either a letter of Latin alphabet or a digit or an underscore _. Non-Latin letters (like cyrillic or hindi) do not belong to pattern:\w.

For instance, pattern:\d\s\w means a “digit” followed by a “space character” followed by a “wordly character”, such as match:1 a.

A regexp may contain both regular symbols and character classes.

For instance, pattern:CSS\d matches a string match:CSS with a digit after it:

run
1
2
3
4
let str = "Is there CSS4?";
let regexp = /CSS\d/

alert( str.match(regexp) ); // CSS4

Also we can use many character classes:

run
1
alert( "I love HTML5!".match(/\s\w\w\w\w\d/) ); // ' HTML5'

The match (each regexp character class has the corresponding result character):

Inverse classes

For every character class there exists an “inverse class”, denoted with the same letter, but uppercased.

The “inverse” means that it matches all other characters, for instance:

pattern:\D
Non-digit: any character except pattern:\d, for instance a letter.
pattern:\S
Non-space: any character except pattern:\s, for instance a letter.
pattern:\W
Non-wordly character: anything but pattern:\w, e.g a non-latin letter or a space.

In the beginning of the chapter we saw how to make a number-only phone number from a string like subject:+7(903)-123-45-67: find all digits and join them.

run
1
2
3
let str = "+7(903)-123-45-67";

alert( str.match(/\d/g).join('') ); // 79031234567

An alternative, shorter way is to find non-digits pattern:\D and remove them from the string:

run
1
2
3
let str = "+7(903)-123-45-67";

alert( str.replace(/\D/g, "") ); // 79031234567

A dot is “any character”

A dot pattern:. is a special character class that matches “any character except a newline”.

For instance:

run
1
alert( "Z".match(/./) ); // Z

Or in the middle of a regexp:

run
1
2
3
4
5
let regexp = /CS.4/;

alert( "CSS4".match(regexp) ); // CSS4
alert( "CS-4".match(regexp) ); // CS-4
alert( "CS 4".match(regexp) ); // CS 4 (space is also a character)

Please note that a dot means “any character”, but not the “absense of a character”. There must be a character to match it:

run
1
alert( "CS4".match(/CS.4/) ); // null, no match because there's no character for the dot

Dot as literally any character with “s” flag

By default, a dot doesn’t match the newline character \n.

For instance, the regexp pattern:A.B matches match:A, and then match:B with any character between them, except a newline \n:

run
1
alert( "A\nB".match(/A.B/) ); // null (no match)

There are many situations when we’d like a dot to mean literally “any character”, newline included.

That’s what flag pattern:s does. If a regexp has it, then a dot pattern:. matches literally any character:

run
1
alert( "A\nB".match(/A.B/s) ); // A\nB (match!)
header
1
2
3
4
5
6
7
8
9
10
11
Check <https://caniuse.com/#search=dotall> for the most recent state of support. At the time of writing it doesn't include Firefox, IE, Edge.

Luckily, there's an alternative, that works everywhere. We can use a regexp like `pattern:[\s\S]` to match "any character".

```js run
alert( "A\nB".match(/A[\s\S]B/) ); // A\nB (match!)
```

The pattern `pattern:[\s\S]` literally says: "a space character OR not a space character". In other words, "anything". We could use another pair of complementary classes, such as `pattern:[\d\D]`, that doesn't matter.

This trick works everywhere. Also we can use it if we don't want to set `pattern:s` flag, in cases when we want a regular "no-newline" dot too in the pattern.
header
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Usually we pay little attention to spaces. For us strings `subject:1-5` and `subject:1 - 5` are nearly identical.

But if a regexp doesn't take spaces into account, it may fail to work.

Let's try to find digits separated by a hyphen:

```js run
alert( "1 - 5".match(/\d-\d/) ); // null, no match!
```

Let's fix it adding spaces into the regexp `pattern:\d - \d`:

```js run
alert( "1 - 5".match(/\d - \d/) ); // 1 - 5, now it works
// or we can use \s class:
alert( "1 - 5".match(/\d\s-\s\d/) ); // 1 - 5, also works
```

**A space is a character. Equal in importance with any other character.**

We can't add or remove spaces from a regular expression and expect to work the same.

In other words, in a regular expression all characters matter, spaces too.

Summary

There exist following character classes:

  • pattern:\d – digits.
  • pattern:\D – non-digits.
  • pattern:\s – space symbols, tabs, newlines.
  • pattern:\S – all but pattern:\s.
  • pattern:\w – Latin letters, digits, underscore '_'.
  • pattern:\W – all but pattern:\w.
  • pattern:. – any character if with the regexp 's' flag, otherwise any except a newline \n.

…But that’s not all!

Unicode encoding, used by JavaScript for strings, provides many properties for characters, like: which language the letter belongs to (if it’s a letter) it is it a punctuation sign, etc.

We can search by these properties as well. That requires flag pattern:u, covered in the next article.