"The road of the front" before the correct expression magic (the)

Directory

• Chapter II-02: Pre-correct-expression magic (Part I)
  • First, Create!
  • Ii. Terminology and operators
    • 2.1 Exact Match
    • 2.2 Matching a class of characters
    • 2.3 Escaping
    • 2.4 Match start and end
    • 2.5 Repeated occurrences

Chapter II-02: Pre-correct-expression magic (Part I)

From: "JavaScript ninja Cheats"

In our daily development process, we will often encounter the use of regular expressions to solve some tricky problems. For example, to get the parameters of the current link, matching ID, mobile phone number, name, verification code and so on. So our front-end Road series is going to talk about regular expressions!

First, Create!

Since it is an expression, then there must be a process of creation, how to create it?

There are two ways to create a regular expression:

1、面向字面量：

const pattern = /test/

2、构造 RegExp 实例

const pattern = new RegExp('test')// pattern   ->  /test/

Comparison between the two methods:

1、如果正则（规则）是已知的，则优先选择字面量语法。2、如果是需要在运行的时候通过 动态构建的字符串来创建正则表达式，则需要通过构造器的方式

In addition, there are three flags that can be associated with a regular expression:

1、 i： 让正则表达式不区分大小写[ignore case]2、 g:  匹配模式中的所有实例 [global]3、 m:  允许匹配多行，例如匹配文本元素 [multiline]我们可能对上面讲到的 三点不太理解，那么我们用最简单的例子来解释一下。

### i: 让正则表达式不区分大小写[ignore case]

const reg = /test/iconst res1 = reg.test('testssss')   // trueconst res2 = reg.test('Testssss')   // trueconst reg2 = /test/const res21 = reg2.test('testssss') // trueconst res22 = reg2.test('Testaaaa') // false

### g: 匹配模式中的所有实例 [global]

const reg = /s/let res1 = 'testssss'.match(reg)// ["s", index: 2, input: "testssss", groups: undefined]// 如果匹配到了第一个就const reg2 = /s/glet res2 = 'testssss'.match(reg2)//  ["s", "s", "s", "s", "s"]

### m: 允许匹配多行，例如匹配文本元素 [multiline]

<div>    <textarea id="text">        hahaha    </textarea>    <button id='btn'>        click    </button></div>

        var str = ''        var reg1 = /$/g        var reg2 = /$/mg        var text = document.getElementById('text')        var btn = document.getElementById('btn')        btn.addEventListener('click', function(e) {            // str = text.value            str = '1\n2\n3\n4\n5'            var s1 = reg1.test(str)    // 空            var s2 = reg2.test(str)    // 2345            console.log(RegExp.rightContext)        })

其实到了这一步，对于 m 的用法还不是特别的清晰，后面，我们遇到了真实的问题，会再次回来解决这个问题的。

Second, the term and operator 2.1 exact match

If a character is not a special character or operator, it means that the character must appear in the expression, such as four characters in/test/, which means that the four characters must appear sequentially one after the other to be matched.

2.2 Matching a class of characters

2.2.1When matching one of the characters in a finite character set, you can use the []
eg:

var reg = /[abc]/var str1 = 'a'var str2 = 'ab'var str3 = 'ab'var str4 = 'adc'var str5 = 'dd'var res1 = reg.test(str1)   // truevar res2 = reg.test(str2)   // truevar res3 = reg.test(str3)   // truevar res4 = reg.test(str4)   // truevar res5 = reg.test(str5)   // false// 总结下来就是 [] 可以用来匹配任意括号内的内容。// /[abc]/  

2.2.2Matches a character other than a finite character set, you can use the [^]
eg:

var reg = /[^abc]/var str1 = 'a'var str2 = 'ab'var str3 = 'ab'var str4 = 'adc'var str5 = 'dd'var res1 = reg.test(str1)   // falsevar res2 = reg.test(str2)   // falsevar res3 = reg.test(str3)   // falsevar res4 = reg.test(str4)   // truevar res5 = reg.test(str5)   

2.2.3Develop a scope that can be used [-]

eg:

var reg = /[a-z]/var str = 's'var res = reg.test(str)  console.log(res)        // true

For example [A-z] represents all characters from A to Z (including A,z, in dictionary order)

2.3 Escaping

When you want to match special characters, you need to escape them, such as $,^,[, you need to use a backslash

eg:

var reg1 = /\[/var reg2 = /[/var str = '['var res1 = reg1.test(str)   // truevar res2 = reg2.test(str)   // 报错

2.4 Match start and end

2.4.1Symbol ^ If you are the first character of a regular expression, you want to start the match from the beginning of the string
2.4.2The symbol $ is the last character of the regular expression, indicating that the pattern must appear at the end of the string
eg:

var reg1 = /^./gvar reg2 = /[a-d]/gvar reg3 = /.$/gvar str = 'esdasdasdasewcfefhdasjkld'var res1 = str.match(reg1)var res2 = str.match(reg2)var res3 = str.match(reg3)console.log(res1)   // e    字符串的第一个console.log(res2)   // ['d','a',...,'d']console.log(res3)   // d    字符串的最后一个

2.5 Repeated occurrences

When matching any number of the same characters consecutively, you can use the following method

2.5.1 ?: The character can be defined as optional, which can occur one time or does not appear

eg:

var reg = /t?est/var str1 = 'trrrrtttttttest'var str2 = 'trrrrest'var str3 = 'trrrrrst'var res1 = reg.test(str1)var res2 = reg.test(str2)var res3 = reg.test(str3)console.log(res1)       // trueconsole.log(res2)       // trueconsole.log(res3)       // false

How to understand it? A question mark indicates that 2 possibilities may or may not be

2.5.2 +: One character appears at least once

eg:

var reg = /t+est/gvar str = 'testtttttest'var res = str.match(reg)console.log(res)    // ["test", "tttttest"]

How to understand it? The plus sign represents the addition. Then add up, it's at least once.

2.5.3 *: One character does not appear or appears multiple times

eg:

var reg = /t*est/gvar str1 = 'testest'var str2 = 'testtttest'var res1 = str1.match(reg)var res2 = str2.match(reg)console.log(res1)   // ["test", "est"]console.log(res2)   // ["test", "tttest"]

How to understand it? The asterisk indicates that the parity is arbitrary and can occur or not appear. Combines a plus and a question mark.

2.5.4 {n}: Indicates that a character recurs n times

eg:

var reg = /t{4}/gvar str1 = 'testest'var str2 = 'testtttest'var res1 = str1.match(reg)var res2 = str2.match(reg)console.log(res1)   // null console.log(res2)   // ["tttt"]

How to understand it? This n is actually relatively good to understand. N Times ~

2.5.5 {n,m}: Indicates that a character recurs N to M times

eg:

var reg = /t{2,5}/gvar str1 = 'testest'var str2 = 'testtttest'var str3 = 'testtest'var res1 = str1.match(reg)var res2 = str2.match(reg)var res3 = str3.match(reg)console.log(res1)   // null console.log(res2)   // ["tttt"]console.log(res3)   // ["tt"]

2.5.6 {n,}: Indicates that a character repeats at least n times

eg:

var reg = /t{1,}/gvar str1 = 'testest'var str2 = 'testtttest'var str3 = 'testtest'var str4 = 'esaesa'var res1 = str1.match(reg)var res2 = str2.match(reg)var res3 = str3.match(reg)var res4 = str4.match(reg)console.log(res1)   // ["t", "t", "t"]console.log(res2)   // ["t", "tttt", "t"]console.log(res3)   // ["t", "tt", "t"]console.log(res4)   // null

Tips: At the time of the match, there is one more thing to note: Greed and non-greed. By default, they are greedy, which will match all combinations of characters, add one after the operator, and make the expression non-greedy, with minimal matching
eg

var reg1 = /a+/gvar reg2 = /a+?/gvar str = 'aaa'var res1 = str.match(reg1)  // ['aaa']var res2 = str.match(reg2)  // ["a", "a", "a"]

It is mentioned here that a more important concept in a regular expression is the 贪婪非贪婪
贪婪匹配Is that the regular expression tends to 最大长度 match (the default is greedy match).
非贪婪匹配is: Regular expression 匹配到就好 , no longer go backwards.
Adding one after the operator ? can turn greed into non-greedy.

GitHub Address: (Welcome star, welcome recommendation:)

Pre-correct expression magic (UP)