文档章节

javascript之正则表达式

暴走的土豆
 暴走的土豆
发布于 2016/11/01 20:24
字数 1315
阅读 5
收藏 0

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

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

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

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

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

首先,来看看一个史上最简单的正则表达式demo。

<!DOCTYPE html>

<html lang="en">

<head>
 
<meta charset="UTF-8">

 <title>正则表达式</title>

 <script>

  var str = "asdfg";
    
  var reg = /a/;              //正则表示式会包含在//中间,如“/正则表达式/”
    
  alert(reg.test(str));    //结果为true。检测str中是否有符合reg的匹配,返回的是布尔值

</script>

</head>

<body>

</body>

</html>

结果是弹出框会显示“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}/

运行下面代码:


<!DOCTYPE html>

<html lang="en">

<head>

    <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("错了");       
        
              }
          
      };
      
     };
    
</script>

</head>

<body>

<input id="txt1" type="text">

<input id="btn1" type="button" value="校验">

</body>

</html>

输入“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:匹配不是空白的所有

........未完,待更新。

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

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

© 著作权归作者所有

暴走的土豆
粉丝 1
博文 5
码字总数 2404
作品 0
成都
前端工程师
私信 提问
简单说 正则表达式——要注意lastIndex属性

说明 这篇文章,主要和大家聊聊JavaScript中RegExp对象的属性。 解释 每个RegExp对象都包含5个属性,source、global、ignoreCase、multiline、lastIndex。 source:是一个只读的字符串,包含...

FEWY
2017/07/10
0
0
学习Javascript的8张思维导图

分别归类为:  javascript变量  javascript运算符  javascript数组  javascript流程语句  javascript字符串函数  javascript函数基础  javascript基础DOM操作  javascript正则表达式...

thinkyoung
2014/09/23
0
0
8个实用的 JavaScript 测试及效验工具

JavaScript 是一款强大的广泛运用于现代Web站点及应用的脚本语言。作为一个技艺精湛的 Web 开发者,掌握JavaScript可以增强用户的使用体验,提供交互及富客户端等功能。 尽管JavaScript的语法...

小编辑
2010/04/15
4.5K
0
js中replace()方法使用注意

1.如果正则表达式中设置了修饰符g,那么源字符串中所有与模式匹配的子串都将替换成第二个参数指定的字符串;如果不带修饰符g,则只替换所有匹配的第一个子串。 2.replace()的第一个参数若是字...

依风听雨
2014/07/10
3.5K
0
精通正则表达式的 12 个有用资源

任何开发项目,不管使用的何种编程语言,经常都需要从给定的数据中提取一些值然后进行验证。例如输入的校验、过滤 URL 变量之类。而正则表达式用来处理这样的任务可以说是轻而易举,而且代码...

oschina
2013/07/31
14.1K
56

没有更多内容

加载失败,请刷新页面

加载更多

mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
今天
9
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
今天
6
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
今天
8
0
Flutter 系列之Dart语言概述

Dart语言与其他语言究竟有什么不同呢?在已有的编程语言经验的基础上,我们该如何快速上手呢?本篇文章从编程语言中最重要的组成部分,也就是基础语法与类型变量出发,一起来学习Dart吧 一、...

過愙
今天
5
0
rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部