JavaScript正则表达式学习总结

正则表达式是我前端学习中的一个痛点。

早就听说过,但是真正意义的跳进正则表达式的坑却是今天。

与其说是“正则表达式”,不如说是“规则表达式”。

运用一些它自身的一些规则来对字符串一系列的操作。

它的用处也仅仅是操作字符串而已。在其它地方也不怎么用的上它。

首先,来看看一个史上最简单的正则表达式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:匹配不是空白的所有

……..未完,待更新。

我理解的正则表达式就是这样的了。如有错误,请评论区指出。愿与大家一起探讨交流学习。

———–码字辛苦,请尊重原创———————-

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值