超详细的正则表达式的使用方法，学不会找我

正则表达式的基本使用

前言： 在我们开发过程中，有很多地方需要用到正则表达式。如验证用户登录信息、手机号、邮箱地址等等。那你都会正则表达式的哪几个方法呢？

首先，我们要知道什么是正则表达式。

正则表达式的定义：

• 正则表达式 RegExp (regular expression) 是ECMAScript内置对象，是一个用于对字符串实现逻辑匹配运算的对象

正则表达式的作用：

• 按照某种规则来匹配字符串，而正则表达式就是制定这个规则

如何使用正则表达式

• (1) 创建正则表达式对象
• (2) 开始匹配 使用test()方法

由于正则表达式非常的晦涩难懂，使用图形可以更好的方便理解，正所谓一图胜千言！
正则表达式图形化网站：https://regexper.com/

下面就让我们步入正题，开始学习正则。

1、元字符与原义文本字符

一个正则表达式主要由两部分组成：

1. 原义文本字符 ： 就是字符本身的含义，千万别想多/abc/// 含义，就是检查字符串中有没有abc。 别想多了// 不是说有a或者有b或者有c，也不是说有a 和 b 和 c console.log(/abc/.test('a123'));//false console.log(/abc/.test('ab123c'));//false console.log(/abc/.test('abc123'));//true
2. 元字符 ： 改变了字符串本身的含义 （相当于 js 的关键字）. \ |[]{}()+?* $ ^

2、字符类

有时候我们并不想只匹配一个字符，而是想要匹配符合某一类特征的字符，这时就可以使用字符类

1、简单字符类：

[]

/[abc]/// 把字符a或b或c归为一类，可以匹配这类的字符// 含义是，匹配字符串中只要有 a或者b或者c任何一个即可
 console.log(/[abc]/.test("eeeeefffff"));//false
 console.log(/[abc]/.test("eaeeffffff"));//true
 console.log(/[abc]/.test("ebeeeffffff"));//true

2、反向类（负向类）：

^

// 反向类意思是不属于某类的内容/[^abc]/// 含意是，不是字符a或b或c的内容// 只要有任何一个字符不是a或者b或者c，就满足条件
console.log(/[^abc]/.test("1abacbc"));//true
console.log(/[^abc]/.test("aaabbbcccc"));//false
console.log(/[^abc]/.test("aaabbbcccce"));//true

3、范围类：

-

在实际开发中，如果我们需要匹配所有的数字， 可以写

[0123456789] 

: 含义是，有任何数字的内容。如果这样写，表达式就很冗余，假如我要匹配字母，那就要写 [abcdefg…xyz],非常麻烦。
那么如何解决呢？可以使用范围类

-

。

[0-9]: 含义是， 0-9之间的任意字符
[a-z]: 含义是，a-z之间的任意字符
[A-Z]:含义是，A-Z之间的任意字符

console.log(/[0-9]/.test("1acasdas"));//true  只要有数字就满足
console.log(/[0-9]/.test("acasdas"));//false

注意：

1. 范围类是一个闭区间， [a-z]，这个范围包含字符a和z本身
2. 在[]内部是可以连写的， [0-9a-zA-Z] : 含义是，包含数字0-9，或者a-z，或者A-Z任意字符
3. 右边一定要大于左边，例如 [5-8],这是合法的，表示5-8之间的数字，不能写[8-5],程序会报错（正则语法错误）

4、预定义类

1. . :除了回车和换行之外的所有字符

console.log(/./.test("\r\n"));//false
console.log(/./.test(""));//false 空字符
console.log(/./.test(" "));//true 空格字符

1. \d 数字字符(只要有数字即可)

console.log(/\d/.test("123abc"));//true
console.log(/\d/.test("abc"));//false

1. \D 非数字字符（只要没有数字即可）

console.log(/\D/.test("123abc"));//true
console.log(/\D/.test("123"));//false

1. \s 空白字符(只要有空白字符即可)

console.log(/\s/.test("\nabc"));//true
console.log(/\s/.test("abc"));//false

1. \S 非空白字符（只要有非空白字符即可）

console.log(/\S/.test("\nabc"));//true
console.log(/\S/.test("abc"));//true
console.log(/\S/.test(""));//false
console.log(/\S/.test("\t\n"));//false

1. \w 单词字符（只要有字母、数字、下划线即可）

console.log(/\w/.test("abc123_中国"));//true
console.log(/\w/.test("中国"));//false

1. \W 非单词字符（只要有除字母、数字、下划线之外的任意字符即可）

console.log(/\W/.test("abc123_中国"));//true
console.log(/\W/.test("中国"));//true
console.log(/\W/.test("abc123_"));//false

记忆技巧：
字母是小写，表示是肯定的规则。
字母是大写，表示是否定的规则。

5、边界

严格匹配: ^字符串$

例如：

^abc$

: 含义是，字符串必须以a开头，中间必须是b，结尾必须是c
满足该条件的只有一个字符串： abc

正则表达式还提供了几个常用的边界匹配字符：

^                   以xxxx开头
 $                   以xxxx结束
 \b                  单词边界
 \B                  非单词边界

1、

^

以xxxx开头

这里容易记混的知识点：

[^]

: 负向类，有取反的意思。 例如

[^abc] 

: 不包含abc的任意字符

/^/

:边界，以xxxx开头。 例如

/^\d/ 

: 以数字开头的任意字符

/^abc/ ： 以a开头，后面是bc的字符  
（不是以abc开头，虽然最终结果一样，但是含义不同）
console.log(/^abc/.test("a"));//false
console.log(/^abc/.test("abc"));//true
console.log(/^abc/.test("abc123"));//true/^\d/ ： 以任意数字开头的任意字符
console.log(/^\d/.test("1abc"));//true
console.log(/^\d/.test("a1bc"));//false

2、

$

以xxxx结束

/b$/: 结尾是b的任意字符
console.log(/b$/.test("b"));//true
console.log(/b$/.test("abc"));//false
console.log(/b$/.test("acb"));//true/^ab$/: 以a开头 + 以b结尾的字符  （言外之意：只能是ab）
console.log(/^ab$/.test("ab"));//true
console.log(/^ab$/.test("acb"));//false

3、

\b

单词边界(晦涩难懂，用的不多)

单词： 由\w(字母数组下划线)组成的一串字符
边界：指的是某一个位置，而不是字符

// 将单词is替换成XX
console.log("this is a girl".replace(/\bis/,"XX"))// this XX a girl// 将非单词is替换成XX
console.log("this is a girl".replace(/\Bis/,"XX"))// thXX is a girl

6、量词

量词： 表示字符出现的数量

量词                  含义
?                    出现零次或一次（最多出现一次）
+                    出现一次或多次（至少出现一次）
*                    出现零次或多次（任意次）
{n}                  出现n次
{n,m}                出现n-m次
{n,}                 出现至少n次（>=n）

需求：匹配一个连续出现10次数字的字符
正则表达式: /\d\d\d\d\d\d\d\d\d\d/
弊端：表达式冗余 解决方案：使用量词

console.log(/\d{10}/.test("1234567abc"));//false
console.log(/\d{10}/.test("1234567890abc"));//true

7、分组

1、

()

这个元字符有三个含义

• 分组：使量词作用于分组 - 量词只能作用于一个字符，如果想作用与多个字符，就要使用分组（将多个字符当成一组）
• 提升优先级：通常与元字符 | 一起使用
• 反向引用

// 需求： 匹配连续出现三次love的字符串 - lovelovelove// 1.错误写法:  /love{3}/  , 含义： lov + e{3}
console.log(/love{3}/.test("lovelovelove"));//false
console.log(/love{3}/.test("loveee"));//true
console.log(/love{3}/.test("loveeeabc"));//true//2.正确做法：使用分组   /(love){3}/
console.log(/(love){3}/.test("lovelovelove"));//true
console.log(/(love){3}/.test("loveee"));//false

2、

|

// 1.错误写法:  /lo|ive/  ,含义：  lo  或者  ive
console.log("I love you".replace(/lo|ive/,"X"));// I Xve you
console.log("I live you".replace(/lo|ive/,"X"));// I lX you//2.正确写法： /l(o|i)ve/, 含义：匹配love 或者 live
console.log("I love you".replace(/l(o|i)ve/,"X"));// I X you
console.log("I live you".replace(/l(o|i)ve/,"X"));// I X you

8、修饰符

修饰符：影响整个正则规则的特殊符号

书写位置：  /pattern/modifiers(修饰符)i(intensity)：大小写不敏感（不区分大小写）
g(global): 全局匹配
m(multiple): 检测换行符，使用较少，主要影响字符串的开始^与结束$边界

1、

i

i

：不区分大小写

let str ='ABCabcdefgaaaAAA';
console.log( str.replace(/a/,"X"));//ABCXbcdefgaaaAAA   //默认区分大小写
console.log( str.replace(/a/i,"X"));//XBCabcdefgaaaAAA

2、

g

g

: 全局匹配

let str ='ABCabcdefgaaaAAA';
console.log( str.replace(/a/,"X"));//ABCXbcdefgaaaAAA   //默认匹配第一个就停止
console.log( str.replace(/a/g,"X"));//ABCXbcdefgXXXAAA   //默认匹配第一个就停止//修饰符可以同时使用多个
console.log( str.replace(/a/ig,"X"));//XBCXbcdefgXXXXXX

3、

m

m

: 检测换行符 主要针对边界^与$

//需求：将下列字符串中每一行开头的字符变成0let str ="aascdascd\nwebdfbdfbdfbfd\ngcsdfcwdfwfwe";
console.log( str );//虽然在控制台看到三行字符串，实际上代码中每一行只是一个换行符\n
console.log( str.replace(/^\w/g,"0"));//错误    只能替换第一个字符/*注意不要漏掉了全局匹配g*/
console.log( str.replace(/^\w/gm,"0"));//正确    能替换每一行第一个字符，m能检测换行符把\n后i面字符作为单独一行