JavaScript Regular Expressions Explained

1. Regular expression creation

JavaScript has two ways to create regular expressions:

• The first method: write it directly through regular expression
• The second method: create a RegExp object through new RegExp('regular expression')

const re1 = /ABC\-001/;
const re2 = new RegExp('ABC\\-001');
re1; // /ABC\-001/
re2; // /ABC\-001/

Note that if you use the second way of writing, due to string escape issues, the two \ in the string are actually one \.

2. Usage Mode

2.1 Using Simple Mode

Simple patterns consist of direct matches found. For example, the pattern /abc/ matches only the characters 'abc' that appear simultaneously and in that order in a string. This would match "Hi, do you know your abc's?" and "The latest airplane designs evolved from slabcraft." In both examples above, the substring 'abc' is matched. It will not match the string "Grab crab" because it does not contain any 'abc' substring.

2.2 Using special characters

For example: the pattern /abc/ matches a single 'a' followed by zero or more 'b's (meaning zero or more occurrences of the previous item), followed by any character combination of 'c'. In the string "s'scbbabbbbcdebc", this pattern matches the substring "abbbbc".

3. Application

3.1 Splitting a string

Using regular expressions to split strings is more flexible than using fixed characters. The usual split code is:

'ad c'.split(' '); // ['a', 'd', '', '', 'c']

The above method cannot recognize consecutive spaces, so use regular expressions instead:

'ab c'.split(/\s+/); // ['a', 'b', 'c']

No matter how many spaces there are, the string can be split normally. Then add ',':

'a,b, c d'.split(/[\s\,]+/); // ['a', 'b', 'c', 'd']

Then add:

'a,b;; c d'.split(/[\s\,\;]+/); // ['a', 'b', 'c', 'd']

Therefore, regular expressions can be used to convert irregular input into correct arrays.

3.2 Grouping

In addition to determining whether a match occurs, regular expressions can also extract substrings. The substrings represented by () are the groups to be extracted. for example:

^(\d{4})-(\d{4,9})$ defines two groups respectively, which can directly extract the area code and local number from the matched string:

var re = /^(\d{4})-(\d{4,9})$/;
re.exec('0530-12306'); // ['010-12345', '010', '12345']
re.exec('0530 12306'); // null

After a successful match, the exec() method returns an array. The first element is the entire string matched by the regular expression, and the subsequent strings represent the substrings that matched successfully.

The exec() method returns null if the match fails.

3.3 Greedy Matching

Note that regular expression matching is greedy by default, that is, it matches as many characters as possible. As follows, match the 0 after the number:

var re = /^(\d+)(0*)$/;
re.exec('102300'); // ['102300', '102300', '']

Because \d+ uses greedy matching, it directly matches all the following 0s, so 0* can only match the empty string.

You must make \d+ use non-greedy matching (that is, matching as little as possible) to match the following 0. Adding a ? will make \d+ use non-greedy matching:

var re = /^(\d+?)(0*)$/;
re.exec('102300'); // ['102300', '1023', '00']

3.4 Regular Expression Flags

g Global search.
i Case-insensitive search.
m Multi-line search.
y Perform a "sticky" search, where the match starts at the current position in the target string. You can use the y flag.

3.5 test() method

The test() method is used to check whether a string matches a pattern. If the string contains matching text, it returns true, otherwise it returns false.

var re = /^(\d{4})-(\d{4,9})$/;
re.test('0530-12321'); // true
re.test('0530-123ab'); // false
re.test('0530 12321'); // false

4. Commonly used regular expressions (reference)

Verify email address: ^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
Verify ID number (15 or 18 digits): ^\d{15}|\d{}18$
Mainland China mobile phone number: 1\d{10}
Mainland China landline number: (\d{4}-|\d{3}-)?(\d{8}|\d{7})
Mainland China postal code: [1-9]\d{5}
IP address: ((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)
Date (year-month-day): (\d{4}|\d{2})-((1[0-2])|(0?[1-9]))-(([12][0-9])|(3[01])|(0?[1-9]))
Date (month/day/year): ((1[0-2])|(0?[1-9]))/(([12][0-9])|(3[01])|(0?[1-9]))/(\d{4}|\d{2})
Verify number: ^[0-9]*$
Verify n-digit number: ^\d{n}$
Verify that at least n digits are present: ^\d{n,}$
Verify the number of mn digits: ^\d{m,n}$
Verify that the number starts with zero and non-zero: ^(0|[1-9][0-9]*)$
Verify that there are 1-3 decimal places in a positive real number: ^[0-9]+(.[0-9]{1,3})?$
Verify a non-zero positive integer: ^\+?[1-9][0-9]*$
Verify that the integer is non-zero: ^\-[1-9][0-9]*$
Verify non-negative integer (positive integer + 0) ^\d+$
Verify non-positive integer (negative integer + 0) ^((-\d+)|(0+))$
Verify that the length of the character is 3: ^.{3}$
Verify a string consisting of 26 English letters: ^[A-Za-z]+$
Verify a string consisting of 26 uppercase English letters: ^[AZ]+$
Verify a string consisting of 26 lowercase English letters: ^[az]+$
Verify a string consisting of numbers and 26 English letters: ^[A-Za-z0-9]+$

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!