正则表达式是我前端学习中的一个痛点。
早就听说过,但是真正意义的跳进正则表达式的坑却是今天。
与其说是“正则表达式”,不如说是“规则表达式”。
运用一些它自身的一些规则来对字符串一系列的操作。
它的用处也仅仅是操作字符串而已。在其它地方也不怎么用的上它。
首先,来看看一个史上最简单的正则表达式demo。
<title>正则表达式</title>
<script>
var str = "asdfg";
var reg = /a/; //正则表示式会包含在//中间,如“/正则表达式/”
alert(reg.test(str)); //结果为true。检测str中是否有符合reg的匹配,返回的是布尔值
结果是弹出框会显示“true”;
还好吧,正在查看这篇文章的你应该没蒙圈吧。
接下来,该放大招了。
这里我们以邮箱的正则表达式来学(zhuang)习(B)。
大家还记得邮箱的一般格式吗?
不知道没关系,那就自行脑补自己的QQ邮箱。
如果你还说不知道,我单纯的心就这样被你给欺骗了,你一定不忍心吧。
言归正传:以lewis3212@outlook.com为例。(有数字,有字母正好)
我们分析一下:
首先将这个邮箱一刀切成3块,像切蛋糕一样。以“@”和“.”为切点。
于是乎,就成为了这个样子lewis3212 @ outlook . com
然后呢,我们将要用一串火星文来表示这三块蛋糕。其实火星文指的是正则表达式。
第一块蛋糕:lewis3212 <==> ”\w+“
分析 : \w 指的是包括数字,字母,下划线的所有东西。可是‘\w'只能匹配一个字符,我们这儿有一串呢,
是吧。所以“+”就派上用场了。这个“+”,你可以理解成“很多”的意思。这里,就是匹配一串有字母,有数字的
字符串。
@ <==> 这好办,直接用它就行了
第二块蛋糕:outlook <==> “ [a-z0-9]+"
分析 : 这里是一串字母,本来对于上述邮箱我们用[a-z](它的意思是取a到z的其中一个,注意有中括号)
就绰绰有余的,但是邮箱千千万,还有126邮箱呢。所以这儿加上了[0-9](它的意思是取0到9的其中一个,
注意有中括号)。而[a-z0-9]的意思是取a-z,0-9的其中一个。而我们这要取一串,所以呢,”+“说我胡汉三又
回来了。
..........(当然了只有一个小点) <==> "\."
分析: 因为我们火星文中的'.’有其它意思(指代所有一切东西)。所以我们要用“\”来转义一下。
第三块蛋糕:com <==> "[a-z]{2,4}"
分析:后缀名,我们知道这里为什么要用[a-z]了吧。什么,你不知道,因为“com”是字母啊。但是为什么
没有那个神奇的“+”呢?真是个good question。根据前面我们的分析,“+”可以理解成很多的意思,但是这儿
吧,我们不需要太多,我最少要2个,最多要4个,就满足我的需求了。所以就用到了{2,4}。{2,4}只对它前
面的[a-z]起作用。
补充:
{m,n} ==>最少m个,最多n个
{m,} ==>最少m个,无上限
{ ,n} ==>没限最少,最多n个
{n} ==>刚好n个
所以:邮箱的火星文出来了:/\w+@[0-9a-z]+\.+[a-z]{2,4}/
运行下面代码:
<meta charset="UTF-8">
<title>验证邮箱</title>
<script>
window.onload = function () {
var oTxt = document.getElementById("txt1");
var oBtn = document.getElementById("btn1");
oBtn.onclick = function () {
var re = /\w+@[0-9a-z]+\.+[a-z]{2,4}/; // /^\w+@[0-9a-z]+\.+[a-z]{2,4}$/
if(re.test(oTxt.value)){
alert("对了");
}else {
alert("错了");
}
};
};
“`
输入“lewis3212@outlook.com”。弹出“对了”。
终于松口气了,是吧。
可是,还没完。
当你输入“正则lewis3212@outlook.comer”。我保证绝对不是一个邮箱,很灵异,它会弹出两个让你瞳孔放
大的两字”对了”。这是为什么了?
原来少了两个符号^,$.前者是从行首匹配,后者是匹配行尾。所以正确的邮箱正则表达式是
/^\w+@[0-9a-z]+.+[a-z]{2,4}$/
此外还有些火星文没提到呢,下面将一一列出。
i: 不分大小写
g:全局匹配
|:“或者”,不知道小伙伴们忘了没,[abc]也有或者的意味。
\d: d指的是digital,数字。匹配数字的。
\D:而\d的孪生兄弟确是匹配除了数字的一切东西。
\w:匹配包括数字,字母,下划线的所有东西
\W:匹配除了数字,字母,下划线的所有东西
\s:匹配空白的东西,包括空格,制表符
\S:匹配不是空白的所有
……..未完,待更新。
我理解的正则表达式就是这样的了。如有错误,请评论区指出。愿与大家一起探讨交流学习。
———–码字辛苦,请尊重原创———————-