正则表达式方法应用

涉及正则表达式的方法：

• 字符串的方法“abc"

1. match();
2. search();
3. replace();

• 正则表达式/\d/.

1. exec();
2. test();

一、字符串的方法

1.match方法

match的哲学，说白了就是我们最正统的正则，在茫茫多的字符串中，拿到我们想要的东西。例如：拿到所有数字

        var str = "今年是2019年的新年，我拿到了2000红包，但钱包却为-4.5元，最遗憾的是又涨了一岁。";
        var reg = /-?\d+\.?\d*/g;
        var array = str.match(reg);
        console.log(array);

正则表达式没有 g 修饰符，match 和 exec 结果完全一样。都是类数组对象

        var str = "ABCDEFG1234567abcdefg";
        var reg = /[A-Z]/;
        var array1 = str.match(reg);
        var array2 = reg.exec(str);
            console.log(array1); //["A", index: 0, input: "ABCDEFG1234567abcdefg"]
         console.log(array2); //["A", index: 0, input: "ABCDEFG1234567abcdefg"]

正则表达式有g修饰符，match会罗列所有结果，返回纯数组

        var str = "34234fafafdDGSFGSE";
         var reg = /[a-z]g/;
         var array = str.match(reg);
         console.log(array);  //["f", "a", "f", "a", "f", "d"]

match能不能分组捕获呢？能！
()就是分组捕获，\1 就表示这第一个捕获，\2 就是第二个位置的捕获。

         var str = "154-344-133-876-876-555-534";
         var reg = /(\d{3})\-\1/g; 
         var array = str.match(reg);
         console.log(array);

        //应用此例子寻找连续相同子串
         var str = "ABCCCDDDDDEFFFFFFFFFFFFGGGGHHIIII";
         var reg = /(\w)\1+/g;
         var array = str.match(reg);
        //   输出最大的相同子串
        var maxLength = 0;
        var maxchar = "";
        for (var i = 0; i < array.length; i++) {
            if(array[i].length > maxLength){
                maxLength = array[i].length;
                maxchar = array[i];
            }
         };
        console.log(maxchar);

2.search方法

返回的是符合正则表达式的第一个位置

        var str = "ABCDEFG122234555567abcdefg";
        var reg = /(\w)\1+/g;           //重复的字母、数字

        var number = str.search(reg);
        console.log(number);

        
        //search就是能用正则式的 indexOf。
        // var str = "ABCDEFG122234555567abcdefg";
        // console.log(str.indexOf("FG"));

3.replace方法

replace就是替换，但只会换一个，寻找到第一个匹配的，就不再往后匹配了。

        var str = "今天看了港剧《大时代》，蓝洁瑛演的真好。很喜欢蓝洁瑛，我要让蓝洁瑛做我女朋友。"
        var str = str.replace("蓝洁瑛","小犹太");
        console.log(str); //今天看了港剧《大时代》，小犹太演的真好。很喜欢蓝洁瑛，我要让蓝洁瑛做我女朋友。

        //=======================
        //replace第一个参数可以是正则表达式，g就是全局替换。
        var str = "今天看了港剧《大时代》，蓝洁瑛演的真好。很喜欢蓝洁瑛，我要让蓝洁瑛做我女朋友。"
        var str = str.replace(/蓝洁瑛/g,"小犹太");
        console.log(str); //今天看了港剧《大时代》，小犹太演的真好。很喜欢小犹太，我要让小犹太做我女朋友。

replace函数用法，第二个参数是一个函数。
如果replace函数的第二个参数是一个函数，那么每次匹配到正则的时候，就会调用一次这个函数，这个函数天生有参数 return 的值就是要替换的值

        var str = "今天看了港剧《大时代》，蓝洁瑛演的真好。很喜欢蓝洁瑛，我要让蓝洁瑛做我女朋友。"
         str = str.replace(/蓝洁瑛/g,function(a,b,c){
            return "小犹太";
                         //a 参数就是匹配上的字符串
             //b 参数就是匹配上的字符串的下标
             //c 参数就是源字符串
         }); 
         console.log(str);

replace能动态替换

        var str = "今年是2019年的新年，我拿到了200元红包，但钱包却为40元，最遗憾的是又涨了1岁。";
         str = str.replace(/\d+元/g,function(a){
            return "$" + Math.round((parseInt(a) / 6) * 100) / 100;
        });

        console.log(str);

Math.round的用法：

Math.round(2.5); 输出结果为 3 四舍五入取整
问：求 6.888精确到小数点后两位？
Math.round(6.888); 结果：7
正解思路：先扩大100倍，求完在缩小100倍。
console.log(Math.round(6.888*100)/100);

replace分组，直接在替代字符串中就用 2 来表示捕获的东西

           //交换单词位置
         var str = "First Second";
         str = str.replace(/(\w+)\s(\w+)/,"$2 $1");
         console.log(str);

replace 里面function的用法

        var str = "First Second";
        str = str.replace(/(\w+)\s(\w+)/,function(match,$1,$2,index,str){
            console.log(match);
            console.log($1);
            console.log($2);
            console.log(index);
            console.log(str);
         });

一个模板引擎，瀑布流

        //Json 对象
        // var obj = {
        //  a : 1 , 
        //  b : 2 , 
        //  c : 3
        // };

        // console.log(obj.b);
        // console.log(obj[b]);


        //================================

        var dictionary = {
            xingming : "考拉",
            nianling : "18",
            xingbie : "女",
            nvyougeshu : 500
        }

        var str = "大家好，我叫★xingming★，我今年★nianling★岁了,我是个可爱的★xingbie★生,我的女朋友有★nvyougeshu★个"
        
        str = str.replace(/★(\w+)★/g,function(match,$1){
            return dictionary[$1];
        });

        console.log(str);

二、正则表达式的方法

1.exec方法

exec 每次执行结果按序输出，不管结果有几个，一次只输出一个

         var str = "ABCDEFG1234567abcdefg";
         var reg = /[a-z]/g;
         console.log(reg.exec(str));
         //遍历所有结果：
         var a;
         while((a = reg.exec(str)) != null){
          //为什么是null？ 遍历完出现 null 又再一次循环遍历。
            console.log(a);
         }

求最大相同子串，比较exec 和 match 的不同
exec哲学，就是match的反面，match能把所有结果在数组中输出, exec 是将所有结果通过 while() 迭代输出,省的你先弄出一个array，然后for遍历，还不如就一个一个遍历.

        var str = "qqqqqqq1111111111AAAAAAABBBBBBBB";
        var reg = /(\w)\1+/g;

        var maxl = 0;
        var maxc = "";

        var a;
        while((a = reg.exec(str)) != null){
            if(a[0].length > maxl){//a[0].length类数组对象，指代本身。
                maxl = a[0].length;
                maxc = a[0];
            }
        }

        console.log(maxc);

1.test方法

表单验证最最常用的东西
一个模拟表单验证实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>match</title>
</head>
<body>

    <form action="bbb.php" id="biaodan">
        <p>
            请输入姓名： <input type="text" id="xingming" />
        </p>
        <p>
            请输入年龄： <input type="text" id="nianling"/>
        </p>
        <p>
            请输入手机号码： <input type="text" id="shoujihao"/>
        </p>
        <p>
            请输入邮箱： <input type="text" id="youxiang"/>
        </p>
        <p>
            <input type="submit" />
        </p>
    </form>

    <script type="text/javascript">
        //得到表单
        var biaodan = document.getElementById("biaodan");
        var xingming = document.getElementById("xingming");
        var nianling = document.getElementById("nianling");
        var shoujihao = document.getElementById("shoujihao");
        var youxiang = document.getElementById("youxiang");

        //表单试图提交的时候，触发onsubmit事件
        //这个函数返回了false,表单不会被提交
        biaodan.onsubmit = function(){
            //验证各种
            //验证姓名
            if(!/^[\u4e00-\u9fa5]{2,4}$/.test(xingming.value)){
                alert("错误的姓名");
                return false;
            }

            if(!/^\d{1,3}$/.test(nianling.value)){
                alert("错误的年龄");
                return false;
            }

            if(parseInt(nianling.value) < 10 || parseInt(nianling.value) > 104){
                alert("年龄不在范围!");
                return false;
            }

            if(!/^\d{11}$/.test(shoujihao.value)){
                alert("错误的手机号");
                return false;
            }

            return true;
        }
    </script>
</body>
</html>