正则表达式介绍以及常用案例

分享一句话：

好事总会发生在下个转弯。

正文开始！！！

一、正则表达式的创建

1. 使用RegExp对象创建
   var regObj = new RegExp(“(^\s+)|(\s+$)”,“g”);
2. 使用直接字面量创建
   var regStr = /(^\s+)|(\s+$)/g;
   tips: g表示全文匹配，i表示忽略大小写、m表示多行匹配，可同时使用/gim

二、() [] {}区别

1. ():提取匹配的字符串，表达式中有几个()就会得到几个相应的匹配字符串
2. []:定义匹配的字符范围，比如[a-zA-Z0-9]表示匹配英文字符和数字
3. {}:表示匹配的长度，比如\d{3}表示匹配三个空格

三、^ $区别

1. ^^{:匹配一个字符串开头，比如(}a)
2. $$:匹配一个字符串结尾，比如(b$)
3. [] + ^
   取反，比如[^xyz]匹配的字符串不包含xyz

四、\d \s \w

1. \d :匹配一个非负整数，等价于[0-9]
2. \s :匹配一个空白字符
3. \w :匹配一个英文字符或数字，等价于[a-zA-Z0-9]
4. . :匹配除换行符以外的任意字符，等价于[^\n]

五、* + ?

1. *:匹配前面元素0次或多次，比如(\s)匹配0个或多个空格
2. +: 匹配前面元素1次或多次，比如(\d+)匹配由至少1个整数组成的字符串
3. ?: 匹配前面元素0次或1次，相当于{0,1}，比如(\w?)匹配最多由1个字母或数字组成的字符串

六、test match

1. test：用于检测字符串是否匹配某一个正则表达式，若匹配返回true,不匹配则返回false

   /\d+/.test("123");//true
   /\d+/.test("abc");//false

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

    "21we123sdqwq12".match(/\d+/g);//["21","123","12"]

七、replace

replace本身是js对象的一个方法，接收两个参数
replace([RegExp|String],[String|Function]);
第一个参数可以是正则表达式，也可以是字符串
第二个参数可以是回调函数，也可以是字符串
如果第一个参数是RegExp，js会提取RegExp匹配的结果，然后用第二个参数逐一替换
如果第二个参数是function，每匹配到一个结果就会回调一次，并会传递以下参数

1. result:本次匹配的结果
2. $1,...$9：正则表达式有几个()，就会传递几个参数，$1~$9分别代表本次匹配中每个()提取的结果，最多9个
3. offset:记录本次匹配开始配置
4. source:接收匹配的原始字符串

demo：

1. 去掉字符串两边的空格

    // 方法1
    str.replace(/(^\s+)|(\s+$)/g,'');
    // 方法2
    str.replace(/(^\s+)|(\s+$)/g,function(){
        return '';
    })

2. 获取回调函数，参数

    str.replace(/(^/s+)|(\s+$)/g,function(re,$s1,$s2,offset,source){
        console.log(arguments)
    })
    // 输出结果
    [" ", " ", undefined, 0, " abcd "] //第1次匹配结果
    [" ", undefined, " ", 5, " abcd "] //第2次匹配结果

3. 提取浏览器url中的参数名、参数值，生成一个key/value的对象

    function getUrlParamObj(){
        var obj = {};
        //获取url的参数部分
        var params = window.location.search.substr(1);//vendorCode=X00009&pid=dadbb526c4784788aff9932ca1ccfbad&sid=dadbb526c4
        //[^&=]+ 表示不含&或=的连续字符，加上()就是提取对应字符串
        params.replace(/([^&=]+)=([^&=]*)/gi,function(rs,$1,$2){
            obj[$1] = $2;
        });
        
        return obj;
    }
    // http://10.10.xx.xx/mainframe/647b3?vendorCode=X00009&pid=dadbb526c4784788aff9932ca1ccfbad&sid=dadbb526c4
    // {vendorCode: 'X00009', pid: 'dadbb526c4784788aff9932ca1ccfbad', sid: 'dadbb526c4'}

4. 在字符串指定位置插入新字符串

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"

5. 将手机号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");
}

6. 实现函数escapeHtml，将<, >, &, " 进行转义

function escapeHtml(str) {
  //匹配< > " &
  return str.replace(/[<>"&]/g, function(rs) {
    switch (rs) {
      case "<":
        return "&lt;";
      case ">":
        return "&gt;";
      case "&":
        return "&amp;";
      case "\"":
        return "&quot;";
    }
  });
}

本篇文章到此结束！谢谢观看！
欢迎关注、点赞、评论、收藏~~~