手把手分析一个邮箱正则表达式

正则这东西在很多人看来就是要背的记的东西很多，一串长的正则表达式看起来像看天书一样的。

比如这样的 🙂

/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
复制代码

其实总的来说正则其实也没那么复杂，可能是你用的频率比较低加上短期记忆把这个东西从意识上复杂化了。

在进入正题之前我们先做一个正则基础知识快速扫盲。

一个完整的正则表达式的组成有几大要素：

1. 基本结构 / / (两个左斜杠，中间写表达式)
2. 匹配模式 / /g,m,u,s,i (匹配模式是写在右边左斜杠的后面，比如常用的g,代表的是全局匹配，其他的不赘述)
3. 类，这个代表你想要匹配什么样的字符串或数字或者符号，比如/[0-9]/g(全局条件下有一个数字就算匹配成功),中间的[0-9]就代表你要匹配的字符串，也就是类。除了[0-9],还有[a-z]、\s、\S、\d、\D等等
4. 量词，用花括号{}表示，支持一位或者两位（{n}、{n,}、{n, m}）这几种写法都是可以的，如果只有一个n代表匹配几次，如果n逗号代表至少匹配n次，n,m代表匹配最少n次最多匹配m次。

  '231erwefsdf'.replace(/[0-9]{2,4}/g, 'q')
  // "qerwefsdf"
复制代码

5. 边界，^从最开始匹配，$从结尾匹配。\b匹配一个单词边界，也就是指单词和空格间的位置，如 er\b可以匹配”hover” 中的 ‘er’，但不能匹配 “verb” 中的 ‘er’ \B匹配非单词边界。如 er\B能匹配 “verb” 中的 ‘er’，但不能匹配 “hover” 中的 ‘er’

6. 分组使用 ()，作用是提取相匹配的字符串，使量词作用于分组 比如 lalala{4}是把 a匹配了3次而不是单词，如果希望作用于单词，可以使用分组 (lalala){4}

  // 分组一个常用的用法 一个分组按照从左往右的顺序分为$1 $2 $3... 使用replace可以对分组进行操作
  '231 my name is hhh'.replace(/([0-9]{2,4})/g, '$1 new add,')

  //"231 new add, my name is hhh"
复制代码

//可以用\1,\2...来引用正则表达式从左往右的第n个表达式
//匹配日期格式，表达式中的\1代表重复(\-|\/|.)
  var rgx =/\d{4}(\-|\/|.)\d{1,2}\1\d{1,2}/
  rgx.test("2016-03-26")
              
  // true
  rgx.test("2016-03.26")
              
  // false
复制代码

其他一些高级用法后面遇到了再讲解~

步入正题，分析一个邮箱正则表达式

例子

  /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
复制代码

当我们看到正则第一印象是看他的分组，一般复杂的正则表达式都是由不同的分组组成

第一个分组内容^([a-zA-Z]|[0-9])

[a-zA-Z] : 匹配任意大小写字符

| : 或判断

^ : 从最开始进行匹配

所以第一个括号的内容就是，从最开始第一个字符匹配任意大小写字符和数字，也就是邮箱第一个字符不能为符号

第二个分组内容 (\w|-)+

\w : 匹配包括下划线的任何单词字符。等价于“[A-Za-z0-9_]”

\ -: 任何符号需要匹配成字符串而忽略它真正的正则含义都需要加上\ ， \ + 为匹配加号字符串

+ ： 匹配一次或者多次

由此可知，这个分组是用来匹配邮箱的用户名的可以填入任何字符或者-号

第三部分 @[a-zA-Z0-9]+

这一部分是匹配邮箱服务商的正则比如 @163这类的

第四部分 .([a-zA-Z]{2,4})$

\ . : 匹配字符点

{2, 4}: 将前一个类匹配2到4次

$ : 从最后开始匹配

这部分主要是用来匹配邮箱后面的 .com .cn之类的

分割线

后续补充：

正向后向查询