5分钟教你学会JavaScript正则表达式

  正则表达式在实际开发过程中和技术面试过程中的重要性不言而喻,本文仅仅只是教你如何在几分钟之类学会正则表达式,对于它的原理及运行机制不做介绍。

第一:什么是正则

  正则表达式是一种用来描述一定数量文本的模式,用来匹配相同规范样式的文本。在JavaScript中用RegExp对象表示正则表达式( 即Regular Eexpression),它是对字符串执行模式匹配的强大工具。我们可以参看W3C所给的说明。

 

第二:创建一个正则表达式

  在JavaScript中创建正则表达式,有2种方式,隐式显式创建。 (gi 后文会给出解释)

  隐式创建:

1 var regExp=/正则表达式/gi;  

  显式创建:

1 var regExp=new RegExp("正则表达式","gi");

  由两种创建方式我们已经知道了正则表达式的基本构建方法。即 /正则表达式/gi;

在具体介绍正则表达式的使用细则及语法之前,我们先来学习JavaScript中RegExp类的两个方法,以方便我们后文的代码讲解,更多方法参看W3C文档。

  ①match:找到一个或多个正则表达式的匹配。

    W3C所给的解释为match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。

  ②replace:

    replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

鉴于RegExp方法较多,此处我们暂列两个,方便后文使用。

第三:语法详解

  我会根据循序渐进的方式帮助大家理解正则的具体语法,提出问题,然后代码解决。

  ①匹配字符串中是否存在abc字符串,并返回

    正则表达式 /abc/gi

代码:

1 var content=id.innerText;         // 获取需要匹配的字符串内容
2 var myreg=/abc/gi;                // 正则表达式
3 res=content.match(myreg);
4 for(var i=0;i<res.length;i++){
5     window.alert(i+" "+res[0]);    // res详情参考W3C文档
6 }

  由上可以知道,我们若要匹配某个具体的字符串,只需在两个 / 字符之间写入匹配的字符串。

  ②匹配 1221、112233、010-11223344 形式的字符串

当需要匹配上述字符串时,我们采用第一种方法已经不能适用。在讲述新方法之前,先讲解如何匹配数字表示和反向引用的一些粗浅知识。

  匹配数字我们用\d表示,在JavaScript正则表达式中用()包括起来的内容是一个子表达式,如:\(\d)(\d)\gi 其中第一个括号表示第一个子表达式,第二个括号表示第二个子表达式。现在给出1221的正则表达式,为

/(\d)(\d)\2\1/gi;   // 1221  2334  5667 类似格式的数字

  上述\2\1大家不理解什么意思,这就要牵涉反向引用的概念了,\2表示匹配的是和第二个子表达式的相同的内容(即在此处第二个数和第三个数相同),\1表示匹配的是和第一个子表达式的相同的内容(即在此处第一个数和第四个数相同)。

  当我们理解了反向引用的概念后,匹配后面2个格式的表达式就很轻松了。

  112233格式:

/(\d)\1(\d)\2(\d)\3/gi;      // 112233  334422 类似格式的数字

  010-11223344格式:

/(\d){3}-(\d)\2(\d)\3(\d)\4(\d)\5/gi;        

  该正则表达式,(\d){3}表示为3个数字。

  例子:

    若我们用1{3}匹配1111111会得到多少什么结果?用1{3,4}匹配1111111会得到什么结果?编写程序证实你的猜想。({3,4}表示匹配至少3个,至多4个)

看到此处,希望读者能够运用我上述所讲的方法,证实自己的猜想,因为里面牵涉JavaScript正则匹配的两个规则。

    答案:

      1{3}匹配1111111得到111  111。这是因为正则匹配的时候,当匹配到一个字符串时,会自动从下一个字符开始匹配。

      1{3,4}匹配1111111得到1111  111。JavaScript匹配的时候遵循一个贪婪原则,即尽可能匹配多的,当多的匹配不满足时,才退而求其次,在此处若能匹配到1111则会先匹配4个1,匹配不到则匹配111。

  ③+、*、?讲解

    +:表示匹配1次到任意多次

    如:

/a+/gi;             // 匹配 a一个至多个
/(\d)+/gi;           //  匹配 数字一个至多个

    *:表示匹配0次到任意多次

    如:

/a*/gi;
/(\d)*/gi;
/a1*/gi;             // 若匹配a111   得到a111

    ?:表示匹配0次到1次

/a1?/gi;              // 若匹配a111  得到a1

  ④{}、[]、^、$ 讲解

    {}:上文已经提及,表示具体量

    []: 表示范围

    如:

/[a-z]/gi;                       // 匹配 a到z  的任意1个字符,等价于/[a-z]{1}/gi
/[a-z]{2}/gi;                    // 匹配 a到z  的任意2个字符

    ^:表示“匹配目标字符串的开始位置”,若此字符若位于[]括号内,表示“否定”的意思

    如:

/[^a-z]/gi;              // 不是a到z的任意一个字符
/[^0-9]/gi;                // 不是0到9的任意一个字符
/^[a-zA-Z0-9]{2}/gi;       // 以数字或者字母开头的2个字符

    $:表示“匹配目标字符串的结束位置”

  ⑤其他字符表示

    \D :\d的反面,匹配非数字 ,即等价于[^0-9]

    \w :匹配任意英文字符

    \W:\w的反面,匹配非英文字符 ,即等价于 [^a-zA-Z0-9_]

    \s  :  匹配任何空白字符(空格,制表符等)

    \S :\s的反面,即匹配任何非空白字符

    .   : 匹配出 \n 之外的所有字符,如果要匹配,匹配自己则需要使用 \. (即匹配. 为/\./gi)

  ⑥需要转义的字符:

    正如⑤中的 . 所示,当需要匹配 . 的时候,我们需要加上转义字符。总结一下,JavaScript中匹配字符需要用到转义字符的有。 

    .  *  +  ( )  $  /  \  ?  [  ]  ^  {  }

  ⑦选择匹配符 |

    在正则匹配的时候,有时需要匹配多个正则表达式,此时则需要用到选择匹配符|,可以看做是编程中“或”的意思

    如:

/[a-z]{3}|[A-Z]{2}/g;           // 匹配a到z的3个字符或者是A到Z的2个字符都可

第四:最后补充

  讲解一下正则表达式中gi所表达的意思。之所以放在文章最后,是为了帮助大家直接了解正则有关的内容,更快的方式来使用它。

gi是RegExp类中的实例属性:其实有gims四个,其中:

  g: global之意,表示全局匹配

  i:  ignoreCase之意,表示忽略大小写

  m: multiple之意,表示多行匹配,即考虑换行这个因素,即匹配时将换行后的字符串当作新的一个字符串匹配

  s: source之意,表示返回创建RegExp对象实例时指定的表达式文本字符串

正则匹配时根据需要填写相应的属性。

  最后,希望这篇文章能够真正帮助到那些正则学习正则表达的人们,小白一枚,粗浅言论,希望大家勿喷。

  给大家一个js验证表单的网址,里面有一些正则表达式验证,可以学学稳固一下知识:http://www.jb51.net/article/4976.htm

时间: 2024-10-11 22:23:02

5分钟教你学会JavaScript正则表达式的相关文章

五分钟带你学会 JavaScript 闭包

闭包,是javascript中独有的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述,直接上干货,让你分分钟学会闭包! 1 闭包–爱的初体验 在接触一个新技术的时候,我首先会做的一件事就是:找它的demo code.对于码农们来说,代码有时候比自然语言更能理解一个事物. 其实,闭包无处不在,比如:jQuery.zepto的主要代码都包含在一个大的闭包中,所以下面我先写一个最简单最原始的

三分钟带你学会 JavaScript 闭包

闭包,是javascript中独有的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述,直接上干货,让你分分钟学会闭包! 1 闭包–爱的初体验 在接触一个新技术的时候,我首先会做的一件事就是:找它的demo code.对于码农们来说,代码有时候比自然语言更能理解一个事物. 其实,闭包无处不在,比如:jQuery.zepto的主要代码都包含在一个大的闭包中,所以下面我先写一个最简单最原始的

20分钟教你学会熟练使用ansible

运维自动化之ansible的安装与使用 随着服务器数量的增长,我们需要一个批量工具去提高工作效率,之前用的是puppet,ansible的简单,适用让我眼前一亮,决定写一篇ansible从安装到基本配置的文档供新手参阅. 一.安装1.安装第三方epel源centos 6的epel    [[email protected] ~]# wget http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm    [

5分钟教你学会Java properties

以前年轻的时候,总喜欢在代码中把参数的值写死,改一遍跑一遍,可移植性太糟糕了.自从用了Properties类之后,省事了,代码也规范了一点了.也就是将常用的,且经常需要修改的参数放置在xx.properties文件中,利用Java中提供的Properties类读取文件中的参数值,从而避免多次在代码中修改参数的值,一劳永逸. Properties其实是继承自HashTable,所以用起来也很简单,提供的操作主要有: load(inputStream) : 加载配置文件 store(outputSt

1分钟教你学会如何使用远程桌面命令?

1.打开电脑,按下Win+R键打开运行命令; 2.输入远程连接命令,mstsc,这样就可以快速连接 3.输入正确的用户名和密码,连接远程服务器 4.下图是本地显示远程桌面的连接窗口 5.连接不成功的原因: 服务器用户名密码错误,服务器用户名密码都有大小写,重新输入一次即可 6.连接不成功的原因: 服务器过期,由于服务器大部分都是租用的,一般都会到时间要续费的 7.连接不成功的原因: 服务器重新装了系统,服务器重装系统后,远程登录密码大部分会改变,因此也会造成连接不成功 8.其它原因: 服务器受到

十分钟教你学会zookeeper安装和集群搭建(伪集群 )

1. zookeeper介绍 ZooKeeper是一个为分布式应用所设计的分布的.开源的协调服务,它主要是用来解决分布式应用中经常遇到的一些数据管理问题,简化分布式应用协调及其管理的难度,提供高性能的分布式服务.ZooKeeper本身可以以Standalone模式安装运行,不过它的长处在于通过分布式ZooKeeper集群(一个Leader,多个Follower),基于一定的策略来保证ZooKeeper集群的稳定性和可用性,从而实现分布式应用的可靠性. ZooKeeper是作为分布式协调服务,是不

5分钟教你学会Django系统错误监控

一.监控所有的request请求 如何实现系统监控,自动发送错误日志的邮件呢? 只需配置配置settings文件即可. 1.设置发送邮件配置信息 邮件会发送到ADMINS设定的邮件列表中. SERVER_EMAIL ='[email protected]' DEFAULT_FROM_EMAIL ='[email protected]' ADMINS = (('receiver','[email protected]'),) EMAIL_HOST ='smtp.exmail.qq.com' EMA

三分钟学会 JavaScript 单元测试

此篇文章使用 js-test-driver , 希望给无任何JavaScript 单元测试经验的开发者, 能在最短的时间内, 开展单元测试的工作? 附件: 三分钟学会 JavaScript 单元测试

自己实现的一款在线Javascript正则表达式测试器——JRE-Parser

本文最初发布于我的个人博客:http://jerryzou.com/posts/jreparser/ 昨天在看<正则表达式30分钟入门教程>的时候,看到博主自己实现了一个C#写的正则测试器,看上去挺方便的样子.但是我自己又不太喜欢乱装东西,所以寻思着能不能自己实现一个javascript正则表达式测试器.于是几十行代码实现了这样一个正则测试器. 先展示一下0.1版本的效果图吧~ 页面还比较简单,但是基本功能算是有了.可以正常使用~. 关于怎么从用户的输入中提取正则表达式的过程多亏@依云大神提点