与正则有关的JS方法结合其在项目中的应用

Posted 2020-09-16 cleaverlove

 　　　　　　　　与正则有关的JS方法结合其在项目中的应用

　　前言

　　　　最近项目中用到正则匹配比较多，因此打算深入理解和总结下各个与正则有关的方法，再结合在项目中使用的情况。与正则有关的JS方法共有7个，分别是RegExp对象的compile(), exec(), test() 和支持正则表达式的的String()方法为search(), match(), replace(), split()。

　　RegExp对象方法

　　　　compile()方法

　　　　该方法用于改变和重新编译正则表达式。语法： RegExpObject.compile(regexp, modifier);  参数1是正则表达式，参数2是规定匹配的类型。“g”用于全局匹配，“i”用于区分大小写，“gi”用于全局区分大小写的匹配。

 1 var str = \'hello world hello world\';
 2 var patt = /hello/g;
 3 //在全局使用"hi"字符串替换"hello"
 4 var str2 = str.replace(patt, \'hi\');
 5 console.log(str2);
 6 patt = /world/g;
 7 patt.compile(patt);
 8 //在全局使用"all the world"字符串替换"world"
 9 str2 = str.replace(patt, \'all the world\');
10 console.log(str2);

　　　　在控制台输入如有图  ：              

　　　　exec()方法

　　　　该方法用于检索字符串中的正则表达式的匹配。 语法：RegExpObject.exec(string). 参数为要检索的字符串。返回值：返回一个数组，其中存放匹配的结果，若未找到匹配，则返回null。

 1 var str= "Visit W3School, W3School is a place to study web technology."; 
 2 var patt1 = new RegExp("W3School","g");
 3 var patt2 = new RegExp("W3School");
 4 var result;
 5 while ((result = patt1.exec(str)) != null)  {
 6     console.log(result);
 7     console.log(patt1.lastIndex);
 8  }
 9  //跳出循环后，返回null，并将lastIndex值重置为0
10  console.log(patt1.lastIndex);
11 
12  console.log(patt2.exec(str));
13 console.log(patt2.lastIndex);
14 /*
15  while ((result = patt2.exec(str)) != null)  {
16      console.log(result);
17      console.log(patt2.lastIndex);
18  }
19 注意： 此循环是一个死循环，非全局匹配只匹配第一次匹配到的值patt2.exec(str))返回一个数组。
20 */

 　图（1）　　　　　　　  图（2）

　　　　

除了数组元素和 length 属性之外，exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。我们可以看得出，在调用非全局的 RegExp 对象的 exec() 方法时（如变量patt2,图（2）），返回的数组与调用方法 String.match() 返回的数组是相同的，lastIndex 默认是0。

但是，当 RegExpObject 是一个全局正则表达式时（如变量patt1，图（1）），exec() 的行为就稍微复杂一些。它会在 RegExpObject 的 lastIndex 属性指定的字符处开始检索字符串 string。当 exec() 找到了与表达式相匹配的文本时，在匹配后，它将把 RegExpObject 的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。这就是说，您可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。当 exec() 再也找不到匹配的文本时，它将返回 null，并把 lastIndex 属性重置为 0。通过图（1），我们看到第一次检索到\'W3Cschool\'时，Index值为6，而lastIndex变为14，然后从lastIndex 处开始检索字符串，第二次检索到\'W3Cschool\'，而lastIndex变为24。最后退出循环，lastIndex重置为0。

　　　　test()方法

　　　　该方法用于检测一个字符串是否匹配某个模式。语法：RegExpObject.test(string);返回值：如果字符串string中含有与RegExpObject匹配的文本，则返回true，否则false。下面贴下在项目中使用到的正则应用，手机号码验证：

 1 var reg = /(13\\d|14[57]|15[^4,\\D]|17[678]|18\\d)\\d{8}|170[059]\\d{7}/;
 2 //登录事件
 3 $(".lonBtn").click(function() {
 4     var num = $("#phoneNum").val();
 5     var code = $("#code").val();
 6     if( !reg.test(num) || code == \'\' ) {
 7         mui.alert("手机号码或者验证码错误");
 8     } else {
 9         window.location.href = "memAbout.html";
10     }
11 })

　　　　匹配图片格式正则：

//上传图片函数
function uploadImg(domEle) {
    $(domEle).change(function() {
        if ( typeof FileReader === \'undefined\' ) {
            alert("你的浏览器不支持FileReader");
            return;
        }
        var file = this.files[0];
        console.log(file);  //图片格式正则
        if ( !/(.*).(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga)$/.test(file.name) ) {
        alert("请上传图片格式内容");
        return;
        }
//        if ( file.size / 1024 > 5 ) { //file.size图片大小单位是B，转换为KB。
//        alert("上传图片大小不应超过5KB");
//        return;
//        }
        var r = new FileReader();
        r.readAsDataURL(file);
        r.onload = function(e) {
//        console.log(this.result);
        $(domEle).next().html(\'<img src="\' + this.result + \'" alt="图片">\');
        }
                    
    })
}

　　

　　String对象方法

　　　　search()方法

　　　　该方法用于检索字符串中指定的子字符串或检索与正则表达式相匹配的子字符串。语法：stringObejct.search(regexp)，返回值：第一个与regexp相匹配的子串的起始位置。没有找到返回-1.特别注意search()方法不执行全局匹配。

var str4 = "hello3 w4orld";
//检索指定的子字符串
 console.log(str4.search(/wor/));   // -1
 //检索与正则表达式匹配的子字符串 非全局
console.log(str4.search(/\\d/));  // 5
// 全局匹配
console.log(str4.search(/\\d/g));   // 5

　　　　由在全局匹配和非全局匹配返回值都一样，说明确实不执行全局匹配。

　　　　match()方法

　　　　该方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。语法：stringObject.match(searchvalue)或stringObject(regexp)。返回值： 存放匹配结果的数组。该数组的内容依赖于regexp是否具有全局标识g。

var str= "Visit W3School, W3School is a place to study web technology."; 
 console.log(str.match(\'W3School\'));  
// 参数为RegExp对象 全局搜索
 console.log(str.match(/\\d+/g));
// 参数为RegExp对象 非全局搜索 只执行一次匹配  
 console.log(str.match(/\\d+/));

　　　　　　　　　　  图(3)

　　　　在调用String 对象的 metch() 方法时,参数为非全局搜索，返回的数组与调用方法RegExp.exec() 返回的数组是相同的。不过全局匹配返回的数组的内容与前者大不相同，它的数组元素中存放的是 stringObject 中所有的匹配子串，而且也没有 index 属性或 input 属性。如图（3）

　　　　获取请求参数地址：

/**
 * 获取请求地址参数
 * @param String name
 */
function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    //  正则是寻找&+url参数名字=值+&
    console.log(reg);   //  /(^|&)index=([^&]*)(&|$)/
    var search = encodeURI(window.location.search);
    console.log(search);   //  ?index=1
    var r = search.substr(1).match(reg);    //匹配目标参数
    console.log(r);    //["index=1", "", "1", "", index: 0, input: "index=1"]
    if (r != null) return decodeURI(unescape(r[2])); return null;      //返回参数值
};

var Gindex = getUrlParam("index");

　　　　replace()方法

　　　　该方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。语法： stringObject.repalce(regexp/substr, replacement); 返回值：一个新的字符串。注意：如果regexp具有全局标识g，那么replace()方法将替换所有匹配的子串。否则它只替换第一个匹配的子串。

　　　　split()方法

　　　　该方法用于把一个字符串分割成字符串数组。语法： stringObject.split(separator, howmany);  第一个参数：字符串或正则表达式。第二个参数：可选，该参数可指定返回的数组的最大长度。

1 var str5 = "15hell1o w3o";
2 console.log(str5.split(/\\d+/));  //  ["", "hell", "o w", "o"]
3  // 空字符串("")作为分割，那么字符串每个字符之间都会被分割。
4  console.log(str5.split(""));   //