Before the road of the front, correct the expression Magic (middle)---capturing group, reverse reference

Directory

• Chapter II-02: Before the correct expression Magic (middle)---capturing group, reverse reference
  • First, predefined character classes
  • Second, group
  • Third, or operator
  • Four, reverse reference
    • 4-1 capturing groups
    • 4-2 Reverse Reference

Chapter II-02: Before the correct expression Magic (middle)---capturing group, reverse reference

From: "JavaScript ninja Cheats"

Front End Road Series continue to talk about regular expressions!

First, predefined character classes

Represents a character set that matches a class, provided by the syntax of a regular expression. As follows:

pre-scheduled terms	Match Content
.	Match any character outside of the new line \ n
\s	White space characters
\s	Non-whitespace characters
\w	A character that can form a word
\w	Characters that cannot form a word
\d	Digital
\d	Non-digital
\b	The boundary of a word
\b	is not the boundary of a word
\ t	Horizontal tab
\v	Vertical tab
\f	Page break
\ r	Carriage return character
\ n	Line break
\CA: \cz	controls, such as \CM, match a ctrl+m
\x0000: \XFFFF	Hexadecimal Unicode code
\x00: \xff	Hexadecimal ASCII code

Below, we will write a small Demo according to the table above

1-1: Meaning of "."

All characters except spaces and line breaks eg:

var reg = /./gvar str = 'x'var str2 = 123var str3 = ' 'var str4 = '\n'var str5 = '\r'var res = reg.test(str) // truevar res2 = reg.test(str2) // truevar res3 = reg.test(str3) // falsevar res4 = reg.test(str4) // falsevar res5 = reg.test(str5) // false

1-2: The meaning of "\s"

Match white space character (space) eg:

var reg = /\s/gvar str = 'x'var str2 = ' 'var str3 = '\n'var str4 = '\r'var str5 = '\r\n'var res = reg.test(str)    // falsevar res2 = reg.test(str2)  // truevar res3 = reg.test(str3)  // falsevar res4 = reg.test(str4)  // truevar res5 = reg.test(str5)  // true// 又疑惑了 ？？？// 无法解释？ n 代表 newLine 新行， r 代表 return 换行// 只能这么解释了，newline 是因为这一行写满了没有空白了， return 是强行换行，所以一定是有空白的。

1-3: The meaning of "\s"

Match non-whitespace characters (space) eg:

var reg = /\S/gvar str = 'x'var str2 = ' 'var res = reg.test(str)    // truevar res2 = reg.test(str2)  // false

1-4: The meaning of "\w"

Match the character (world) that can form the word (match letters, numbers, underscores) eg:

var reg = /\w/gvar str = 'age'var str2 = 'a1ge'var str3 = 'a ge'var str4 = 'a&ge'var str5 = 123var res = reg.test(str)    // truevar res2 = reg.test(str2)  // truevar res3 = reg.test(str3)  // truevar res4 = reg.test(str4)  // truevar res5 = reg.test(str5)  // falsevar arr = [res,res2,res3,res4,res5]for(let i = 0; i<arr.length; i++) {    console.log(arr[i])}

1-5: The meaning of "\w"

Matches a character that does not make a word (world) eg:

var reg = /\W/gvar str = 'age'var str2 = 'a1ge'var str3 = 'a ge'var str4 = 'a&ge'var str5 = 123var res = reg.test(str)    // falsevar res2 = reg.test(str2)  // falsevar res3 = reg.test(str3)  // truevar res4 = reg.test(str4)  // falsevar res5 = reg.test(str5)  // falsevar arr = [res,res2,res3,res4,res5]for(let i = 0; i<arr.length; i++) {    console.log(arr[i])}// 有疑惑  为啥呢？// str3 中出现了空格 确实不能组成单词

1-6: The meaning of "\d"

Match number (digit) eg:

var reg = /\d/gvar str = 123var str2 = 'xxx'var res = reg.test(str)     // truevar res2 = reg.test(str2)   // false

1-7: The meaning of "\d"

Match non-digital (Digit) Eg:

var reg = /\D/gvar str = 123var str2 = 'xxx'var res = reg.test(str)     // falsevar res2 = reg.test(str2)   // true

1-7: The meaning of "\b"

Match word boundaries (boundary) (Letters, numbers, underscores) eg:

var reg = /\b/gvar str = 123var str2 = '@'var str3 = '_'var str4 = '&'var str5 = 'xxx'var res = reg.test(str)     // truevar res2 = reg.test(str2)   // falsevar res3 = reg.test(str3)   // truevar res4 = reg.test(str4)   // falsevar res5 = reg.test(str5)   // true

1-8: The meaning of "\b"

Match a non-word boundary (boundary) eg:

var reg = /\B/gvar str = 123var str2 = '@'var str3 = '_'var str4 = '&'var str5 = 'xxx'var res = reg.test(str)     // truevar res2 = reg.test(str2)   // truevar res3 = reg.test(str3)   // falsevar res4 = reg.test(str4)   // truevar res5 = reg.test(str5)   // true

Second, group

If you want to apply an operator to a set of strings, you can use (), which is the concept of grouping.

For example (ab)+ , a match is one or more string AB
When grouping with parentheses, a so-called捕获(capture)

Let's give an example to illustrate:
eg

// demo-1var reg = /(ab)+/gvar str = 'bababababbababababaaabbb'var res = str.match(reg)    // ["abababab", "abababab", "ab"]// demo-2var reg = /(ab)/gvar str = 'bababababbababababaaabbb'var res = str.match(reg)    // ["ab", "ab", "ab", "ab", "ab", "ab", "ab", "ab", "ab"]

Greed matches strings that conform to the AB * N rule consecutively

Third, or operator

A relationship, such as a a|b, that matches a or B character.
eg

// demovar reg = /a|b/gvar str = 'abcd'var str2 = 'aabbccdd'var res = str.match(reg) // ["a", "b"]var res2 = str2.match(reg) // ["a", "a", "b", "b"]

Four, reverse reference

A reverse reference to a capture defined in a regular expression refers to the 将捕获作为正则表达式中能够成功匹配术语时的候选字符串 term notation that is appended to the backslash followed by a number of captures to be referenced.
eg

var str = '<p>1</p>'var str2 = '<strong>2</strong>'var reg = /<(\w+)>(.+)<\/\1>/var res = str.match(reg)var res2 = str2.match(reg)

Or is there doubt? Why is it?
Often a definition can not be understood, it can only be understood in exchange for understanding the way that these cannot be understood.
Another special explanation:
捕获组捕获到的内容，不仅可以在正则表达式外部通过程序进行引用，也可以在正则表达式内部进行引用，这种引用方式就是反向引用。
One more question: 捕获组 What does it mean?

4-1 capturing groups

What is a capturing group?

A capturing group is a regular expression that matches a neutron expression 内容 , and is saved in a group in memory or in a 数字编号 显式命名 convenient later reference. Of course, such a reference can be either inside the regular expression or outside the regular expression.

There are two forms of a capturing group, one is a normal capture group, the other is a named capturing group, and the capturing group is usually referred to as a normal capturing group. The syntax is as follows:

Normal capturing group:(Expression)

Named capturing group:(?<name>Expression)

Demo-1 Common Capturing group:

var str = "2018-08-30"var generalReg = /(\d{4})-(\d{2})-(\d\d)/gvar res = str.match(generalReg)     // ["2018-08-30"]

In the example above, it is clear in the expression that the capturing group, number, etc.

numbering	naming	Capturing groups	Match Content
0		(\d{4})-(\d{2})-(\d\d))	2018-08-30
1		(\d{4})	2018
2		(\d{2})	08
3		(\d\d)	30

Demo-2 named capturing group:

var str = "2018-08-30"var generalReg = /(?<year>\d{4})-(?<date>\d{2})-(?<day>\d\d)/gvar res = str.match(generalReg)     // ["2018-08-30"]

In the example above, it is clear in the expression that the capturing group, number, etc.

numbering	naming	Capturing groups	Match Content
0		(\d{4})-(\d{2})-(\d\d))	2018-08-30
1	Year	(\d{4})	2018
2	Date	(\d{2})	08
3	Day	(\d\d)	30

4-2 Reverse Reference

In a regular expression, a reference to the content captured by the preceding capturing group is referred to as a reverse reference;
We'll do a Demo with the above content:

var str = 'abcdebbcde'var reg = /([ab])/gvar res = reg.test(str)     // truevar res0 = str.match(reg)   // ['bb']var reg2 = /([ab])\2/gvar res2 = reg2.test(str)       // falsevar res3 = str.match(reg2)      // nullvar strs = 'abcdbaabbccde'var reg3 = /([ab])([a])\2/gvar res3 = reg3.test(strs)var res4 = strs.match(reg3)  // ["baa"]

One more demo.

var str = '<div><p>1</p><strong>2</strong><div>'var reg = /<(\w+)>(.+)<(\/\1)>?/gvar res = str.match(reg)        // ["<p>1</p>", "<strong>2</strong>"]

Is there a more understanding of the reverse reference?

反向引用In the actual use of the scene or more, but also a more important concept, I hope to feel deeply.

Today on the regular expression of the introduction of the first here, Shenzhen in recent days are heavy rains, home from work ~ Remember to bring an umbrella OH

GitHub Address: (Welcome star, welcome recommendation:)

Pre-correct expression magic (middle)