JavaScript regular expression

What is a regular expression?
Regular expressions are objects that describe character patterns. Regular expressions are search patterns formed by a sequence of characters.
Syntax of regular expression: / regular expression body / modifier (optional)

For example:

const exp = /abc/i

/abc/i is a regular expression, where abc is a regular expression body (for regular matching), and i is a modifier, indicating that regular matching is case insensitive.
The meaning of this expression matches the string containing abc, where abc is not case sensitive.

const exp = /abc/i

console.log(exp.test('abc'))	//If abc is included in the string, return true
console.log(exp.test('abcd'))	//If abc is included in the string, return true
console.log(exp.test('Abcd'))	//The string contains Abc and returns true
console.log(exp.test('bcd'))	//abc is not included in the string, and false is returned
console.log(exp.test('ab2cd'))	//abc is not included in the string, and false is returned

1. Modifier

Modifier effect
iPerform case insensitive matching
gPerform a global match (find all matches instead of stopping after the first match is found)
mPerform multiline matching

2. Square brackets

Square brackets are used to find characters in a range:

[abc]Find any character between square brackets.
[^abc]Find any character that is not a character in square brackets.
[0-9]Find any number from 0 to 9.
[a-z]Find any character written from a to z.
[A-z]Find any character from uppercase A to lowercase z.

Note that square brackets are only used to find a character. If you want to find a string containing abc or 123, you can use square brackets and parentheses together:

let exp = /[(abc)(123)]/
console.log(exp.test('abcd')); 	//true

We can also use another method to achieve the same effect:

let exp = /(abc|123)/
console.log(exp.test('abcd')); 	//true

3. Metacharacter

Metacharacters are characters with special meanings

^Match the beginning of the string (when ^ appears in square brackets, it means matching characters outside the brackets)
$Match end of string
.Finds a single character, except for line breaks and line terminations.
\wFind numbers, letters, and underscores.
\WFind non word characters.
\dFind a number.
\DFind non numeric characters.
\sFind white space characters.
\SFind non white space characters.
\bMatch word boundaries.
\BMatches non word boundaries.
\0Find NULL character.
\nFind line breaks.
\fFind page feed.
\rFind carriage return.
\tFind tabs.
\vFind vertical tabs.
\xxxFind the character specified in octal number xxx.
\xddFinds the character specified in hexadecimal number dd.
\uxxxxFinds Unicode characters specified in hexadecimal number xxxx.

Bold metacharacters need us to remember that other metacharacters are not used frequently.

4. Quantifier

n+Matches any string that contains at least one n.
n*Matches any string containing zero or more n's.
n?Matches any string containing zero or one n.
n{X}Matches a string containing a sequence of X n.
n{X,}X is a positive integer. The previous pattern n matches when it occurs at least x times in a row.
n{X,Y}X and Y are positive integers. The previous pattern n appears continuously at least x times and matches at most Y times.
?=nMatches any string followed by the specified string n.
?!nMatches any string that is not immediately followed by the specified string n.

Note that all n here can be a character or a subexpression.

5. Application of regular expressions

5.1 matching telephone number:

The format is ******* - ****** or ******, where * represents a number

let exp1 = /^\d{3}-\d{4}(-\d{4})?$/ 
let exp2 = /^\d{3}(-\d{4}){1,2}$/ 
console.log(exp1.test('176-5465-8777'));	//true
console.log(exp2.test('123-4567'));			//true
console.log(exp1.test('17654658777'));		//false
console.log(exp2.test('1234567'));			//false

5.2 matching date:

The format is year / month / day or year month day

let exp = /^(\d+\/\d{1,2}\/\d{1,2})|(\d+-\d{1,2}-\d{1,2})$/
console.log(exp.test('2019-02-24'));	//true
console.log(exp.test('2019/02/24'));	//true
console.log(exp.test('2019-02/24'));	//false

Note that we cannot let exp = /^\d+[/-]\d{1,2}[/-]\d{1,2} $/. This time, the result of exp.test('2019-02/24 ') is true

Keywords: Javascript Front-end regex

Added by Sterculius on Sat, 26 Feb 2022 10:26:49 +0200