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

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

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

比如这样的 :)

/^(^[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"
  1. 边界, ^从最开始匹配,$从结尾匹配。b匹配一个单词边界,也就是指单词和空格间的位置,如 erb可以匹配"hover" 中的 'er',但不能匹配 "verb" 中的 'er' B匹配非单词边界。如 erB能匹配 "verb" 中的 'er',但不能匹配 "hover" 中的 'er'
  2. 分组使用 (),作用是提取相匹配的字符串,使量词作用于分组 比如 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之类的


知识点复习
提供一些前端知识的经验总结,个人复习专用,如果帮到你点个赞

钻到底~

400 声望
28 粉丝
0 条评论
推荐阅读
Cornerstone.js 介绍 (持续更新)
JS编写的医疗DICOM影像浏览工具,用来支持医学影像的显示与交互。他的作用和他的名字一样基石,很多医疗的影像阅片系统都是基于cornerstone.js开发的,如OHIF Viewer、Lesion Tracker等,目前国内医疗大部分结合A...

风吹一个大耳东3阅读 8.4k评论 5

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.2k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2.1k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.7k评论 3

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 19.9k评论 9

钻到底~

400 声望
28 粉丝
宣传栏