正则表达式基础篇

太过爱你忘了你带给我的痛 2021-07-25 22:01 738阅读 0赞

之前学习正则的时候，学的比较懒散，基本就看一遍就过了，工作中遇到需要正则匹配的，基本靠百度。  
像：手机号、座机号、邮箱、身份证号码的校验，百度上一搜全是答案。

最近工作很清闲，就把正则简单过一遍吧，我是劳碌命，闲下来会觉得浪费时间……

## 正则表达式基础语法 ##

#### 创建正则表达式的两种方式 ####

`var reg = /pattern/`  
`var reg = new RegExp(pattern)`  
比如：手机号码的校验

1.  var reg = /^\\d\{11\}/
2.  var reg = new RegExp(/^\\d\{11\}/)  
    上面的两种方式都是可以的

#### 正则的使用方式 ####

1.  正则在前的exec匹配：`reg.exec(str)`——返回值是个对象Object
2.  正则在前的test匹配：`reg.test(str)`——返回值是true或false
3.  字符串在前的match匹配：`str.match(reg)`——返回值是个对象Object
4.  字符串的replace替换：`str.replace(reg,xxx)`——返回的是替换后的结果
5.  字符串的search检索：`str.search(reg)`——返回的是索引值
6.  字符串的split分割：`str.split(reg)`——返回的是数组  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

#### 匹配一个字符串——/xxxx/ ####

匹配一个字符串’test’，如果匹配到则返回’test’，否则返回的是一个null

var reg = /test/
    var str = 'test demo'
    var result = reg.exec(reg);
    //result的结果是一个对象，这个对象中属性名为0的属性值就是最终的结果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

#### 匹配连续字符——/x\{n\}/ ####

匹配’ccainiao’中的连续的c

var str = 'ccainiao'
    var reg = /c{2}/
    var result = reg.exec(str);
    //result[0]结果是cc

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

#### 匹配区间内的连续字符——/x\{n,m\}/ ####

匹配’ccccainiao’中3个c到5个c

var str = 'ccccainiao'
    var reg = /c{3,5}/
    var result = reg.exec(str);
    //result[0]结果是cccc

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
由以上例子可以推断出，`c{m,n}表示m个到n个c，且m小于等于n`

**匹配1个及以上的c**：`var reg = /c{1,}/`  
**简化写法**:`*` 表示0次或者多次，相当于\{0,\}  
**简化写法**:`+`表示1次或者多次，相当于\{1,\}  
**简化写法**:`?`表示0次或者1次，相当于\{0,1\}

#### 正则表达式的贪心模式 ####

人都是贪婪的，正则也是如此。我们在例子reg = /c\{3,4\}/;str=‘ccccTest’;的例子中已经看到了，能匹配四个的时候，正则绝对不会去匹配三个。  
上面所介绍的所有的正则都是这样，只要在合法的情况下，它们会尽量多去匹配字符，这就叫做贪心(贪婪)模式。  
如果我们希望正则尽量少地匹配字符，那么就可以在表示数字的符号后面加上一个?。组成如下的形式：  
`{n,}?, *?, +?, ??, {m,n}?`

#### 开头和结尾的匹配——^与$ ####

\*\*^\*\*表示只匹配字符串的开头  
\*\*$\*\*表示只匹配字符串结尾的字符

var str = '1gsdgs2'
    var reg = /^1/;//匹配1开头
    var reg1 = /2$/;//匹配2结尾
    var result = reg.exec(str);
    var result1 = reg1.exec(str);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]

#### 匹配除换行符\\n之外的所有字符——. ####

var str = 'cainiao'
    var reg = /./
    var result = reg.exec(str);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]

#### 匹配除换行符\\n之外的所有字符——.+ ####

上面只匹配到第一个字符了，如果是要返回所有的字符，则需要有个`+`

var str = 'cainiao'
    var reg = /.+/;
    var result = reg.exec(str);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]

#### 正则表达式中的或——| ####

b|c表示，匹配b或者c  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7]  
结合上面提到的匹配字符，然后如下：  
`var reg = /^b|c.+/;`  
这句话的意思是：匹配b开头或者c及后面的所有的字符  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 8]

`/c./`是匹配c及后面的字符：返回结果为：ca  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 9]  
如果要匹配b或者c开头的所有的字符，则需要加个()  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 10]

#### 匹配字符串合集——字符集合\[abc\] ####

\[abc\]表示a或者b或者c中的任意一个字符  
也就是说`[abc]`等同于`(a|b|c)`  
当需要匹配的字符很多时，用()的这种方式会比较麻烦，则此时可以用\[\]字符集合的方式来处理  
我们在字字符集合中使用如下的表示方式:\[a-z\],\[A-Z\],\[0-9\]，分别表示小写字母，大写字母，数字

举例：匹配：**开头必须是英文字母，后面可以是英文字母或者数字以及下划线**

var reg = /^[a-zA-Z][a-zA-Z0-9_]+/
    var str = 'ss234dgs_fdsg'
    var result = reg.exec(str);

![在这里插入图片描述][20210513150820181.png]

#### 反字符集合——\[^abc\] ####

\*\*^\*\*在正则表达式开始部分的时候表示开头的意思，例如`/^c/`表示开头是c；但是在字符集和中，它表示的是类似“非“的意思，例如`[^abc]`就表示不能是a，b或者c中的任何一个。

var str = 'cainiao'
    var reg = /^[^abc]/
    var result = reg.exec(str);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 11]  
由此我们可知：`[^0-9]`表示非数字，`[^a-z]`表示非小写字母，一次类推。

#### 边界与非边界——\\b ####

`\b`表示的边界的意思，也就是说，只有字符串的开头和结尾才算数。例如`/\bc/`就表示字符串开始的c或者是结尾的c

var reg = /\bc/;
    var str='cainiao';
    var result = reg.exec(str);

与\\b对应\\B表示非边界

var reg = /\Bc/;
    var str='bcb';
    var result = reg.exec(str);

#### 数字与非数字——\\d ####

`\d`表示数字的意思，相反，`\D`表示非数字

var reg = /\d/;
    var str='cainiao8';
    var result = reg.exec(str);

#### 空白——\\f\\n\\r\\t\\v\\s ####

`\f`匹配换页符，`\n`匹配换行符，`\r`匹配回车，`\t`匹配制表符，`\v`匹配垂直制表符。  
`\s`匹配单个空格，等同于\[\\f\\n\\r\\t\\v\]

var reg = /\s.+/;
    var str='This is a test String.';
    var result = reg.exec(str);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 12]  
`\S`表示非空格字符

var reg = /\S+/;
    var str='This is a test String.';
    var result = reg.exec(str);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 13]

#### 单词字符——\\w ####

`\w`表示单词字符，等同于字符集合`[a-zA-Z0-9_]`

var reg = /\w+/;
    var str='blueidea';
    var result = reg.exec(str);
    //由于str里面全是单词字符，也就是a-zA-Z0-9这样的，所以返回值是全部的内容

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 14]

var reg = /\w+/;
    var str='.className';
    var result = reg.exec(str);
    //第一个字符是.，则不符合要求，只匹配到后面的单词字符

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 15]  
`\W`表示非单词字符，等效于`[^a-zA-Z0-9_]`

#### 反向引用——子正则表达式 ####

var reg = /\w/;
    var str='blueidea';
    var result = reg.exec(str);
    //此时返回的result是b
    var reg1 = /(\w)(\w)/;
    var result1 = reg1.exec(str);
    //此时返回的result1是bl
    var reg2 = /(\w)\1/;
    var result2 = reg2.exec(str);
    //此时的\1是反向引用，它表示的是第一个括号内的字正则表达式匹配的内容，第一个括号里面的(\w)匹配了b,因此\1就同样表示b了，在余下的字符串里自然找不到b了

#### 不记录子正则表达式的匹配结果——?:pattern ####

不记录子正则表达式的匹配结果

var reg = /^(?:b|c).+/;
    var str='bbs.blueidea.com';
    var result = reg.exec(str);

使用形如`(?:pattern)`的正则就可以避免保存括号内的匹配结果。  
例如：  
可以看到返回的结果不再包括那个括号内的字正则表达式多匹配的内容。

var reg = /^(b|c)\1/;
    var str='bbs.blueidea.com';
    var result = reg.exec(str);

返回 bb,b。bb是整个正则表达式匹配的内容，而b是第一个子正则表达式匹配的内容。  
同理，反向引用也不好使了：

var reg = /^(?:b|c)\1/;
    var str='bbs.blueidea.com';
    var result = reg.exec(str);

返回 null。由于根本就没有记录括号内匹配的内容，自然没有办法反向引用了

#### 正向预查——?=pattern ####

形式：(?=pattern)  
所谓正向预查，意思就是：要匹配的字符串，后面必须紧跟着pattern  
我们知道正则表达式`/cainiao/`会匹配`cainiao`。同样，也会匹配`cainiao9`中的`cainiao`。但是我们可能希望，`cainiao`只能匹配`cainiao8`中的菜鸟。这  
时候就可以像下面这样写：`/cainiao(?=8)/`，看两个实例：

var reg = /cainiao(?=8)/;
    var str='cainiao9';
    var result = reg.exec(str);
    //此时的result返回的是null
    var str1 = 'cainiao8';
    var result1 = reg.exec(str1);
    //此时的result返回的是cainaio

需要注意的是，括号里的内容并不参与真正的匹配，只是检查一下后面的字符是否符合要求而已，例如上面的正则，返回的是`cainiao`，而不是`cainiao8`。

#### 正向预查取反——?!pattern ####

形式`(?!pattern)`和`?=`恰好相反，要求字符串的后面不能紧跟着某个`pattern`，还拿上面的例子：

var reg = /blue(?!idea)/;
    var str='bluetooth';
    var result = reg.exec(str);

返回 null，因为正则要求，blue的后面不能是idea。  
则成功返回 blue。

#### 全局匹配——g ####

形式：/pattern/g

#### 不区分大小写——i ####

不区分大小写，修饰符i;  
形式：/pattern/i

#### 行首行尾，修饰符m ####

形式：/pattern/m  
m修饰符的作用是修改^和$在正则表达式中的作用，让它们分别表示行首和行尾;

## 正则表达式练习 ##

#### 匹配最后两个数字 ####

**最后**：可以使用\*\*KaTeX parse error: Undefined control sequence: \\d at position 20: …行尾 \*\*数字\*\*：可以使用\`\\̲d̲\`表示数字 \*\*两个数字\*\*：…/\`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 16]

#### 去掉字符串中的所有的空格 ####

**空格**：可以使用`\s`表示空格  
**多个空格**：字符串中可能有多个空格，可以通过`\s+`，`+`表示多个前面的匹配，用`*`也可以匹配0个或多个  
**所有空格**：全局匹配的话可以用`g`  
所以，匹配字符串中的所有的空格，可以使用`/\s+/g`或者`/\s*/g`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 17]

#### 判断字符串是否全是数字 ####

**判断**：则可以使用正则的`test`方法，返回值为布尔值，`true`或`false`  
**数字**：可以使用`\d`表示  
**全是数字**：可以通过开头结尾和中间都是数字来区分，开头是数字`^\d`，结尾是数字`\d$`，中间也是数字的话，可以直接用`*`，也就是紧跟着开头数字的匹配，或者通过`[0-9]*`也可以的。  
所以：判断字符串是否全是数字，可以使用`/^\d*\d$/`，也可以使用`/^\d[0-9]*\d$/`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 18]

#### 座机号码的匹配 ####

首先了解一下座机号码的组成：  
3-4位的区号-7-8位的中间号码-3-4位的分机号（可有可无）  
**开头**：3-4位的区号：`^\d{3,4}`  
**结尾**：3-4位的分机号（可有可无）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 19]  
区号必填为3-4位的数字，区号之后用“-”与电话号码连接  
^\\d\{3,4\}-  
电话号码为7-8位的数字  
\\d\{7,8\}  
分机号码为3-4位的数字，非必填，但若填写则以“-”与电话号码相连接  
(-\\d\{3,4\})? 单独的？表示0个或1个，就是有无都可以

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/7159c8d1124c45478b05e1b3d70f9de7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/462f8db480274fdda68908ae0d70d5d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/3d919646bd6a44efa415d4dd8b75fb94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20210725/f7b956391f4641bba79f5864fd2d3196.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20210725/836ea8daa5c041f0aa5ebf3eb7c560a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]: /images/20210725/42d37d9d159c4f5e84e93a31af3732b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]: /images/20210725/df54b1780385401ca737ba75a045d103.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7]: /images/20210725/7bbdc508d17e4008afdc2ef2474fb498.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 8]: /images/20210725/2d0e1ceb173b48cf9ee34386a084f416.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 9]: /images/20210725/ce3155120c1841da8f97412a66db8dd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 10]: /images/20210725/a08990145826409ea929fc68b2dffc6c.png
[20210513150820181.png]: /images/20210725/6e0134bace3c48ee9d3defa42c20ebb9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 11]: /images/20210725/3f1586cd9b79486fbb3afb0a4bdb2254.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 12]: /images/20210725/b86bcd3bf2a143dfb0795d5bc2a05ad0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 13]: /images/20210725/c90aacc41b884fa698ededbba3867ec7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 14]: /images/20210725/de1c009533a74462a3e2d2dab9ad99be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 15]: /images/20210725/8c6f1b2c984445de9a1b06d24ed046ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 16]: /images/20210725/2070c987d06d46c9a424f33405eb598f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 17]: /images/20210725/ace4bdc05ffc4ae5a13aec2aa05d7e3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 18]: /images/20210725/5c3280a6f2e44a5699023be8caac0ae8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 19]: /images/20210725/934ac0bc2d5b434bb75568ccf078cebf.png