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 事件循环机制,异步任务会在同步任务执行完后执行

进阶参考

你可能感兴趣的:(重返学习,学习,正则表达式,javascript)