JavaScript正则表达式学习总结

最新推荐文章于 2024-09-20 11:38:47 发布

暴走的小土豆

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量369

点赞数

分类专栏： Javascript 文章标签： javascript 正则表达式前端

本文链接：https://blog.csdn.net/LiuLee18/article/details/64991859

版权

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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

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

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

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

首先，来看看一个史上最简单的正则表达式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]也有或者的意味。