javascript中正则表达式语法详解

  好久都没有写博客了,主要是太懒了,尤其是在阳春三月,风和日丽的日子,太阳暖暖的照在身上,真想美美的睡上一觉。就导致了这篇博客拖到现在才开始动笔,javascript的正则这一块也不是什么新的东西,主要是以前本人一遇到写正则的需求就开始头大,头疼,网上剽窃,东拼西凑,反正就是各种不适应,所以我打算系统的把正则表达式看一遍,一来是自己有所提升,这一块知识点的查漏补缺,二来是给大家分享一下。好了,下面我们直接进入主题:

  正则是匹配字符串特定模式的一种表达式,官方是这样说的,但我的理解不外乎就是匹配字符窜嘛,举个例子大家就明白了。比如我们要验证邮箱,试想一下如果我们不用正则来匹配,直接用代码,循环,判断各种捣鼓来验证还真是一件非常麻烦的事情。如果用正则怎么来做了,这里为了照顾小白(当然我也是重小白走来的,所以小白很单纯,小白很善良,小白很伟大)我就写伪正则来描述: 所有0-9或者a-z或者A-Z的字符出现一次到多次 加上(就是前面出现了的所有0-9...的字符跟上) "."或者"_"出现0次或者1次,然后在跟上 "@"符号 跟上 xxx.xx这种格式。 不知道我这样来描述各位亲有没有明白一点,不明白也不要紧,这里我只是随便举个列子,提一下,在下文的某个位置我会专门一步一步分析几个非常复杂的正则表达让大家能够很快的明白正则的语义。

  上面举了一个邮箱地址的正则表达式,比如这一窜 /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/ ;要看懂坑爹的这一窜,还得从基础一步一步的来。首先给大家介绍javascript经常使用正则的对象和方法:

  RegExp 这个是正则对象, 比如匹配字符串"1234"中的"23"可以这样玩: (new RegExp("23")).test("1234"); //out true;

  当然正则对象还有一种写法:

var reg = /23/; reg.test("1234") //out true;

  RegExp.test(String) ; //这个方法上面的用上了,匹配字符串是否为指定格式

  RegExp.exec(String); //返回查询的值

    var str = "123 aa cat Cat caT";

    var reg = /cat/i;

    reg.exec(str); // out "cat" 如果有则返回,没有的话就返回null

  String.search(RegExp) ; // 返回索引位置,类似indexOf()

    var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
   var reCat = /cat/gi;
   alert(data.search(reCat)); //out "23"

  String.replace(RegExp, String); // 将字符串替换成另外一个字符窜,RegExp指定的格式,String要替换的字符串

    var str = "1234aa67aa89";
   var reg = /aa/gi;
   str.replace(reg, "") ; //out "12346789"

  String.split(RegExp) ; // 将字符串拆分成数组

    var str = "1234aa67aa89";
   var reg = /aa/gi;
   str.split(reg) ; //out [1234, 67, 89]

  String.match(RegExp); //将指定格式的字符串以数组的方式返回

    var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
   var reCat = /cat/gi;
   var arrMactches = data.match(reCat); // out ["Cat", "cat"]

  上面的的方法是在字符串过滤操作中经常用到的方法, 当然还有一些我没有全部列举出来,用到了在去差API也不迟,好了我们熟悉了操作正则的这些方法之后我们紧接着正则表达式了,所谓表达式意思就是用一些字符按照先后顺序组合在一起表示的一层含义,所以我们先要重正则表达式的元字符说起,其实元字符就相当于javascript语言的关键字,比如你定义变量不能这样干 var if = "xxxx"; 正则有一下一些元字符:{ [ ^ | $ ] } ? * + . 这些都是正则的元字符,这里我就不解释意思了,用到了时候再来分析。如果大家想知道可以找度娘

  字符类

  字符类是用于测试字符串的组合, 将一些字符放入方括号中,就可以有效的告诉正则表达式去匹配第一个,第二个,第三个...比如/[abc]/,这个又称之为简单类

    简单类:

 var str = "cat 123 caT 234 cAt 345 CaT";
   var reg = /cat/gi;
   str.match(reg) ; //out ["cat", "caT", "cAt", "CaT"]

    负向类和范围类: 这里要解释下"^" "-"这两个符号, "^"这个符号的意思就是取反,而"-"是范围, g表示全局,i表示忽略大小写,/[^2-3a-z]+/gi 所以这句话的意思就是: 除了2到3和a到z的所有字符出现1次到多次,并且在全局中忽略大小写。其实细心的看官这里还会发现一个知识点, 2-3a-z这一句其实是一个组合,又称之为组合类,下面的这个实例就用到了正则的几个知识点: 1.负向类,意思就是取反; 2. 范围类; 3.组合类,相当于逻辑运算符的并且&&

var str = "cat123caT234cAt345CaT";
   var reg = /[^2-3a-z]+/gi;
   str.match(reg); //out ["1", "4", "45"]

    预定义类:

代码        等同于          匹配
.         [^\n\r]         除了换行和回车符之外的任意字符\d        [0-9]          数字\D        [^0-9]          非数字字符\s        [\t\n\x0b\f\r]      空白字符\S        [^\t\n\x0b\f\r]     非空白字符\w        [a-zA-Z_0-9]       单词字符,所有的字符数字下划线\W        [^a-zA-Z_0-9]      非单词字符

  量词:量词是可以指某个特定模式出现的次数,可以是硬性量词,比如某个字符出现三次,也可以是软性量词,比如某个字符至少出现一次。正则中的量词有以下这些

  贪婪量词:

  ? 出现零次到一次

  + 至少出现一次或者多次

  * 出现0次到多次

  {n} 出现n次

  {n,m}出现n次到m次

  {n,} 至少出现n次或者n+次

  说道量词的话有贪婪, 惰性和支配量词,以上的这些量词都是贪婪量词,由于javascript正则引擎对支配量词支持不是很好,所以我们这里重点来说贪婪和惰性量词,先把惰性量词列出来之后在来说说他们的关系和区别

  惰性量词:

  ?? 出现零次到一次

  +? 至少出现一次或者多次

  *? 出现零次到多次

  {n}? 出现n次

  {n,m}? 出现n次到m次

  {n,}? 至少出现n次或者n+次

  贪婪量词在匹配字符串的时候首先看是否匹配字符串,如果没有找到匹配的则去掉字符串中最后一个字符再次尝试,整个过程一直重复,直到字符串为空时停止。而惰性量词正好相反,首先查看字符串中第一个字符是否匹配,否则在读入下一个字符在进行匹配,直至重复这个过程到读入整个字符窜都不匹配时停止。可能说了这些多还是不太明白,下面我会举个例子帮助大家理解

     var str = "abbbaabbbaaabbb1234";
     var re1 = /.*bbb/g;  //贪婪匹配
     var re2 = /.*?bbb/g; //惰性匹配
     alert(str.match(re1));
     alert(str.match(re2));

  亲,你觉得第一个alert会输出什么呢,如果是[abb, aabbb, aaabbb]的话的, 那么恭喜你答错了,前面说过*是贪婪量词,它在匹配的时候会首先匹配整个字符串,是从字符串的尾部操作的,当去掉字符1的时候就发现剩下的字符串"abbbaabbbaaabbb"已经达到它匹配的要求了,所以它返回的结果就是字符串"abbbaabbbaaabbb", 而第二个alert为啥子会打印[abbb,aabbb,aaabbb]呢,我们再来一步一步的看,这个是惰性匹配,所以它在匹配字符串的时候是从字符串开始的部分取出第一个字符进行匹配,发现不行,在取下一个,还是不行,直至取到了"abbb".好,现在发现匹配了,然后将这个装进数组, 在从剩下的字符串里面取,直至最后将符合指定模式的子字符串装进数组,所以最后就返回[abbb,aabbb,aaabbb]。只要稍微花点心思动动手还是很容易就理解了。好了,关于正则的量词的一些知识点就讲到这里,万里长征才走一半,下面接到说正则的复杂模式,上面说到的字符类那一块都是正则的简单模式,只能做一些简单的字母,数字,汉字,长度等效验,如果在掌握了下面的复杂模式就可以非常牛逼的匹配各种复杂,蛋痛的字符串模式了,比如邮箱,身份证验证,标签过滤,包括jquery类选择器,sizzle引擎过滤器。好了,直接切入主题吧:

复杂分组

  分组模式:分组模式就那么回事我用一个例子或许你一下子就豁然开朗了

//如果要匹配"andand"的怎么做呢,你也许会说可以这样干
      var str = "asdfandandcxhksdf";
      var reg = /andand/gi;
      alert(reg.test(str)); //output true
      //好的,亲,这样匹配也是可以的,但是有不知道多少and怎么办呢,
      //不可能全部加在正则表达式里面吧,此时分组的便捷性就体现出了
      //出了它的优势,我们可以这样干:
      var reg = /(and){2}/g; //注意这里()是元字符分组的意思,{2} 是量词,贪婪量词

  捕获分组模式:指的是RegExp.$1这个属性的值,这个值就是正则中一个分组的值,在这个对象RegExp中,定义了最多支持RegExp.$1-RegExp.$100个分组值,还是来个例子吧

 var str = "asdffirstfirstsecondsecond1234";
       var reg = /(first){2}(second){2}/gi;
       reg test(str); // 要必须匹配之后才有下面的值
       alert(RegExp $1); //output "first"
       alert(RegExp $2); //output "second"

    非捕获分组模式:上面说了捕获分组,那非捕获分组其实就是不让RegExp.$1引用了,这里要说一点的是在捕获分组中RegExp.$1会创建正则的反向引用的存储空间,所以在进行捕获分组时会有更多的空间开销,还会降低匹配速度。那现在晓得非捕获分组的好处了吧。简单的说就是在正则表达式()里面加上一个问号和冒号/(?:first)/,语法就是这样的,还是看代码吧

  var str = "#123456789";
       var reg = /#(?:\d+)/;
       reg.test(str);
       alert(RegExp.$1);   //output "" 注意这里取消了反向引用就为空了

  候选模式:候选我的理解就是或者,举个例子,比如你要对一个表达式同时匹配"red", "black"的话怎么做呢, 如果是在以前的话就要写两个正则来进行分别匹配,而加入了候选就可以非常方便的操作了,还是上代码吧

var str1 = "111red222";
      var str2 = "111black111";

      var reg = /(red|black)/;
      alert(reg.test(str2)); //output true
      alert(reg.test(str1)); //output true

  前瞻模式:有时候我们希望某个字符分组出现在另外一个字符分组之前才去捕获,这相当于是在正则里面做判断了, 果然是高级功能,灰常强大,我在写正则的时候也没有用到过, 只是书上都说了, 我还是把它搬到这里来出哈风头。 上代码吧

/*
       *前瞻又分为正向前瞻和反向前瞻
       *下面我会用代码加注释的方式加以描述
       */
       //正向前瞻
       var str1 = "bedroom";
       var str2 = "bedding";
       var reg = /(bed(?=room))/; //符号?=来表示正向前瞻,表示在字符串"bedroom"中如果bed后面有room的字符才捕获,顺序执行
       alert(reg.test(str1)); //output true
       alert(RegExp.$1);   //output "bed" 捕获到反向引用bed字符串
       alert(reg.test(str2)); //output true
       //反向前瞻
       var reg = /(bed(?!ing))/; //符号?!来表示反向前瞻,表示在字符串"bedding"中如果有"ing"子字符串才捕获,逆序执行
       alert(reg.test(str2)); //output true
       alert(RegExp.$1);   //output "bed" 捕获到反向引用bed字符串
       alert(reg.test(str1)); //output true
       alert(RegExp.$1);
       /*以上代码如果各位亲测试不通过的话那就是正则引擎不支持前瞻*/

  边界模式:这个模式很重要也很常用,比如去掉字符串的首尾空格,那下面说说几种边界的可能:

  ^行的开始 $行的结尾 \b单词的边界 \B非单词的边界

//用一个例子来说明边界
      var str = " xiaoming   "
      var reg = /(^\s+)|\s+$/g; //(^\s+)去除字符串开始位置的空格,\s+$去除字符串尾部空格,|这个符号想必不用我说了吧,候选
      var str = str.replace(reg, "");
      alert(str); //output "xiaoming"

  多行模式:这个也是正则复杂模式里面最后一个模式了,也不经常用,不管你信不信,反正我是信了,还是直接来看代码吧

//请看下面这个实例,\n在前面的预定类,表示换行
      var str = "first\nsecond\nthread";
      var reg = /^(\w+)/g;
      alert(str.match(reg)); //output 若不指定m行的话就输出"first"
      var reg = /^(\w+)/gm;
      alert(str.match(reg)); //output [first, second, thread]

  到目前为止正则表达式的语法,规则各种都已经说完了,如果各位小白认真的看到这里,我们在来分析文章开头说的邮箱验证表达式就非常容易了。好,现在我们就来一步一步的分析那个非常蛋痛的表达式,首先我们要来拆分这段表达式,我会用不同的颜色来表示这段表达式的每一段,这里就用到了一种思想,分而治之,太复杂的东西不利于直观的表达某些东西,所以拆分,打碎,各个击破:

  /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/

  1.([a-zA-Z0-9]+[_|\_|\.]?)* 这一段表示的是一个分组,分组()里面首先是[a-zA-Z0-9]意思是匹配字符串大小写字母数字,后面紧跟一个+,这个是贪婪量词,1次到多次,前面提到过的。[a-zA-Z0-9]+而这一段的意思就是说大小写字母数字匹配1次到多次,[_|\_|\.]?而这个呢是符号"_"或者"."出现0次到一次。整个这段表达式的意思就是所有大小写字母数字出现1次到多次,紧接着符号"_"和"."出现0次到一次,在把这两个条件加起来成为一个组,这个组的格式又可以出现0次到多次。

  2.[a-zA-Z0-9]+ 这段就不用说了吧,上面也说了就是大小写字符数字出现1次到多次

  3.@([a-zA-Z0-9]+[_|\_|\.]?)* 这个理解起来就简单了,以字符@开头上面那个分组出现0次到多次的这个格式

  4.\.[a-zA-Z]{2,3} 这个表达式呢还是比较容易,也是以字符"."开头所有大小写字母出现两次或者三次

  5./^$/ 这两个符号是表示从字符串的开始匹配到行的结束。

  看到这里大家是不是对正则表达式的认识更深了一些呢, 如果还不行话在给大家分析一个实例吧 /^((0?[1-9])|((1|2)[0-9])|30|31)$/ 这个正则的意思是验证一个月的31天,正确格式是01、09和1、31。首先我们还是来拆分 /^((0?[1-9])|((1|2)[0-9])|30|31)$/

  1.首先这个表达式中出现了三个黑色的"|"候选符号,意思就是说可以匹配四种情况

  2.(0?[1-9]) 这个表达式是匹配 0出现0次或者一次紧接着跟上数字出现一次,这是一种情况,如:01, 09, 1, 9这些

  3.((1|2)[0-9]) 这个分组表示的是1或者2出现一次紧接着跟上0-9出现一个,又是一种情况,如:10,19,20,29

  4.30|31 这个就更简单了,30或者31只能出现一次。

到此这篇关于javascript中正则表达式语法详解的文章就介绍到这了,更多相关javascript正则表达式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • js正则表达式基本语法(精粹)

    1.正则表达式基本语法 两个特殊的符号'^'和'$'.他们的作用是分别指出一个字符串的开始和结束. 例子如下: "^The":表示所有以"The"开始的字符串("There","The cat"等): "of despair$":表示所以以"of despair"结尾的字符串: "^abc$":表示开始和结尾都是"abc"的字符串--呵呵,只有&q

  • 老生常谈JavaScript 正则表达式语法

    JavaScript定义正则表达式有两种方法. 1.RegExp构造函数 var pattern = new RegExp("[bc]at","i"); 它接收两个参数:一个是要匹配的字符串模式,另一个是可选的标志字符串. 2.字面量 var pattern = /[bc]at/i; 正则表达式的匹配模式支持三种标志字符串: g:global,全局搜索模式,该模式将被应用于所有字符串,而并非搜索到第一个匹配项就停止搜索: i:ingore case,忽略字母大小写,

  • js 玩转正则表达式之语法高亮

    学了几天正则,差不多该总结整理写成果了,之前就想写语法高亮匹配来着,不过水平不够,看着例子都不理解. 那么我们来分析下两位大神 次碳酸钴 和 Barret Lee 语法高亮实现. 先说 Barret Lee 的这篇 <几个小例子教你如何实现正则表达式highlight高亮> 之前看的时候只觉的神奇,特别是下面那个一步一步分开匹配的例子,更是霸气测漏,不过作者也说了,分开只是为了演示方便,可以很直观的看到这一步匹配了什么,不然一步到位匹配完成,你都不知道发生了什么就处理完毕了.来看下他的正则 复

  • 正则表达式基本语法及表单验证操作详解【基于JS】

    本文实例讲述了正则表达式基本语法及表单验证操作.分享给大家供大家参考,具体如下: 正则表达式是一种可以用于模式匹配和替换的强有力的工具,是数据的有效性验证. 一.基本语法 位于"/"定界符之间的部分就是将要在目标对象中进行匹配的模式.用户只要把希望查找匹配对象的模式内容放入"/"定界符之间即可.为了能够使用户更加灵活的定制模式内容,正则表达式提供了专门的"元字符".所谓元字符就是指那些在正则表达式中具有特殊意义的专用字符,可以用来规定其前导字符(

  • Javascript中正则表达式的使用及基本语法

    前面的话 正则表达式在人们的印象中可能是一堆无法理解的字符,但就是这些符号却实现了字符串的高效操作.通常的情况是,问题本身并不复杂,但没有正则表达式就成了大问题.javascript中的正则表达式作为相当重要的知识,本文将介绍正则表达式的基础语法 定义 正则表达式(Regular Expression)是一门简单语言的语法规范,是强大.便捷.高效的文本处理工具,它应用在一些方法中,对字符串中的信息实现查找.替换和提取操作 javascript中的正则表达式用RegExp对象表示,有两种写法:一种

  • 正则表达式语法规则及在Javascript和C#中的使用方法

    一.正则表达式概念: 在计算机科学中,是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串.在很多文本编辑器或其他工具里,正则表达式通常被用来检索和/或替换那些符合某个模式的文本内容.许多程序设计语言都支持利用正则表达式进行字符串操作. 二.正则表达式的使用: 正则表达式在ASP.NET中主要是用来对输入的内容进行验证,验证一般分为两种一种是客户端JS验证,另一种是服务器端验证 1.JS对输入内容验证 复制代码 代码如下: function check() {           

  • javascript正则表达式定义(语法)总结

    本文讲述了javascript正则表达式定义(语法).分享给大家供大家参考,具体如下: 正则表达式的2种定义方法:一种是直接调用RegExp(),第二种是直接用字面量来定义,即var re = /正则规则/; 2种定义方法本质都是调用RegExp()方法 在调用同一段正则代码的时候,ECMAScript3和ECMAScript5中表现完全不一样 function reg(){ var re = /\sjavascript/; return re; } 分别在ECMAScript3和ECMAScr

  • JavaScript正则表达式上之基本语法(推荐)

    相关阅读: js正则表达式基本语法(精粹) 正则表达式语法 一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符(称为元字符)组成的文字模式.该模式描述在查找文字主体时待匹配的一个或多个字符串.正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配. 定义 JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串 1. 构造函数 复制代码 代码如下: var reg=new RegExp('<%[^%>]+%>','g')

  • JS正则表达式一条龙讲解(从原理和语法到JS正则)

    正则啊,就像一座灯塔,当你在字符串的海洋不知所措的时候,总能给你一点思路:正则啊,就像一台验钞机,在你不知道用户提交的钞票真假的时候,总能帮你一眼识别:正则啊,就像一个手电筒,在你需要找什么玩意的时候,总能帮你get你要的东西... -- 节选自 Stinson 同学的语文排比句练习<正则> 欣赏了一段文学节选后,我们正式来梳理一遍JS中的正则,本文的首要目的是,防止我经常忘记正则的一些用法,故梳理和写下来加强熟练度和用作参考,次要目的是与君共勉,如有纰漏,请不吝赐教,良辰谢过. 本文既然取题

  • 详解js正则表达式语法介绍

    本文介绍了js正则表达式,具体如下: 1. 正则表达式规则 1.1 普通字符 字母.数字.汉字.下划线.以及后边章节中没有特殊定义的标点符号,都是"普通字符".表达式中的普通字符,在匹配一个字符串的时候,匹配与之相同的一个字符. 举例1:表达式 "c",在匹配字符串 "abcde" 时,匹配结果是:成功:匹配到的内容是:"c":匹配到的位置是:开始于2,结束于3.(注:下标从0开始还是从1开始,因当前编程语言的不同而可能不同)

随机推荐

其他