您好,欢迎来到宝玛科技网。
搜索
您的当前位置:首页关于js正则表达式详解

关于js正则表达式详解

来源:宝玛科技网


例子:

var re = null,
 i; for(i=0; i < 10; i++){
 re = /cat/g;
 console.log(re.test("catastrophe"));
 } for(i=0; i < 10; i++){
 re = new RegExp("cat","g");
 console.log(re.test("catastrophe"));
 }

打印结果都为10个true

正则表达式方法

RegExp对象的exec()方法

该方法是专门为捕获组而设计的,其接受一个参数,即要应用模式的字符串,然后返回包含第一个匹配项信息的数组;或者在没有匹配项的情况下返回null。返回的数组虽然是Array的实例,但是包含两个额外的属性:indexinput。其中index表示匹配项在字符串中的位置,而input表示应用字符串表达式的字符串。
例:

var text = "mom and dad and baby";var pattern = /mom( and dad( and baby)?)?/gi;var matches = pattern.exec(text);
console.log(matches.index); 
//0console.log(matches.input); 
//mom and dad and babyconsole.log(matches[0]); 
//mom and dad and babyconsole.log(matches[1]); 
//and dad and babyconsole.log(matches[2]); 
//and baby

对于exec()方法而言,即使在模式中设置了全局标志g,它每次也只是返回一个匹配项。在不设置全局标志的情况下,在同一个字符串上多次调用exec()方法将始终返回第一个匹配项的信息。而在设置全局标志的情况下,每次调用exec()则都会在字符串中继续查找新匹配项,如下例子:

var text = "cat, bat, sat, fat";var pattern1 = /.at/;var matches = pattern1.exec(text);
console.log(matches.index); //0console.log(matches[0]); //catconsole.log(pattern1.lastIndex); //0matches = pattern1.exec(text);
console.log(matches.index); //0console.log(matches[0]); //catconsole.log(pattern1.lastIndex); 
//0var pattern2 = /.at/g;var matches = pattern2.exec(text);
console.log(matches.index); //0console.log(matches[0]); //catconsole.log(pattern2.lastIndex); //3var matches = pattern2.exec(text);
console.log(matches.index); //5console.log(matches[0]); //batconsole.log(pattern2.lastIndex); //8

注意:IEJavaScript实现lastIndex属性上存在偏差,即使在非全局模式下,lastIndex属性每次也都在变化。

test()方法

正则表达式常用方法test(),它接受一个字符串参数。在模式与该参数匹配的情况下返回true,否则返回false
例如:

var text ="000-00-0000";var pattern = /\d{3}-\d{2}-\d{4}/;if(pattern.test(text)){
 console.log('the pattern was matched.');
}

match方法

获取正则匹配到的结果,以数组的形式返回例如:

"186a619b28".match(/\d+/g); 
// ["186","619","28"]

replace方法

replace 本身是JavaScript字符串对象的一个方法,它允许接收两个参数:

replace([RegExp|String],[String|Function])

第1个参数可以是一个普通的字符串或是一个正则表达式.
第2个参数可以是一个普通的字符串或是一个回调函数.

如果第2个参数是回调函数,每匹配到一个结果就回调一次,每次回调都会传递以下参数:

  • result: 本次匹配到的结果

  • $1,...$9: 正则表达式中有几个(),就会传递几个参数,$1~$9分别代表本次匹配中每个()提取的结果,最多9个

  • offset:记录本次匹配的开始位置

  • source:接受匹配的原始字符串

  • 以下是replace和JS正则搭配使用的几个常见经典案例:

    (1)实现字符串的trim函数,去除字符串两边的空格

    String.prototype.trim = function(){ 
     //方式一:将匹配到的每一个结果都用""替换
     return this.replace(/(^\s+)|(\s+$)/g,function(){ return "";
     }); 
     //方式二:和方式一的原理相同
     return this.replace(/(^\s+)|(\s+$)/g,'');
    };

    ^s+ 表示以空格开头的连续空白字符,s+$ 表示以空格结尾的连续空白字符,加上() 就是将匹配到的结果提取出来,由于是 | 的关系,因此这个表达式最多会match到两个结果集,然后执行两次替换:

    String.prototype.trim = function(){ /**
     * @param rs:匹配结果
     * @param $1:第1个()提取结果
     * @param $2:第2个()提取结果
     * @param offset:匹配开始位置
     * @param source:原始字符串 */
     this.replace(/(^\s+)|(\s+$)/g,function(rs,$1,$2,offset,source){ //arguments中的每个元素对应一个参数 console.log(arguments);
     });
    }; 
    " abcd ".trim();

    输出结果:

    [" ", " ", undefined, 0, " abcd "] 
    //第1次匹配结果
    [" ", undefined, " ", 5, " abcd "] 
    //第2次匹配结果

    (2)提取浏览器url中的参数名和参数值,生成一个key/value的对象

    function getUrlParamObj(){ var obj = {}; //获取url的参数部分
     var params = window.location.search.substr(1); //[^&=]+ 表示不含&或=的连续字符,加上()就是提取对应字符串
     params.replace(/([^&=]+)=([^&=]*)/gi,function(rs,$1,$2){
     obj[$1] = $2;
     }); 
     return obj;
    }

    /([^&=]+)=([^&=]*)/gi 每次匹配到的都是一个完整key/value,形如 xxxx=xxx, 每当匹配到一个这样的结果时就执行回调,并传递匹配到的keyvalue,对应到$1$2

    (3)在字符串指定位置插入新字符串

    String.prototype.insetAt = function(str,offset){ 
     //使用RegExp()构造函数创建正则表达式
     var regx = new RegExp("(.{"+offset+"})"); 
     return this.replace(regx,"$1"+str);
    }; 
    "abcd".insetAt('xyz',2); //在b和c之间插入xyz//结果 "abxyzcd"

    offset=2时,正则表达式为:(^.{2}) .表示除\n之外的任意字符,后面加{2} 就是匹配以数字或字母组成的前两个连续字符,加()就会将匹配到的结果提取出来,然后通过replace将匹配到的结果替换为新的字符串,形如:结果=结果+str

    (4) 将手机号12988886666转化成129 8888 6666

    function telFormat(tel){
     
     tel = String(tel); 
     //方式一
     return tel.replace(/(\d{3})(\d{4})(\d{4})/,function (rs,$1,$2,$3){ return $1+" "+$2+" "+$3
     }); 
     //方式二
     return tel.replace(/(\d{3})(\d{4})(\d{4})/,"$1 $2 $3");
    }

    (\d{3}\d{4}\d{4}) 可以匹配完整的手机号,并分别提取前3位、4-7位和8-11位,"$1 $2 $3" 是在三个结果集中间加空格组成新的字符串,然后替换完整的手机号。

    常用实例

    匹配第一个bat或者cat,不区分大小写: /[bc]at/i 或者 new RegExp("[bc]at","i");

    匹配所有以"at"结尾的3个字符组合,不区分大小写:/.at/gi;

    只能输入数字:^[0-9]*$;

    只能输入n位的数字:^\d{n}$

    只能输入至少n位的数字:^\d{n,}$

    只能输入m~n位的数字:^\d{m,n}$

    只能输入零和非零开头的数字:^(0|[1-9][0-9]*)$

    只能输入有两位小数的正实数:^[0-9]+(.[0-9]{2})?$

    只能输入有1~3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$

    只能输入非零的正整数:^\+?[1-9][0-9]*$

    只能输入长度为3的字符:^.{3}$

    只能输入由26个英文字母组成的字符串:^[A-Za-z]+$

    只能输入由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$

    只能输入由数字、26个英文字母或者下划线组成的字符串:^\w+$

    验证用户密码:以字母开头,长度在6~18之间,只能包含字符、数字和下划线:^[a-zA-Z]\w{5,17}$

    验证是否含有^%&',;=?$"等字符:[^%&',;=?$\x22]+

    只能输入汉字:^[\u4e00-\u9fa5]{0,}$

    验证Email地址:^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

    验证InternetURL:^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$

    验证身份证号(15位或18位数字):^\d{15}|\d{18}$

    验证IP地址:^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$

    匹配两个两个重叠出现的字符 例如,"aabbc11asd", 返回结果为aa bb 11三组match:(\w)\1

    匹配成对的HTML标签:<(?<tag>[^\s>]+)[^>]*>.*</\k<tag>>

    匹配1-58之间的数字:/^([1-9]|[1-5][0-8])$/

    匹配 -90至90之间的整数(包括-90和90):^(-?[1-8][0-9]|-?[1-9]|-?90|0)$

    Copyright © 2019- baomayou.com 版权所有 赣ICP备2024042794号-6

    违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

    本站由北京市万商天勤律师事务所王兴未律师提供法律服务