Js Regular Expression Advanced Notes

Regular introductory notes study

3. Advanced Regular Expressions

Introduction to understanding - JavaScript match() method

  • Definition and Usage

The match() method retrieves a specified value within a string, or finds a match for one or more regular expressions.

Note: The match() method will retrieve the string String Object to find one or more texts that match the regexp. The behavior of this method depends heavily on whether the regexp has the flag g. If the regexp does not have the flag g, then the match() method can only perform a match on the stringObject. If no matching text is found, match() will return null. Otherwise, it returns an array with information about the matching text it finds.

  • grammar
string.match(regexp)

Introduction to understanding - JavaScript exec() method

  • Definition and Usage

The exec() method is used to retrieve a match of a regular expression in a string.

Returns the matching value if there is a matching value in the string, otherwise returns null.

  • grammar
RegExpObject.exec(string)

3.1 Grouping - Grouping allows you to process a series of tokens together

1. (ABC) Capture Grouping - Group multiple tokens in the same group and create a capture grouping, which is used to create substrings or references.

var reg = /(hh)/g;

console.log(reg.test('hhdasd hh dasdhhasd hh')); // output true
console.log(reg.test('hdsadas')); // output false

Grouping has a very important function - capturing data. So () is called capture grouping and is used to capture data. When we want to extract key data from the matched data, we can use grouping.

var reg = /(hh)/g;

console.log('hhdasd hh dasdhhasd hh'.match(reg)); //output ['hh','hh','hh','hh']
  • Extract the year, month and day in the date of birth, for example 2000-01-01 Extract 2000 01 01
var regs = /(\d{4})[\-\/](\d{1,2})[\/\-](\d{1,2})/g;

console.log(regs.exec('2000-01-01')); // output ['2000-01-01', '2000', '01', '01', index: 0, input: '2000-01-01', groups: undefined]
console.log(RegExp.$1); // output 2000
console.log(RegExp.$2); // output 01
console.log(RegExp.$3); // output 01

Replenish:

$N : $1-$9 stores the matching results of the most recent 9 regular expressions in the regular expression, and these results are arranged in the order in which the sub-matches appear.

  • The phone number after the area code is extracted, such as 0731-75855, 86-138888888, tel:1384466545…
let phones = ['0731-75855', '86-138888888', 'tel:1384466545'];
phones.forEach((o) => {
	console.log(/\w+[\-:](\d+)/g.exec(o)[1]); // Output in sequence 75855 138888888 1384466545
});
  • Extract the value in the HTML tag, for example <p>hello world!</p> Extract hello world!
console.log(/<\w+>(.*)<\/\w+>/g.exec('<p>hello world!</p>')[1]); // output hello world!

Replenish:

Consider a situation where the extracted tags do not conform to the specification, such as <p></span> , then how to ensure that the extracted tags conform to the specification?

  1. The backreference of the group, use \N to refer to the group numbered N
    • The \1 here is the first grouping (\w+)
console.log(/<(\w+)>(.*)<\/\1>/g.exec('<p>hello world!</span>'));// output null

2. Group several tags together without creating capture groups

(?: expression), so that the data is not captured, and the grouping function can be used

console.log('hahaha haa hah!'.match(/(?:ha)+/g)); // output ['hahaha', 'ha', 'ha']

Look-ahead assertions look left to right, look-behind assertions look right to left

3.2 Lookahead Assertion

1. Positive Lookahead Assertion - Match the group following the main expression without including it in the result.

(?=expression), refers to looking to the right at a certain position, indicating that the right side of the position must be able to match the expression

console.log('1px 2rpx 3em 4rem 5px 6vh 7pt'.match(/\d(?=px)/g)); // output ['1', '5']
  • Use forward lookahead assertion for password strength verification, requiring at least one uppercase and lowercase letters and no less than 8 characters
console.log(/(?=.*?[a-z])(?=.*?[A-Z]).{8,}/g.test('123456aA')); // output true

console.log(/(?=.*?[a-z])(?=.*?[A-Z]).{8,}/g.test('12356aA')); // output false, less than 8 digits
console.log(/(?=.*?[a-z])(?=.*?[A-Z]).{8,}/g.test('123456aa')); // output false, missing capitalization
console.log(/(?=.*?[a-z])(?=.*?[A-Z]).{8,}/g.test('123456AA')); // output false, missing lowercase

2. Reverse Lookahead Assertion - Specifies a group that cannot be matched after the main expression (if it matches, the result will be discarded)

The role of (?! expression) is to ensure that a character cannot appear on the right.

console.log('hh+ dshh+ hh+das '.match(/hh(?!\+)/g)); // Output null, because + appears on the right side of hh, where \+ is the + character after escape, not a quantifier + === {1, }

console.log(/hh(?!\+)/g.test('hh+ dshh+ hh+das')); // output false
console.log(/hh(?!\+)/g.test('hhhhhdasdga')); // output true because + does not appear
  • Match data that is not 163 mailboxes
console.log(/\w+@(?!163)\w(?:\.\w+)+$/g.test('123@qq.com')); // output true
console.log(/\w+@(?!163)\w(?:\.\w+)+$/g.test('1sad23@qq.com.cn')); // output true

console.log(/\w+@(?!163)\w(?:\.\w+)+$/g.test('1sad23@163.com.cn')); // output false

3.3 Lookbehind assertions

1. Forward lookbehind assertion - matches the group before the main expression without including it in the result

(?<=expression), refers to looking to the left at a certain position, indicating that the left side of the position must match the expression

console.log(/(?<=open).+/g.test('Zhang San')); // output true
console.log(/(?<=open).+/g.test('Li Si')); // output false

2. Reverse lookbehind assertion - specifies a group that cannot be matched before the main expression (if it matches, the result will be discarded)

(?<! expression), refers to looking to the left at a certain position, indicating that the left side of the position cannot match the expression

  • matches data within the # symbol
console.log(/(?<!#)#([^$]+)#(?!#)/g.exec('#132146asdas#')[1]); // output 132146asdas
console.log(/(?<!#)#([^$]+)#(?!#)/g.exec('213#132146asdas#21344asd')[1]); // output 132146asdas

console.log(/(?<!#)#([^$]+)#(?!#)/g.exec('213132146asdas#21344asd')); // output null

4. Practice website recommendation

  • Regular practice URL: https://www.codejiaonang.com/
  • Regular online test website: https://regexr-cn.com/

Take notes for study only, please point out if there is any inadequacy or error

Tags: Javascript Front-end regex

Posted by wolfraider on Sat, 03 Sep 2022 04:13:18 +0300