正则表达式简单入门 & 实践
前言平时的工作中有很多地方都要用到正则表达式,不得不说,正则的表达式非常强大,比如,我们常用的jquery选择器,非常方便,jquery的源码中,选择器部分应用了大量的正则表达式。然而很多时候,当我们要用到正则的时候,很多人(也包括我 == ) 的做法都是打开百度,复制粘贴,试一下,没问题,大功告成。然而,当遇到特殊需求的时候,复制粘贴大法就不好用了,所以掌握这正则还是很有必要的。下面我就结合我的一些认识对正则进行简单的介绍,如有纰漏欢迎指出。 开胃小菜假如有这样一道题目: 请写一个邮箱验证的正则。 如果你能写出: /@/ 试一下: var reg = /@/; reg.test("xxx001@pingan.com.cn");//true 图示:
没毛病! 其实这是阿里的一道技术面试题,可以写的很简单,也可以写的很复杂,至于写出来的是什么样,就要看个人功力了。 继续往下走。说到邮箱格式,我们简单分析下: 邮箱的命名方式一般分为三部分
邮件地址部分的规则如下:
举几个栗子:
根据以上规则,我们先写一下邮件地址部分: var reg = /^w+([-+_.]w+)*$/; reg.test("123456"); //true reg.test("blue.sky"); //true reg.test("123bird"); //true reg.test("ex-xxx001"); //true 图示:
没什么问题,继续往下走。 @ 直接用@匹配就可以了 域名地址部分的规则:
@后面的第一个字符不能是中华线和点,简单写一下: var reg= /^@w+([-.]w+)*.w+([-.]w+)*$/ var reg = /^@w+([-.]w+)*.w+([-.]w+)*$/; reg.test("@123-abc.com.cn"); // true 最终的正则可以是这样子的: var reg = /^w+([-+_.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/; reg.test("scau_kk@xxx.com.cn"); //true 图示:
到这里,一种简单的邮箱正则就写好了(zz,罗里吧嗦一大堆)。 后面就简单的总结下。 正式入门字符类首先介绍下最常见的,也是最基本的 -字符类 。
对照着这个表格,上面的邮箱正则就很容易看了。 举几个简单的例子 console.log(/^w+$/.test("abc")); //true console.log(/^d+$/.test("12345")); //true console.log(/^D+$/.test(" ")); //true 标示
正则表达式量词一般用来指定数量,常用的如下所示:
举几个简单的例子 console.log(/^w{3}$/.test("abc")); //true console.log(/^d{1,5}$/.test("12345")); //true 分支条件正则表达式里的分枝条件指的是有几种规则,如果满足其中任意一种规则都应该当成匹配。 我们来看看个具体的例子: var reg = /0d{2}-d{8}|0d{3}-d{7}/; 这个表达式能匹配两种以连字号分隔的电话号码: 一种是3位区号,8位本地号(如010-12345678), 或者写一个简单的匹配手机号码的正则: var reg = /^1(3|4|5|7|8)[0-9]d{8}$/; 分组我们已经知道了如何重复单个字符,但如果想要重复多个字符又该怎么办呢? 分组的类型有四种:
举个简单的例子: 实现一个验证ip地址的正则: var reg = /^((2[0-4]d|25[0-5]|[01]?dd?).){3}(2[0-4]d|25[0-5]|[01]?dd?)$/; reg.test("127.0.0.1"); // true reg.test("255.255.888.888"); // false 结合图示:
集合图示就很清晰了。 上面的部分只是正则表达式很小的一部分,篇幅有限,下一篇再做介绍。 一个复杂的例子var parse_url = /^(?:([A-Za-z]+):)?(/{0,3})([0-9.-A-Za-z]+)(?::(d+))?(?:/([^?#]*))?(?:?([^#]*))?(?:#(.*))?$/; var result = parse_url.exec(url); names.forEach(function(item,index){ console.log(item + ": " + result[index]); }); console.log(result); // url: http://www.ora.com:80/goodparts?q#fragement // scheme: http // slash: // // host: www.ora.com // port: 80 // path: goodparts // query: q // hash: fragement 是不是感觉萌萌哒(滑稽脸.jpg) 看看图:
我们来分解下parse_url,看它到底是怎么工作的。 首先是 schemevar reg = (?:([A-Za-z]+):)
这个因子匹配一个协议名,当且仅当后面跟随一个
第一个捕获型分组的编号是1,所以该匹配的结果会出现在result[1]中。 slashvar reg = (/{0,3});
下一个因子是捕获刑分组2,这里需要对 / 进行转义,这样就不会被解释为结束符。 hostvar reg = ([0-9.-A-Za-z]+);
这第三个捕获型分组是是主机名. 由 portvar reg = (::(d+))?;
这第四个捕获型分组是端口号。它是由一个前置 pathvar reg = (?:/([^?#]*))?;
这个是另一个可选的分组,以一个 queryvar reg = (?:?([^#]*))?;
这个还是一个可选分组,以一个 hashvar reg = (?:#(.*))?;
这是最后一个可选分组,以一个 最后的 以上便是parse_url的所有因子了。 这个正则表达式还可以写的更复杂,但通常不推荐这么做。 再举个例子: var url = "http://www.ora.com:80/goodparts?q#fragement"; var result = url.split(/^(([^:/?#]+):)?((//)?([^/?#]*))?([^?#]*)(?([^#]*))?(#(.*))?/); console.log(result);
作为基础入门的介绍,写到这里就差不多了,后续内容后续会继续发布。 本大汪差不多也该收拾东西,明天回家~预祝大家 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |