正则语法速查

胖大人本胖 共 2.1k 字 预计 22 分钟
  1. 1. 修饰符
  2. 2. 方括号
  3. 3. 元字符
  4. 4. 量词
  5. 5. 基础表达式组合
  6. 6. 常用正则表达式解析
    1. 6.1. 邮箱正则
      1. 6.1.1. 正则一
  7. 7. 自用正则
    1. 7.1. 金额输入
    2. 7.2. 重置Img样式

修饰符

修饰符 描述
i 不区分大小写
g 全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m 执行多行匹配

方括号

表达式 描述
[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[a-z] 查找任何从小写 a 到小写 z 的字符。
[A-Z] 查找任何从大写 A 到大写 Z 的字符。
[A-z] 查找任何从大写 A 到小写 z 的字符。
[adgk] 查找给定集合内的任何字符。
[^adgk] 查找给定集合外的任何字符。
**`(red blue

元字符

元字符 描述
. 查找单个字符，除了换行和行结束符。
\w 查找单词字符(包括英文字母，数字，下划线)。
\W 查找非单词字符(包括非英文字母，数字，下划线之外的字符)
\d 查找数字
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配单词边界。
\B 匹配非单词边界。
\0 查找 NUL 字符。
\n 查找换行符。
\f 查找换页符。
\r 查找回车符。
\t 查找制表符。
\v 查找垂直制表符。
\xxx 查找以八进制数 xxx 规定的字符。
\xdd 查找以十六进制数 dd 规定的字符。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词 描述 备注
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
n{X} 匹配包含 X 个 n 的序列的字符串。
n{X,Y} 匹配包含 X 或 Y 个 n 的序列的字符串。
n{X,} 匹配包含至少 X 个 n 的序列的字符串。
n$ 匹配任何结尾为 n 的字符串。
^n 匹配任何开头为 n 的字符串。
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。

基础表达式组合

常用正则表达式解析

邮箱正则

正则一

  • [0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2} 此正则来自
    • [0-9a-zA-Z_.-] 方括号的含义是匹配方括号内的任意字符。所以这段内容要匹配的就是【0到9，小写a到小写z，大写A到大写Z，**_** (下划线)，**.** (点), - (中划线)】，只要在这个范围内都会被匹配到。再翻译一下这段内容就是[0123456789abcdefghigklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_.-]的简写
    • [0-9a-zA-Z_.-]+ 多了个加号，**+** 表示最少匹配一个。所以这段就是【在这个范围内的字符，最少要有一个，最多不限制】
    • [0-9a-zA-Z_.-]+[@] 又多了个[@] ,也就是说后面需要再跟一个**@**
    • [0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.- 继续再分析，现在又多了和开头一样的内容，也就表明**@** 后面需要在跟同样的字符
    • [0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+ 继续看，多了加号，也就表明**@** 后面最少跟一个满足条件的字符，多了不限
    • [0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+) 多了个小括号，小括号内有两个方括号和一个加号，第一个方括号内是一个点**.** ,也就是说满足了之前条件后，需要紧跟着的是一个点（asf@gmail后面需要跟一个点）；第二个方括号内是[a-zA-Z] ,也就是**.** 后面必须跟字母（小写a到小写z，大写A到大写Z）；**+** 说明**.** 后最少跟一个字母，最多不限制
    • [0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2} 小括号后多了个{1,2} ,说明这个修饰的是括号内的内容，也就是最少匹配括号内的一个内容最多两个（.cn.com 就是满足条件的）。
  • 分析完了之后，我们可以对此进行一下简化和修改
    • ^[0-9a-zA-Z_.-]+ 原始第一部分这些条件的字符长度不限制。我们可以这样修改**[0-9A-z_.-]{6,20}** ,首先字符长度最少6位，最多不能超过20位，其次a-zA-Z 我们进行了简化A-z；我们还在方括号前加了**^** ,表示，必须以这些字符开头，并且长度在6到20之间。
    • 接下来的**[@]** 没有问题，我们不需要修改
    • [0-9a-zA-Z_.-]+ 第三部分同样不限制长度，我们也改一下，改成**[0-9A-z_-]{1,8}** ,首先方括号内删去了**.** 的匹配，因为这部分后面就绪跟**.域名了** ，然后字母匹配作了简写，最后限制了长度1到8。因为QQ邮箱@ 后也就两位，谷歌邮箱@ 后也就5位，主流的邮箱基本也都在这个范围内了，超出这个范围的邮箱，也不是什么主流的了（最主要重点是正则）。
    • ([.][a-zA-Z]+){1,2} 这部分改成**([.][A-z]{2,3}){1,2}$** ,字母进行了简写，限制了结尾，如果不限制结尾，那么像.cn.com.cn.com.cn.com 都可以验证通过
    • 最终结果**^[0-9A-z._-]{6,20}[@][0-9A-z_-]{1,8}([.][A-z]{2,3}){1,2}$**

自用正则

金额输入

  • 条件

    1. 金额必须存在，不能是0
    2. 整数位最多8位
    3. 小数点后最多两位
    4. 只能有一个小数点

  • 分析

    1. 必须以数字开头和数字结尾

    2. 如果以**0开头，则整数位只可以有一个0，且0** 后面必须有一个小数点**.**

      1. 小数点后的第一位如果还是**0** ，则必须有第二位，且第二位只可以为**1-9** 的数字，并且以**1-9** 结尾。（即：0.03 是验证通过的，0.030 0.031 是验证不通过的）
      2. 小数点后第一位如果是**1-9** ，则第二位可有可无，并且第二位可以为**0-9** 的任意数字，并且以此结尾

    3. 如果以**1-9** 的数字开头，则可以直接以此结尾

    4. 或者以**1-9** 的数字开头，后面紧跟一个小数点**.**,小数点后紧跟两位任意数字，并以此结尾。（即：12.00 12.01 12.10 是验证通过的，12. 是验证不通过的）

/(^[0][.](([0][1-9]$)|([1-9][\d]?$)))|((^[1-9]{1,8}$)|(^[1-9]{1,8}[.][\d]{1,2}$)?)/

重置Img样式

背景： 小程序上做富文本解析，但是富文本的图片用户可以自定义宽高，并且单位还是px，在小程序上会造成左右滑动，图片过大问题，所以需要重置富文本的图片样式；

富文本示例代码： 

1
<p>第一个段落</p>\n\n<p><img alt=\"\" src=\"http://editor2019.oss-cn-beijing.aliyuncs.com/2019/12/2/1575254145446.jpeg\" /></p>\n\n<p>第二个段落测试</p>\n\n<p>&nbsp;</p>\n\n<p>第三个段落测试<img alt=\"图片二\" src=\"http://editor2019.oss-cn-beijing.aliyuncs.com/2019/12/2/1575254190286.jpeg\" style=\"height:1200px; width:1920px\" /><img alt=\"有宽无高\" src=\"http://editor2019.oss-cn-beijing.aliyuncs.com/2019/12/2/1575254224672.jpeg\" style=\"width:2293px\" /><img alt=\"有宽有高\" src=\"http://editor2019.oss-cn-beijing.aliyuncs.com/2019/12/2/1575254297352.jpeg\" style=\"height:1200px; width:1920px\" /><img alt=\"有边框\" src=\"http://editor2019.oss-cn-beijing.aliyuncs.com/2019/12/2/1575254344643.jpeg\" style=\"border-style:solid; border-width:4px; height:1200px; width:1920px\" /><img alt=\"有边距\" src=\"http://editor2019.oss-cn-beijing.aliyuncs.com/2019/12/2/1575254394748.jpeg\" style=\"border-style:solid; border-width:5px; float:right; height:1200px; margin:30px 25px; width:1920px\" /><img alt=\"乱序设置\" src=\"http://editor2019.oss-cn-beijing.aliyuncs.com/2019/12/2/1575254473318.jpeg\" style=\"border-style:solid; border-width:20px; height:500px; margin-bottom:17px; margin-top:17px; width:800px\" /></p>\n

  • 分析

    • 需要重置的只能是img标签的style，而不能是其他标签的style

    • 所以匹配<img和/> 之间的style

      1
      /(?<=(<img.+\s))(style)(?=(.+\s\/>))/gi

    • 进一步，只匹配<img和/> 内部的style的width和height

      /(?<=((<img.+\s))(style.+\s))(width)(?=(.+\s\/>))/gi

      /(?<=((<img.+\s))(style.+\s))(height)(?=(.+\s\/>))/gi