20230329----重返学习-正则的匹配-同步任务与异步任务

day-038-thirty-eight-20230329-正则的匹配-同步任务与异步任务

正则的匹配

字符串正则方法

与正则一起使用的字符串方法

1. match 捕获

   let str="hello Apple one apple";
   let reg=/apple/ig;
   console.log(str.match(reg));
   

2. replce 替换

   let str = "hello apple one Apple";
   // 默认没有正则，只会替换第一个
   console.log(str.replace("Apple", "苹果"));
   let reg = /Apple/gi;
   console.log(str.replace(reg, "苹果"));
   

   • replace 支持 直接使用$1-$9

     var str="red one blue two green scee";
     //replace 支持 直接使用$1-$9
     var newstr=str.replace(/(red|blue|green)/ig,"$1");
     document.write(newstr);
     

   • 与正则一起使用的时候，replace的第二个参数可以是函数

     • value: 匹配成功的内容 $1:第一个小括号匹配成功的内容 $2,$3…$9

       var str="red one blue two green scee";
       //与正则一起使用的时候，replace的第二个参数可以是函数
       var newstr=str.replace(/(red|blue|green)/ig,(value,$1)=>{
           //value: 匹配成功的内容  $1:第一个小括号匹配成功的内容  $2,$3....$9
           return `${$1}`
       });
       document.write(newstr);
       

3. search 查询

   • g不会生效

     let str="hello apple one Apple";
     let reg=/Apple/ig;
     //满足条件就返回 第一个的索引下标（g不起作用）
     //不满座条件就返回 -1
     console.log(str.search(reg));
     

4. split 分隔

   let str="hello  apple     one     Apple";
   console.log(str.split(/\s+/))
   

   let str = "hello,  apple     one:     Apple";
   console.log(str.match(/\b([a-z]+)\b/gi));
   

?在正则的作用

问号?在正则表达式中的作用：

1. 前面不是数量词，匹配0次或1次

2. 前面是数量词，将贪婪匹配转为惰性匹配（尽可能短的匹配）

   var str="hello one two scee";
   var newstr=str.match(/.*<\/b>/ig);
   //默认情况下：贪婪匹配 尽可能长的匹配
   console.log(newstr);
   

   var str="hello one two scee";
   var newstr=str.match(/.*?<\/b>/ig);
   console.log(newstr);
   

去掉一个字符串的前后空格

字符串的trim()方法

trim() 去掉一个字符串的前后空格

//1.去掉一个字符串的 前后空格
let str="   hello one two     ";
console.log(str.trim());

使用字符串的replace()方法

//1.去掉一个字符串的 前后空格
let str="   hello one two     ";
console.log(str.replace(/(^\s+|\s+$)/g,""));

正则分组的特殊用法

正则表达式中，用反斜线\加数字n，表示与第n个小括号匹配成功的内容的一致。

如：

• \1 值要与第一个小括号，匹配成功的内容一致
• \2 值要与第二个小括号，匹配成功的内容一致

//2.分组 特殊用法
// \1 值要与第一个小括号，匹配成功的内容一致
// \2 值要与第二个小括号，匹配成功的内容一致
//... \3
let str="aEEa  aCDa dAAd";
console.log(str.match(/([a-z])([A-Z])\2\1/g));

?:只匹配不捕获

(?:内容)括号内的内容只匹配不捕获

//3.  ?: 只匹配不捕获
// 省市县： 前6位
// 年：接下4位
// 月：又接下2位
// 日：又接下2位
// 倒数第二位 偶数 女 奇数 男
//'372901200103235943'
let str='372901200103235943';
let reg=/(?:\d{6})(\d{4})(\d{2})(\d{2})\d{2}(?:\d)[0-9Xx]/;
let res=reg.exec(str);
console.log(res)

首字母大写

正则方式

//1.首字母大写
let str = "good good study，day day up！";
let reg=/\b([a-z])([a-z]+)\b/ig;
let newstr=str.replace(reg,(_,$1,$2)=>{
    //console.log(value,$1,$2)
    return $1.toUpperCase()+$2;
})
console.log(newstr);

数组循环的方式

let str = "good good study, day day up！";
let arr=str.split(" ");
let newarr=[]
for(let i=0;i<arr.length;i++){
    let item=arr[i].slice(0,1).toLocaleUpperCase()+arr[i].slice(1)
    newarr.push(item)
}
console.log(newarr.join(" "));

验证一个字符中那个字母出现的次数

match拿到一个数组数组，之后两个for循环

两个for循环，一个先拿到最大长度，一个用最大长度确定是那个字母

//2.验证一个字符中那个字母出现的次数最多，多少次
let str = "zhufengpeixunzhoulaoshi";
//1.将相同的字母排到一块
// 将字符串---》数组--》排序---》字符串
let newstr=str.split("").sort().join("")
//将两个级两个以上的字母都找出来
let reg=/([a-z])\1+/g;
let arr=newstr.match(reg);
let maxlength=2;//建设最大长度为2
for(let i=0;i<arr.length;i++){
    if(arr[i].length>maxlength){
      maxlength=arr[i].length
    }
}

for(let i=0;i<arr.length;i++){
    if(arr[i].length===maxlength){
      console.log(arr[i])
    }
}

用对象

replace()拿到最大长度并把长度保存到对象中，一个for-in循环

//2.验证一个字符中那个字母出现的次数最多，多少次
let str = "zhufengpeixunzhoulaoshi";
//1.将相同的字母排到一块
// 将字符串---》数组--》排序---》字符串
let newstr=str.split("").sort().join("")
//将两个级两个以上的字母都找出来
let reg=/([a-z])\1+/g;
let obj={}
// let obj={
//     e:2,
//     h:3,
//     c:4,
// }
let maxlength=2;
newstr.replace(reg,(value,$1)=>{
    if(value.length>maxlength){
        maxlength=value.length;
    }
    obj[$1]=value.length
})

for(let i in obj){
    if(maxlength===obj[i]){
        console.log(i)
    }
}

数字字符串进行千分符

String.prototype.millimeter=function millimeter(){
    //this===》str
    let reg=/\d{1,3}(?=(\d{3})*$)/g;
    let result=this.replace(reg,(value)=>{
        // console.log(value);//1 234 567 890
        return ","+ value;
    })
    //result//,1,234,567,890
    return result.slice(1)// 1,234,567,890
}
let str = '1234567890';
console.log(str.millimeter());

url字符串解析

String.prototype.queryURLParams=function queryURLParams(){
    //this-->str
    let obj={};
    let reg1=/([^?=&#]+)=([^?=&#]+)/ig;
    this.replace(reg1,(value,$1,$2)=>{
      //value：name=xxx age=12
        obj[$1]=$2
    })

    let reg2=/#([^?=&#]+)/ig;
    this.replace(reg2,(value,$1)=>{
        //value #teacher
        obj["HASH"]=$1
    })

    return obj;
}
let str="http://www.zhufengpeixun.cn/index.html?name=xxx&age=12#teacher";
console.log(str.queryURLParams());
//{name:"xxx",age:"12",HASH:"teacher"}

时间字符串格式化处理

//formatTime 时间字符串格式化处理
String.prototype.formatTime = function formatTime(tempalte) {
  //this===》str   参数 tempalte
  if (tempalte == undefined) {
    tempalte = "{0}年{1}月{2}日 {3}:{4}:{5}";
  }

  let reg = /\d+/g;
  let arr = this.match(reg); // ['2023', '3', '29', '5', '5', '5']

  return tempalte.replace(/\{(\d+)\}/g, (value, $1) => {
    //arr[0]--arr[$1]
    //value: {0} {1} ....
    //$1:  0  1 ....
    let res = arr[$1] || "00"; //取默认值"00"
    //补0
    if (res.length < 2) {
      return "0" + res;
    }
    return res;
  });
};
let str = "2023/3/29 5:5:5";

console.log(str.formatTime()); //什么都不传
// console.log(str.formatTime("{0}年{1}月{2}日 {3}:{4}"));
// console.log(str.formatTime("{1}月{2}日 {3}:{4}"));
// console.log(str.formatTime("{0}年{1}月{2}日"));
// console.log(str.formatTime("{0}-{1}-{2} {3}:{4}"));

同步任务与异步任务

同步与异步基本概念

JavaScript代码 大部分都是同步的，少数异步

• 同步：上一步没有完成，下一步不能开始

  console.log("a");
  for (let i = 0; i < 999; i++) {
    console.log(i);
  }
  console.log("b");
  

• 异步：可以同时进行

  • 异步宏任务

    • ajax/fetch

      console.log("a");
      function getData() {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "data.txt", true);
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.response);
          }
        };
        xhr.send();
      }
      getData();
      console.log("b");
      

    • setTimeout setInterval

      console.log("a");
      setTimeout(() => {
        console.log("1111");
      }, 0); //浏览器会有 5-7ms的延迟
      console.log("b");
      

    • 事件绑定

      console.log("a");
      box.onclick = function () {
        console.log("1111");
      };
      console.log("b");
      

  • 异步微任务

    • Promise.then/catch
    • async await
    • requestAnimationFrame

同步与异步的联系

event loop 事件循环机制，异步任务会在同步任务执行完后执行

进阶参考