JavaScript从入门到精通系列第三十二篇：详解正则表达式语法(一)

柔情只为你懂 2024-02-19 11:14 24阅读 0赞

**文章目录**

一：正则表达式

1：量词设置次数

2：检查字符串以什么开头

3：检查字符串以什么结尾

4： 同时使用开头结尾

5：同值开头同值结尾

二：练习

1：检查是否是一个手机号

--------------------

> 大神链接：作者有幸结识技术大神孙哥为好友，获益匪浅。现在把孙哥视频分享给大家。
> 
> 孙哥链接：[孙哥个人主页][Link 1]  
> 作者简介：一个颜值99分，只比孙哥差一点的程序员  
> 本专栏简介：话不多说，让我们一起干翻JavaScript
> 
> 本文章简介：话不多说，让我们讲清楚JavaScript里边的正则表达式

## 一：正则表达式 ##

### 1：量词设置次数 ###

使用a\{3\}这种量词结构可以表示多个a的情况，这样可读性很好。\{n\}这种代表了正好出现n次。

证明这件事情：

var reg = /a{3}/
    console.log(reg.test(aaabc));

执行结果：

![57c7de70de5845b79133c93a4f305057.png][]

值得注意的是量词只对前边一个值起作用

证明这件事情：

var reg = /ab{3}/
    console.log(reg.test("abababc"));

执行结果：

![16b54aee0b07489ba05f409fad6b3d03.png][]

这个含义代表了查看是否包含abbb

那么怎么表示ababab呢？把他抱起来，证明这件事情：

var reg = /(ab){3}/
    console.log(reg.test("abababc"));

运行结果：

![0c960da0dcb64e35bf5bd0d634f88a1c.png][]

/ab\{3\}c/代表了abbbc。/ab\{m,n\}c/代表了b出现m次到n次

证明这件事情：

var reg = /ab{1,3}c/
    console.log(reg.test("abbcababc"));

执行结果：

![2007db031ca4479ba13ffe8b3a50a09d.png][] /ab\{m,\}c/代表了b出现m次以上

var reg = /ab{1,}c/
    console.log(reg.test("abbcababc"));

执行结果：

![e6f93f5195fb4d45bea2f7441d1e1dec.png][] /ab+c/代表了b出现1次以上

证明这件事情：

var reg = /ab+c/
    console.log(reg.test("abbcababc"));

执行结果：

![8158dc719f524e03ab3be1ed7c4441ce.png][]

/ab\*c/代表了b出现几次都行

证明这件事情：

var reg = /ab*c/
    console.log(reg.test("abbcababc"));

执行结果：

![903078950ff04a66934879ded8d7ba86.png][]

/ab?c/代表了b出现了0次或者1次

证明这件事情：

var reg = /ab?c/
    console.log(reg.test("abbc"));

执行结果：

![8c3ebc607820481887abdb2762f1bc89.png][]

### 2：检查字符串以什么开头 ###

/^a/标识以a开头

证明这件事情：

var reg = /^a/
    console.log(reg.test("abbc"));

执行结果：

![fc4b1e24a61f48e7a7d7cf86a6514215.png][]

### 3：检查字符串以什么结尾 ###

/a$/标识以a结尾

证明这件事情：

var reg = /a$/
    console.log(reg.test("bbca"));

执行结果：

![2388d901c6bb424db349d8917f5d78b2.png][]

### 4： 同时使用开头结尾 ###

/^a$/标识只有一个a

证明这件事情：

var reg = /^a$/
    console.log(reg.test("a"));

执行结果：

![9fd0fd60f4c24defa7767408be6f1c4b.png][]

### 5：同值开头同值结尾 ###

/^a|a$/标识以a开头以a结尾

var reg = /^a|a$/
    console.log(reg.test("abcada"));

执行结果：

![c603b80feaea41608a196199a3b3fe3e.png][]

## 二：练习 ##

### 1：检查是否是一个手机号 ###

手机号规则：

1：一共11位

2：手机号以1开头

3：第二位是3-9

4：三位是任意数字。

^1 \[3-9\] \[0-9\]\{9\}$

var phoneStr = "13821642819";
    var phoneReg = /^1[3-9][0-9]{9}$/;
    console.log(phoneReg.test(phoneStr ))

运行结果：

![db8a9f211c1b4301b5d73b9cde19702e.png][]

^$这两个很关键，标识严格遵收我们表达式规则。

[Link 1]: https://space.bilibili.com/284638819
[57c7de70de5845b79133c93a4f305057.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/b7d543e2bfe34026a573d6b5004a5a2c.png
[16b54aee0b07489ba05f409fad6b3d03.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/874bc99bd0d649e2b89346b2b62291a0.png
[0c960da0dcb64e35bf5bd0d634f88a1c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/cd9e48b02d6c4e4ba1df9892ed6c85d4.png
[2007db031ca4479ba13ffe8b3a50a09d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/1443132fc8c54191b23cf15245155b00.png
[e6f93f5195fb4d45bea2f7441d1e1dec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/99af16e0edbe4fe7a47fb8e8ecd2ed2e.png
[8158dc719f524e03ab3be1ed7c4441ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/6967c1e5487b4104a9b2857838f0989c.png
[903078950ff04a66934879ded8d7ba86.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/ceb1144e3354429aaefab24bd121f09e.png
[8c3ebc607820481887abdb2762f1bc89.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/a46d4ea3df5a48dabe0b8219b26f76cd.png
[fc4b1e24a61f48e7a7d7cf86a6514215.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/ee8dd47f59124ae789582c727a0c07c0.png
[2388d901c6bb424db349d8917f5d78b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/1ecacb9c56eb455f90406fee6b99ba15.png
[9fd0fd60f4c24defa7767408be6f1c4b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/fedcc3b992ce41a798b2a87c8bacd0dc.png
[c603b80feaea41608a196199a3b3fe3e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/aa58c11c918142d58d4be67229ccc69a.png
[db8a9f211c1b4301b5d73b9cde19702e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/419b76ff67a04cd28145cfd7fbc39e80.png