美文网首页基础前端
正则表达式方法应用

正则表达式方法应用

作者: CondorHero | 来源:发表于2019-02-09 14:51 被阅读3次

    涉及正则表达式的方法:

    • 字符串的方法“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分组,直接在替代字符串中就用 1 和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>
    

    相关文章

      网友评论

        本文标题:正则表达式方法应用

        本文链接:https://www.haomeiwen.com/subject/bhgasqtx.html