写在开头

在编码过程中，正则表达式一直是经常会出现但又困扰我们的知识点，笔者就是每次遇到正则表达式就相当头痛，往往都是从网上复制一个表达式到代码里草草了事。但其实如果不真正理解正则表达式的含义，我们就无法对其进行修改来应对特殊的需求。所以本文选取几个常用的正则表达式进行分析，旨在覆盖基础的正则表达式知识，让和我一样的新手们不再惧怕那些看起来复杂的正则表达式。

定义

正则表达式是用于匹配字符串中字符组合的模式。

分析模式

首先我会把常用的正则表达式列出来，接着介绍与该表达式有关的知识点，然后结合知识点并借用例子来逐步分析该正则表达式。最后我会列出一些匹配该正则表达式的例子。为了保证阅读质量，知识点分析不会一直重复，到后来会只介绍重要或新出现的知识点。

相关连接

• MDN官方文档
• 正则表达式30分钟入门教程
• 正则表达式在线检测
• 常用正则表达式大全

正式开始

用户名:

    ^[a-z0-9_-]{3,16}$

• 知识点:
  • ^ :匹配输入的开始
  • $ :匹配输入的结束
  • {n,m} :n和m都是正整数。匹配前面的字符至少n次，最多m次。如果n或者m的值为0，这个值被忽略。
  • [a-z] :表示范围a-z的一个字符集合，可以与该区间内任何字符匹配。
• 从左到右逐步分析：
  1. 字符 ^ 开始匹配输入
  2. [a-zA-Z0-9_-]表示该字符可以与a-z,A-Z,0-9，下划线，破折号范围内的任意一个字符匹配
  3. {3,16}表示用户名里有最少3个或者最多16个上述字符
• 匹配举例:
  • abcde
• 不匹配举例:
  • ab （太短）

手机号:

/^1[3|4|5|7|8][0-9]{9}$/
    //手机号的正则表达式通常被分为移动，联通等几种，因为本文注重于对正则表达式的理解，所以不作分类，只对一个通用的表达式进行分析。手机号的范围以百度百科为准，即第一位是1开头，第二位有3，4，5，7，8，第三位及之后的数字都是0-9的范围

• 知识点：
  • ^ :匹配输入的开始
  • $ :匹配输入的结束
  • [a|b] :表示匹配a或者b的一个字符集合
  • [0-9] :表示范围0-9的一个字符集合，可以与该区间内任何字符匹配
  • {n} :n是一个正整数，匹配了前面一个字符刚好发生了n次
• 从左到右逐步分析：
  • 字符^开始匹配输入
  • 1规定了必须第一位是1
  • [3|4|5|7|8]表示第二位可以从3，4，5，7，8这几个数字中任选其一
  • [0-9]{9}表示匹配任意9个在0-9范围内的数字，同时也规定了必须有9个数
• 匹配举例：
  • 13456789456
• 不匹配举例
  • 12345678987 (第二位不属于3，4，5，7，8任何一个)
  • 138078787 (第三位开始少于9个数)

邮箱：

    /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

• 知识点:

  • ^ :匹配输入的开始
  • $ :匹配输入的结束
  • + :匹配前面一个表达式一次或多次
  • \ :将其后的特殊字符，转义为字面量
  • [a-z] :表示范围a-z的一个字符集合，可以与该区间内任何字符匹配。

• 从左到右逐步分析（举例：wys123@gmail.com）：

  1. 字符^开始匹配输入
  2. [a-zA-Z0-9_-]表示该字符可以与a-z,A-Z,0-9，下划线，破折号范围内的任意一个字符匹配，紧跟着的加号表示可以匹配多个上述范围内的字符 (第2步代表wys123这个部分)
  3. @规定了必须有@符号
  4. [a-zA-Z0-9_-]+ 的含义与第2步介绍的一样 (代表gmail部分)
  5. \.将.从特殊字符转义为字面量，规定了必须有. （gmail.com中的"."）
  6. [a-zA-Z0-9_-]+ 的含义还是与第2步中的一样 (代表com部分)

• 匹配举例：

  • mario_a@qq.com
  • mario-a@qq.com
  • mario@a-b.c

• 不匹配举例：

  • marioqq.com
  • mario@qqcom
  • mar&io@qq.com

十六进制数字：

    ^#?([a-f0-9]{6}|[a-f0-9]{3})$

• 知识点：

  • ?:匹配前面一个表达式0次或者1次
  • (x): 匹配x并记住该匹配项，括号被称为捕获括号
  • {n} :n是一个正整数，匹配了前面一个字符刚好发生了n次
  • a|b :匹配a或者b

• 从左到右逐步分析：

  1. 因为?的存在，所以#在这里是可有可无的
  2. ([a-f0-9]{6}|[a-f0-9]{3})可以看成(A|B),其中A=[a-f0-9]{6}，代表一个刚好存在6个范围在a_f或者09的字符的集合；B=[a-f0-9]{3}，代表一个刚好存在3个范围在a-f或者0-9的集合。那么通俗讲，不考虑#，被匹配的字符集合长度为3或者6，这3个或者6个字符必须都在范围a-f或0-9内。

• 匹配举例:

  • #000000
  • #ffffff
  • aff

• 不匹配举例:

  • #00 （位数错误，#后面不是3位或者6位）
  • #-aaaaa（范围错误，-不在范围a-f或0-9内）

  ---

国内电话号码(带区号):

    ^\d{3}-\d{8}|\d{4}-\d{7,8}$

• 知识点:

  • \d:匹配一个数字
  • {n} :n是一个正整数，匹配了前面一个字符刚好发生了n次
  • {n,m} :n和m都是正整数。匹配前面的字符至少n次，最多m次。如果n活着m的值为0，这个值被忽略。

• 分析：
  这个例子与16进制的例子很像，可以将其看成X|Y,其中X=\d{3}-\d{8}，代表3个数字+一个-+8个数字；Y=\d{4}-\d{7,8}，代表4个数字+一个-+7或8个数字，所以该正则表达式匹配了两种电话号码的模式

• 匹配举例：

  • 021-86279200
  • 0574- 86279200

• 不匹配举例：

  • 021-86278 (不匹配，位数不够)
  • 86279200 （不匹配，虽然有时候也会需要匹配这一类不带区号的电话号码，但在本文采用的表达式中强制要求加上区号，所以这个例子也不匹配）

URL:

    ^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$

• 知识点:

  • \ :可以将其后的特殊字符，转义为字面量
  • ?: 匹配前一个表达式0次或1次
  • \w :匹配一个单字字符(字母、数字或下划线)，等价于[A-Za-z0-9_]
  • * : 匹配前一个表达式0次或多次

• 分析:
  这个表达式相对前面几个较复杂，我们先把它分块来看：

  
  
  URL分析
  • 红色部分:s后面的问号代表可以匹配http或者https，\将/转义成了字面量，所以连在一起就是http://或者https:// ，然后红色部分最后的问号代表https://或者http://可以都不要，直接写url比如www.baidu.com，这也是可以被匹配的
  • 橙色部分: [\da-z\.-]代表了表示了范围为数字，小写字母，点或者-的字符集合，后面的加号表示可以匹配多个上述范围内的字符
  • 绿色部分: \将.转义成了字面量，这里表示必须要有一个.字符
  • 蓝色部分: [a-z\.]代表了范围为小写字母或者点的字符集合，{2，6}表示可以有最少2个，最多6个上述范围的字符。橙色，绿色和蓝色部分组成了域名
  • 粉色部分: [\/\w\.-]表示了范围为/，字母，数字，下划线，点或者"-"的字符集合，后面的*表示可以匹配这个式子0次或者多次。其实笔者在这里对为什么要有两个*字符表示疑问，我认为这两个*号作用相同，取其一即可，粉色部分是路径和文件名
  • 绿色部分: \将/转义成字面量后，跟随的?代表该/可有可无，换句话说，www.baidu.com/something和www.baidu.com/something/ 都可以被匹配。

• 匹配举例:

  • https://www.google.co.uk/
  • https://zh.wikipedia.org/wiki/

• 不匹配举例:

  • htts://www.baidu.com (http要么不存在要么整个存在，这里不符合)

匹配首尾空白字符（可用来删除首尾空白字符）

    ^\s*|\s*$

• 知识点:
  • \s :匹配一个空白字符，包括空格、制表符、换页符合换行符
  • ^ :匹配输入的开始
  • $ :匹配输入的结束
  • 注意 \s和\S是相反的意思，不要混淆大小写
• 分析:
  • 其实往往越简单的表达式越难理解，对于这个表达式我决定用多个例子一步步解析。首先我们先详细测试一下表达式^a|b$所能匹配的字符串，在字符串"aabb"中，其匹配了第一个a和第二个b，换句话说，匹配了首尾的a和b。再来看一看^a*|b*，这次用字符串aacaabbcbb来测试，可以看到匹配了首尾的"aa"和"bb"，但并没有匹配两个c之间的aabb，这是因为^和$存在的缘故，实际上它会匹配开始后和结束前的a*或b*字符串. 那么现在我们重新来看上述的表达式，将a和b都替换为\s*后，该式子匹配的是字符串首尾的连续空白字符，这里有两个关键词:首尾和连续。之所以只匹配首尾，是因为字符串句首是匹配开始后最先被判断的，而字符串句尾是匹配结束前最后被判断的，所以符合了符号^和$所代表的意思，至于连续，则是由*所决定的，如果不带*，那么只会匹配首尾的一个空白字符。
• 匹配举例：
  • aacaab bcbb(只匹配首尾空格，中间的空格不匹配)
• 不匹配举例:
  • a b c(只匹配首尾空格，中间的空格不匹配)

未涉及到的常用特殊字符(摘自MDN)

• (?:x):匹配 'x' 但是不记住匹配项。这种叫作非捕获括号，使得你能够定义为与正则表达式运算符一起使用的子表达式。来看示例表达式 /(?:foo){1,2}/。如果表达式是 /foo{1,2}/，{1,2}将只对 ‘foo’ 的最后一个字符 ’o‘ 生效。如果使用非捕获括号，则{1,2}会匹配整个 ‘foo’ 单词。
• x(?=y):匹配'x'仅仅当'x'后面跟着'y'.这种叫做正向肯定查找。
  例如，/Jack(?=Sprat)/会匹配到'Jack'仅仅当它后面跟着'Sprat'。/Jack(?=Sprat|Frost)/匹配‘Jack’仅仅当它后面跟着'Sprat'或者是‘Frost’。但是‘Sprat’和‘Frost’都不是匹配结果的一部分。
• [^xyz]:一个反向字符集。也就是说， 它匹配任何没有包含在方括号中的字符。你可以使用破折号（-）来指定一个字符范围。任何普通字符在这里都是起作用的。例如，[^abc] 和 [^a-c] 是一样的。他们匹配"brisket"中得‘r’，也匹配“chop”中的‘h’。

总结

至此，借用一些常见的正则表达式，已经把MDN里提到的大部分特殊字符都分析了一遍，笔者本人也是一个新手，虽然花了很多功夫试图透彻理解上述各个表达式的含义，但文章中肯定还存在理解有偏差的地方，欢迎指正。