第二十三章 千分符&url解析

73 阅读2分钟

分组

定义:大正则就是整个正则,小分组指的就是小括号

let str = '身份证号是131126199807192411';
    //大正则就是整个正则,小分组指的就是小括号
    let reg = /\d{6}(\d{4})(\d{2})(\d{2})\d{3}(\d|X)/;
    // console.log(reg.exec(str));
    let ary = reg.exec(str);
    console.log(`这个人的出生日期是${ary[1]}年${ary[2]}月${ary[3]}日`)
 
    let reg = /^\d{6}(\d{4})(\d{2})(\d{2})\d{2}(\d)(\d|X)$/;
    //月份只能是19xx到2022年 月份必须是12月内的 日期必须是31内的 其他不管
    let reg1 = /^\d{6}((19\d{2})|(20[0-1]\d)|(202[0-2]))(0\d|1[0-2]\d)([0-1][1-9]|10|20|3[0-1])\d{2}(\d)(\d|X)$/
    btn.onclick = function () {
        let str = inp.value,
            ary = reg.exec(str);
        if (reg.test(str)) {
            //证明合法
            if(!reg1.test(str)){
                alert('身份证号以销毁');
                return;
            }
            h1.innerHTML = `这个人的出生日期是${ary[1]}年${ary[2]}月${ary[3]}日`;
            if(ary[4]%2){
                alert('男')
            }else {
                alert("女");
            }
        } else {
            h1.innerHTML = "身份证不合法";
            alert("身份证号不合法");
        }

    } 

字符串match方法

  • 代码:字符串.match(正则);
    作用:捕获结果一般与exec一致
    注意:在正则没有g修饰的时候,match的捕获结果和exec的捕获结果是一致的,一旦有g的时候,match可以把目标字符串所有匹配大正则的部分都捕获到,但是不能捕获到小分组
    let str = '身份证号是131126199807192411';
    let reg = /\d{6}(\d{4})(\d{2})(\d{2})\d{3}(\d|X)/;
    let res = reg.exec(str);
    let res1 = str.match(reg); //推荐使用
    console.log(res, res1);
    let reg = /(珠峰)(\d+)/g
    let str = '珠峰2009珠峰2022'
    console.log(str.match(reg));

【练习】

let str2 = `<p>346放大后个电话 ——岁的法国士大夫敢死</p>
    <p></p><input type="text" placeholder="输入身份证号码" id='inp'>
    <p>sdfgsdertyerfgsdfg</p>
    <button id='btn'>解析出生年月</button>
    <p>dfgh789</p>
    <h1 id='h1'>130425199110134526的解析结果是1991年10月13日</h1>
    <p>sdfgsdffghj5678gsdfg</p>
    <p>ertye367tdtghd6</p>`
    let reg = /<p>(.|\n|\r)*?</p>/g;
    console.log(str2.match(reg));

字符串replace方法(去网域名属性值url)

let str =
        'https://www.baidu.com/s?wd=%E9%A3%8E%E6%A0%BC%E5%92%8C&rsv_spt=1&rsv_iqid=0xc10aa6890000030c&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=5&rsv_sug1=1&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=1135&rsv_sug4=1325';
    //取网域名属性值
    function queryURL(str, key) {
        let reg = /\w+=\w+/g;
        // let reg1 = /.*[^&]$/g;
        let ary = str.match(reg)
        // console.log(ary);
        let obj = {};
        ary.forEach(item => {
            let key = item.split('=')[0],
                value = item.split('=')[1];
            obj[key] = value;
            // console.log(obj);
        });
        // console.log(obj);
        return console.log(key ? obj[key] : obj);
    };
    queryURL(str, 'issp');
let   reg = /(\w+)=(\w+)/g,
        obj = {};
    //`2022-02-06`.replace(/-/g,'/')
    str.replace(reg, function (a, b, c) {
        //这个回调函数什么时候执行每当字符串中有匹配正则的时候 这个回调就会执行一次
        //字符中有多少匹配正则的部分 这个回调函数就执行多少次
        //这个回调函数的参数 第一项指的是大正则捕获的内容 后边都是小分组捕获的内容
        console.log(arguments);
        obj[b] = c
    })
    console.log(obj); 
/*简易版本(reg)
let str =
        `https://www.baidu.com/s?wd=%E9%A3%8E%E6%A0%BC%E5%92%8C&rsv_spt=1&rsv_iqid=0xc10aa6890000030c&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=5&rsv_sug1=1&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=1135&rsv_sug4=1325`;
   

    function queryURL(str, key) {
        let reg = /(\w+)=(\w+)/g,
            obj = {};
        str.replace(reg, function (a, b, c) {
            obj[b] = c
        });
        return key ? obj[key] : obj;
    }*/
 
 let str =
        `https://www.baidu.com/s?wd=珠峰&rsv_spt=1&rsv_iqid=0xc10aa6890000030c&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=5&rsv_sug1=1&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=1135&rsv_sug4=1325`;
    let reg = /([^?&]+)=([^&]+)/g

    function queryURL(str, key) {
        let obj = {};
        str.replace(reg, function (a, b, c) {
            obj[b] = c
        });
        return console.log(key ? obj[key] : obj);;
    }
    queryURL(str)
//实现get-element-by-id-->getElementById
    let str1 = 'get-element-by-id';
    let reg = /-(\w)/g;
    str = str1.replace(reg,function(a,b){
        // console.log(b);
        
        return b.toUpperCase(); //函数的结果是把大正则匹配的内容给替换了
    });
    //反转回去
    str = str.replace(/[A-Z]/g,function(a){
        console.log(a);
        
        return '-'+(a.toLowerCase())
    }); 

字符串方法之trim

//let str = '   ajdiwjdai  dawwd     '
    //字符串.trim() 是一个用来去除字符串首尾空格方法
    /* console.log(str);
    console.log(str.trim()); */
/*  let reg0 = /^ +/;//以一到多个空格开头
     let reg1 = / +$/;//以一到多个空格结尾
     str = str.replace(reg0,'');
     str = str.replace(reg1,''); */
//完善版
let reg2 = /^ +| +$/g; //以一到多个空格开头或者一到多个空格结尾  加g才可以去掉尾部空格
    str = str.replace(reg2, '');
    console.log(str);

练习

 let str = 'dasdadJHiqwwSdaSijdSaadzhou周三大的啊,dwd';
    str = str.replace(/[a-zA-Z]/g, function ($0) {
        //利用正则实现
        if (/[a-z]/.test($0)) {
            return $0.toUpperCase();
        } else {
            return $0.toLowerCase();
        }
        /* 转大小写跟之前判断
          if ($0.toLowerCase() === $0) {
              return $0.toUpperCase();
          } else {
              return $0.toLowerCase();
          } */
    });
//一个字符串中出现次数最多的字符
    // let str = '';

    /*方案一: 
    用一个对象去记录在每一个字符的次数:字符作为对象的属性名,次数作为字符的属性值 */

    /* 方案二 :正则方法*/
    let str = "abcabcabcbbccccc";
    let num = 0;
    let char = '';

    // 使其按照一定的次序排列
    str = str.split('').sort().join('');
    // "aaabbbbbcccccccc"

    // 定义正则表达式
    let re = /(\w)\1+/g;
    str.replace(re, ($0, $1) => {
        if (num < $0.length) {
            num = $0.length;
            char = $1;
        }
    });
    console.log(`字符最多的是${char},出现了${num}次`);
//千分符
/*方案一 
let str = '5468645230' //5,468,645,230
let str2 = str.split('').reverse().join('');
let res='';
for(let i=0;i<str2.length;i++){

    if(i%3==2){
        res += str2[i] + ','
    }else{
        res +=str2[i];
    }
}
console.log(res.split('').reverse().join('').replace(/^,/,''));
 */
 /* 方案二:正则 */
 let str = '125544';
 function qian(str){
     let reg = /\d(?=(\d{3})+$)/g
     return str.replace(reg,function(a){
         return a + ','
     });
 }

 //url解析  千分符