与正则一起使用的字符串方法
match 捕获
let str="hello Apple one apple";
let reg=/apple/ig;
console.log(str.match(reg));
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);
search 查询
g不会生效
let str="hello apple one Apple";
let reg=/Apple/ig;
//满足条件就返回 第一个的索引下标(g不起作用)
//不满座条件就返回 -1
console.log(str.search(reg));
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));
问号?在正则表达式中的作用:
前面不是数量词,匹配0次或1次
前面是数量词,将贪婪匹配转为惰性匹配(尽可能短的匹配)
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() 去掉一个字符串的前后空格
//1.去掉一个字符串的 前后空格
let str=" hello one two ";
console.log(str.trim());
//1.去掉一个字符串的 前后空格
let str=" hello one two ";
console.log(str.replace(/(^\s+|\s+$)/g,""));
正则表达式中,用反斜线\加数字n,表示与第n个小括号匹配成功的内容的一致。
如:
//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(" "));
两个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());
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");
异步微任务
event loop 事件循环机制,异步任务会在同步任务执行完后执行