JS之正则表达式详解

摘要：正则表达式中可以使用编码。每个正则表达式可带有一个或者多个标注用以标明正则表达式的行为。其中表示匹配项在字符串中的位置，而表示应用字符串表达式的字符串。方法正则表达式常用方法，它接受一个字符串参数。

正则表达式非常有用，查找、匹配、处理字符串、替换和转换字符串，输入输出等。下面整理一些常用的正则表达式。

ECMAScript通过RegExp类型支持正则表达式，如下：

var expression = /pattern/flags;

其中的模式（pattern）部分可以是任何简单或者复杂的正则表达式，可以包含字符类、限定符、分组、向前查找以及反向引用。每个正则表达式可带有一个或者多个标注（flags）,用以标明正则表达式的行为。有三个一下标志：

g：表示全局模式,即模式将被应用到所有字符串，而非在发现第一个匹配项时立即停止。

i：表示不区分大小写模式。

m：表示多行模式，即在到达一行文本末尾时还在继续查找下一行中是否存在于模式匹配的项。

例如：匹配第一个bat或者cat,不区分大小写

var pattern = /[bc]at/i;

它接收两个参数：一个是要匹配的字符串模式，另一个是可选的标志字符串。可以使用字面量定义的任何表达式，都可以使用构造函数来定义，还是以上面的例子为例：

var pattern = new RegExp("[bc]at","i");

注意:RegExp构造函数模式参数时字符串，所以再某些情况下要对字符进项双重转义。所有元字符都必须双重转义，如字面量模式为/[bc]at/,那么等价的字符串为"/[bc]at/"

例子：

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

该方法是专门为捕获组而设计的，其接受一个参数，即要应用模式的字符串，然后返回包含第一个匹配项信息的数组；或者在没有匹配项的情况下返回null。返回的数组虽然是Array的实例，但是包含两个额外的属性：index和input。其中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); //0
console.log(matches.input); //mom and dad and baby
console.log(matches[0]);    //mom and dad and baby
console.log(matches[1]);    //and dad and baby
console.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); //0
console.log(matches[0]);  //cat
console.log(pattern1.lastIndex); //0

matches = pattern1.exec(text);
console.log(matches.index); //0
console.log(matches[0]);  //cat
console.log(pattern1.lastIndex); //0

var pattern2 = /.at/g;

var matches = pattern2.exec(text);
console.log(matches.index); //0
console.log(matches[0]);  //cat
console.log(pattern2.lastIndex); //3

var matches = pattern2.exec(text);
console.log(matches.index); //5
console.log(matches[0]);  //bat
console.log(pattern2.lastIndex); //8

注意：IE的JavaScript实现lastIndex属性上存在偏差，即使在非全局模式下，lastIndex属性每次也都在变化。

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

用法：正则.test(字符串)

例1：判断是否是数字

var str = "374829348791";
var re = /D/;      //  D代表非数字
if( re.test(str) ){   // 返回true,代表在字符串中找到了非数字。
    alert("不全是数字");
}else{
    alert("全是数字");
}

例2：

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

在字符串搜索符合正则的内容，搜索到就返回出现的位置（从0开始，如果匹配的不只是一个字母，那只会返回第一个字母的位置）， 如果搜索失败就返回 -1

用法：字符串.search(正则)

例子：在字符串中找字母b，且不区分大小写

var str = "abcdef";
var re = /B/i;
//var re = new RegExp("B","i"); 也可以这样写
alert( str.search(re) ); // 1

获取正则匹配到的结果，以数组的形式返回

用法： 字符串.match(正则)

例如：

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

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, 每当匹配到一个这样的结果时就执行回调，并传递匹配到的key和value，对应到$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}) .表示除 之外的任意字符，后面加{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]?dd?).){3}(2[0-4]d|25[0-5]|[01]?dd?)$

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

匹配成对的HTML标签：<(?[^s>]+)[^>]*>.*>

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

匹配 -90至90之间的整数（包括-90和90）：^(-?[1-8][0-9]|-?[1-9]|-?90|0)$
匹配收尾空白字符：^s+|s+$
中文，全角，半角匹配：

str="中文;；ａ"    
  alert(str.match(/[u0000-u00ff]/g))     //半角  
  alert(str.match(/[u4e00-u9fa5]/g))     //中文  
  alert(str.match(/[uff00-uffff]/g))     //全角

找重复项最多的字符个数：

var str = "assssjdssskssalsssdkjsssdss";

var arr = str.split(""); //把字符串转换为数组
str = arr.sort().join(""); //首先进行排序，这样结果会把相同的字符放在一起，然后再转换为字符串
//alert(str);  // aaddjjkklsssssssssssssssss

 var value = "";
 var index = 0; 
var re = /(w)1+/g;  //匹配字符，且重复这个字符，重复次数至少一次。
str.replace(re,function($0,$1){ 
   //alert($0);   代表每次匹配成功的结果 : aa dd jj kk l sssssssssssssssss
     //alert($1);  代表每次匹配成功的第一个子项，也就是w:  a d j k l S 
　　
    if(index<$0.length){  //如果index保存的值小于$0的长度就进行下面的操作
          index = $0.length;  // 这样index一直保存的就在最大的长度
           value = $1;  //value保存的是出现最多的这个字符
    }

}); 

alert("最多的字符:"+value+",重复的次数:"+index);  // s   17

判断是不是QQ号：
//^ : 放在正则的最开始位置，就代表起始的意思，注意 /¹ / 和 /^[a]/是不一样的，前者是排除的意思，后者是代表首位。

//$ : 正则的最后位置 , 就代表结束的意思

//首先想QQ号的规则 
      1 首位不能是0 
      2 必须是 5-12位的数字
   
    var aInput = document.getElementsByTagName("input");
    var re = /^[1-9]d{4,11}$/;
    //123456abc为了防止出现这样的情况，所以必须限制最后
    //首位是0-9，接着是4-11位的数字类型。
aInput[1].onclick = function(){
    if( re.test(aInput[0].value) ){
        alert("是QQ号");
    }else{
        alert("不是QQ号");
    }

};

去掉前后空格（面试题经常出现）：

var str = "  hello  ";
alert( "("+trim(str)+")" );//为了看出区别所以加的括号。 (hello)
function trim(str){
   var re = /^s+|s+$/g; // |代表或者   s代表空格  +至少一个    前面有至少一个空格 或者后面有至少一个空格 且全局匹配
  return str.replace(re,""); //把空格替换成空
}

常用的一些表单校验：

匹配中文：[u4e00-u9fa5] //中文ACALL码的范围
行首行尾空格：^s*|s*$ //首行出现任意个空格或者尾行出现任意个空格（任意表示也可以没有空格）

Email：^w+@[a-z0-9]+(.[a-z]+){1,3}$  
      //起始至少为一个字符(w字母，数字或者下划线)，然后匹配@,接着为任意个字母或者数字，.代表真正的点，.后面为至少一个的字符（a-z）,同时这个(比如.com)整体为一个子项作为结束，可以出现1-3次。因为有的邮箱是这样的.cn.net。（xxxx.@qq.com xxxx.@163.com xxxx.@16.cn.net ）

网址：[a-zA-z]+://[^s]*   http://......
  //匹配不分大小写的任意字母，接着是//,后面是非空格的任意字符

邮政编码：[1-9]d{5}  //起始数字不能为0，然后是5个数字
身份证：[1-9]d{14}|[1-9]d{17}|[1-9]d{16}x

可参考地址：
精通 JS正则表达式
精通正则表达式- 读书笔记
过目不忘JS正则表达式