入门

1，正则 - 字符组

1.1）符号字符组用中括号包裹 []，
1.2）意义：表示匹配中括号里面的字符任意一次
1.3）例子

  1. // 匹配 Java 和 java
  2. /[Jj]ava/g
  4. // 匹配 Ruby,Rube，ruby，rube
  5. /[Rr]ub[ye]/g
  7. // 匹配所有数字
  8. /[1-9]/g

1.4）区间 -
-表示区间

  1. // 匹配所有大小写字母
  2. /[a-zA-Z]/g

1.5）匹配特殊字符

  1. // 匹配大小写和 - 字符
  2. /[a-zA-Z\-]/g
  4. // 匹配中括号 区间符号 和 大小写字母
  5. /[a-zA-Z\-\[\]]/g

1.6）不匹配什么
^ 放在字符组里面 表示不匹配对应的字符

  1. // 不匹配数字
  2. /[^1-9]/g
  4. //匹配爱后面不包含你的数据
  5. 爱[^你]

2，快捷方式 - 快捷特殊字符

2.1）特殊的字符可以快捷的匹配所有的数字，所有的大小写等
2.2）快捷匹配所有的数字 - \d （数字：digital，缩写）

  1. // 匹配所有数字
  2. /\d/g

2.3）快捷匹配所有字母和数字及下划线字符 - \w (单词：word，大小写字母和数字) 但是不匹配汉字

  1. // 匹配所有的字母，数字，下划线字符
  2. /\w/g

2.4）快捷匹配空白字符，tab，换行 - \s 小写（空白：space）

  1. // 匹配空格，tab，换行
  2. /\s/g

2.5）位置匹配
2.5.1）匹配单词边界 - \b （边界：boundary）

  1. // 匹配一个单词的边界
  2. /\bcode\b/g

只匹配code，不匹配 unicode，因为\b 定义了单词两边的边界

2.5.2）匹配字符串的边界 - ^ 和 $ （^匹配开头，$匹配结尾）

  • ^ 如果是放在区间 [] 里面表示取反
  • ^ 如果放在区间外面表示开头位置 ```reg // ^区间取反，不是1-9的字符 /[^1-9]/g

// ^匹配开头，以code开头的字符串 /^code/g

  2. 目前不知道如何匹配结尾的
  4. 2.5.3）多行匹配 - ?m (多行 ： multiline mode 多行模式)<br />不知道如何使用
  5. <a name="d24d3c84"></a>
  6. ## 3，快捷方式取反
  7. 3.1）匹配非数字的快捷方式 - \D （\d是匹配所有的数字，\D就是取反，表示匹配所有的非数字）
  8. ```reg
  9. // 匹配非数字
  10. /[^1-9]/g
  11. /\D/g

3.2）非字符 - \W (小写的 \w表示所有的字符，取反就是大写\W，所有的非字母和数字和下划线字符)

  1. // 匹配所有的非字母和数字 和 下划线字符
  2. /\W/g

4，元字符使用

4.1）匹配任意字符 - . （点表示匹配任意字符）

  1. // 匹配任意的字符，一个点表示一个位置，但是不能匹配换行符
  2. /a../g
  4. // 例如 任意字符之后是er的字符，一个点表示一个位置
  5. /.er/g

4.2）可选字符 - ? （表示疑问）表示这个字符可以要可以不要

  1. // 表示 n 可以要可以不要
  2. /hon?r/g

5，匹配数量

5.1）表示匹配的数量多少 - {} (花括号表示匹配的数量)

  1. // 匹配多少个数量
  2. /[1-9]{3}/g
  4. //例如匹配一个有区号的电话号码
  5. /\d{3}-\d{7}/ 
  6. 123-1231231
  7. 012-3212312

花括号里面就是表示前面类型的字符的个数

5.2）重复的区间 - 有的时候匹配8个数字，有的时候匹配9个数字

  1. // 匹配重复的有一个区间，表示区间的范围内
  2. /\d{3,5}/g
  3. 既可以匹配3个数字，也可以匹配4个数字，也可以匹配5个数字

5.3）如果遇到8个数字就不再匹配 - ？（问号表示懒惰匹配，尽可能少的匹配）- 既 非贪婪模式

  1. // 匹配到一定数量以后就不再匹配
  2. /\d{3,4}?/g
  3. 只匹配3个数字，不匹配5个数字
  5. //例子：假设匹配电话号码，
  6. 以3个数字开头，后边有7个数字，
  7. 以4个数字开头，后边有7个数字
  8. /\d{3,4}-\d{7}/g

6，重要特殊字符

6.1）以上的数字 - ，（3，）表示3个以上的数字，表示一个开区间
一般使用 0, 或 1, 表示0个 或者无数个
+表示{1，} 匹配1到无数个
*表示{0,}匹配0到无数个

  1. // 表示f开头的数据
  2. /f.*/g

7，综合练习

1，匹配所有的电话号码
规则：
必须是1开头 —— ^1
第二个数字要求是3,4,5,7,8中的一个 —— [3,4,5,7,8]
后边的9个数字是[0-9]的任意数字 —— \d{9}
直接组合如下：

  1. /^1[34578]\d{9}/g

2，以http开头，以/结尾的url
以http开头 —— http
中间是任意字符 —— .*
/结尾 —— /$ 需要一个转义字符

  1. var pattern = /http.*\/$/
  2.     str = 'https://c.runoob.com/front-end/854/';
  3. console.log(pattern.test(str)); 
  4. // true

进阶

1，分组

1.1）什么是分组
在一个长文本中，把字串作为一个整理划分出来。
分组重要的功能是捕获数据，当我们想要从匹配好的数据中提取关键数据的时候可以使用分组。
1.2）分组的符号 - ( 和 )
1.3）例子：

  1. // 只要匹配好的那一段东西 - （）
  2. var pattern = /(\d{4})-(\d{7})/,
  3.     str = '123123,123123,1234-1231231,';
  4. console.log(pattern.test(str));

1.4）使用分组提取数据

  1. var pattern = /<div>(.*?)<div>/g,
  2.     str = '<div>hi<div>';
  3. console.log(pattern.test(str)); 
  4. // 使用分组提取的 hi 这一部分，不包括<div>标签

1.5）例子
提取学号的信息，2019-3201-02,2019入学年份，3201是班级代码，02是班级序号，需要匹配不同的学号，提取关键信息，分为三个分组

  1. // 2019-3201-08
  2. // 2019-1212-22
  3. // 2011122102
  5. // 表达式如下
  6. /(\d{4})[\-.\s]?(\d{4})[\-.\s]?(\d{2})/g

(\d{4}) 表示 4个数字为一个分组
[-.\s]? 表示分隔符可以是 - 或 空格或者 都没有，？表示可以没有
(\d{2}) 表示要有两个数字

1.6）分组提取中的 或者 —— |

  1. // 匹配jpg 或者 gif 或者 png 格式
  2. /(jpg|gif|png)/g
  4. // 分组或者中不需要转义符号
  5. /(-jpg|-gif|-png)/g
  6. 11-jpg,
  7. 222-png,
  8. 333-gif

注意：这里的. 不需要转义，因为在分组中，不需要转义符号

1.7）非捕获分组 —— ?:
如果不需要捕获分组中的内容，但是需要使用分组中的特性，就需要使用非捕获分组
在分组的符号前面

  1. // 匹配数据不捕获
  2. 电话号码
  3. 01-13111
  4. 0728-12311
  5. 12312-21211
  6. tel：12312
  8. /(?:\d{2}|\d{4}|\d{5}|tel)[\-:](\d{5})/g

(?:\d{2}|\d{4}|\d{5}|tel) 表示不捕获数组，需要匹配的\d{2}有2个数字的情况 或者 有4个数字的情况 或者 有5个数字的情况 或者是 tel 文字的情况
[-:] 中间的分隔可以是 - 或者 ：
(\d{5}) 捕获后边的5个数字

1.8）分组可以嵌套

  1. // 排除qq 邮箱
  2. q=123@qq.com
  3. qweqwe@email.com
  4. qweqwe@wangyi.com
  5. test@qq.com
  6. asd@google.com
  8. /.+(@(?!qq)).+/

@(?!qq)) 排除@后边有qq的邮箱，但是只是匹配的—— @
所以需要把上面的规则当成一个分组，然后匹配后边的内容
(@(?!qq)).+ 匹配上没有@qq后边的内容—— @email.com
再匹配上前面的字符 —— .+(@(?!qq)).+

2，回溯引用

2.1）什么是回溯引用
就是找到后边和前面一样的匹配的东西
比如应该要这样去匹配，但是如果这样的前后面的不同的标签就是错误的，所以不应该匹配，这个时候就需要使用回溯引用

2.2）回溯引用的符号 —— \1 或 \2 等等
2.3）例子：
1）匹配html标签 里面的东西

  1. // 如果匹配 <font><font>
  2. /<\w+>(.*?)<\w+>/g

<\w+> 表示在尖括号内需要有至少一个的文字 +表示至少一个
(.*?) 表示尖括号内可以是任意字符或者没有字符
但是 这样的错误的html标签也会匹配上
所以修改为

  1. <(\w+)>(.*?)</\1>

<(\w+)> 把尖括号的内容放在一个分组中，表示一个分组
(.*?) 表示的是第二个分组
</\1> 表示后边的尖括号标签，\1表示回溯第一个分组的内容
\2 表示回溯的是第二个分组的内容

2）匹配类似ab ba这样关系的单词

  1. abba
  2. otto
  3. maam
  4. warrandice
  6. /(\w)(\w)\2\1/g

3，断言 也称 环视

先行断言和后行断言：
正向先行断言
反向先行断言
正向后行断言
反向后行断言

3.1）正向先行断言
3.1.1）概念：指某个位置向右看，表示所在位置右侧必须能匹配（从左往右）
3.1.2）符号：（?=表达式）

  1. // 比如匹配后边有你的喜欢
  2. 我喜欢你
  3. 喜欢你
  4. 我喜欢
  5. 喜欢
  7. /喜欢(?=你)/g

3.1.3）用处
可以用来判断字符串是否符合某个特性的规则

  1. 例如：提取包含至少一个大小写字母的字符
  2. Codesadasd123
  3. 123123123
  4. asdasdasdasdd
  5. CCqweqweqwe
  6. b编号qweqwe
  7. 123123asdasd
  9. /(?=.*?[a-z])(?=.*?)[A-Z].+/g

(?=.?[a-z]+) 分组里面 ?= 表示正向先行断言，后边的规则必须要符合，.? 表示后边可以是任意的数据，[a-z] 小写的a-z必须要出现
(?=.*?)[A-Z] 类似前面的意思，只是需要是大写的A-Z，
.+ 表示必须出现一个及以上

3.1.4）例子
验证密码强度
至少一个大写字母
至少一个小写字母
至少一个数字
至少8个字符

  1. Codesadasd123
  2. 123123123
  3. asdasdasdasddQQ123
  4. CCqweqweqwe123
  5. b编号qweqwe
  6. 123123asdasdQQQ
  7. 123qweQQQ
  8. 13QQWq
  9. Admin123
  11. /(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[0-9]).{8,}/g

(?=.?[a-z]) 一定有任意的小写字母 —— 分组都是表示匹配的规则
(?=.?[A-Z]) 后边要有任意的大写字母 —— 分组都是表示匹配的规则
(?=.*?[0-9]) 后边要有任意的数字 —— 分组都是表示匹配的规则
. 要有的位数 —— 表示总共的位数
{8,} 至少是8位

3.3）反向先行断言
3.3.1）保证后边不出现某些文字
3.3.2）符号：（?!表达式）
例子

  1. // 比如匹配后边没有你的喜欢
  2. 我喜欢你
  3. 喜欢你
  4. 我喜欢
  5. 喜欢
  7. /喜欢(?!你)/g

3.3.3）作用
排除一些规则

  1. // 排除qq 邮箱
  2. q=123@qq.com
  3. qweqwe@email.com
  4. qweqwe@wangyi.com
  5. test@qq.com
  6. asd@google.com
  8. /.+(@(?!qq)).+/

3.4）正向后行断言
3.4.1）概念：区别就是后行断言是从右向左看，表示所在位置的左边必须匹配表达式
3.4.2）符号：（?<=表达式）
例如：

  1. // 比如匹配前面有我，后边有你的字符串
  2. 我喜欢你
  3. 喜欢你
  4. 我喜欢
  5. 喜欢
  7. /(?<=我)喜欢(?=你)/g

3.5）反向后行断言
3.5.1）概念：表示某个位置所在左侧不能匹配表达式
3.5.2）符号：(?<!)

  1. // 比如匹配前面没有我，后边没有你的字符串
  2. 我喜欢你
  3. 喜欢你
  4. 我喜欢
  5. 喜欢
  7. (?<!我)喜欢(?!你)

3.5.3）例子

  1. // 匹配一个美元$符号的数据
  2. $123123
  3. $12312312$ 123123
  4. 123123$$$ 123123
  5. 123123$$$$ qweqweqwe
  6. $123+_123_+123
  8. (?<!\$)\$[^\$]+\$(?!\$)