正则表达式（第五期）
三十七、原子组别名
let str = `
<h1>dai</h1>
<span>戴</span>
<h2>csdn</h2>
`;
//$2
let reg = /<(h[1-6])>(.*?)<\/\1>/gi;
console.log(str.replace(reg, "<h4>$2</h4>"));
/*
<h4>dai</h4>
<span>戴</span>
<h4>csdn</h4>
*/
//?<con>是将该原子组定义为con这个名字
reg = /<(h[1-6])>(?<con>.*?)<\/\1>/gi;
console.log(str.replace(reg, "<h4>$<con></h4>"));
/*
<h4>dai</h4>
<span>戴</span>
<h4>csdn</h4>
*/
三十八、使用原子组别名优化正则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用原子组别名优化正则</title>
</head>
<body>
<main>
<a id="baidu" href="https://www.baidu.com">百度</a>
<a href="https://www.sina.cn">新浪</a>
</main>
<script>
const main = document.querySelector("main");
const reg = /<a.*?href=(['"])(?<link>.*?)\1>(?<title>.*?)<\/a>/ig;
let links = [];
for (const iterator of main.innerHTML.matchAll(reg)) {
links.push(iterator["groups"])
}
console.log(links);
/*
0: {link: 'https://www.baidu.com', title: '百度'}
1: {link: 'https://www.sina.cn', title: '新浪'}
*/
</script>
</body>
</html>
三十九、正则方法test
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>正则方法test</title>
</head>
<body>
<main>
<input type="text" name="email" id="email"/>
</main>
<script>
const input = document.querySelector("input");
input.addEventListener('keyup',e=>{
let value = e.target.value;
let flag = /^[\w-]+@(\w+\.)+(com|org|cn)$/i.test(value);
console.log(flag)
})
</script>
</body>
</html>
四十、正则方法exec
let str = 'daicsdndai';
const reg = /dai/g;
console.log(reg.exec(str));//['dai', index: 0, input: 'daicsdndai', groups: undefined]
console.log(reg.lastIndex);//3
console.log(reg.exec(str));//['dai', index: 7, input: 'daicsdndai', groups: undefined]
console.log(reg.lastIndex);//10
console.log(reg.exec(str));//null
console.log(reg.lastIndex);//0
let count = 0;//统计出现dai的次数
while(res = reg.exec(str)){
count++;
}
console.log('次数',count);//2
四十一、?=断言匹配（后面是什么）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>?=断言匹配</title>
</head>
<body>
<main>
daicsdndai
</main>
<script>
let main = document.querySelector("main");
//?=表示后边是
let reg = /dai(?=csdn)/g;
main.innerHTML = main.innerHTML.replace(reg, `<a href="https://blog.csdn.net/weixin_46318413">$&</a>`)
</script>
</body>
</html>
四十二、使用断言规范价格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>?=断言匹配</title>
</head>
<body>
<script>
let lesson = `
js,200元,300次
php,300.00元,100次
node.js,180元,260次
`;
let reg = /(\d+)(.00)?(?=元)/gi;
console.log()
lesson = lesson.replace(reg, (v, ...args) => {
console.log(args)
args[1] = args[1] || '.00';
return args.splice(0, 2).join('');
})
console.log(lesson);
/*
js,200.00元,300次
php,300.00元,100次
node.js,180.00元,260次
*/
</script>
</body>
</html>
四十三、?<=断言匹配（前面是什么）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>?<=断言匹配</title>
</head>
<body>
<script>
let str = 'daicsdndaiicsdn';
//?<=表示要找前面规定好的内容
const reg = /(?<=dai)csdn/i;
console.log(str.match(reg));//['csdn', index: 3, input: 'daicsdndaiicsdn', groups: undefined]
</script>
</body>
</html>
四十四、使用断言模糊电话号
let phone = '12345678900';
let reg = /(?<=\d{7})\d{4}/i;
console.log(phone.match(reg));//['8900', index: 7, input: '12345678900', groups: undefined]
phone = phone.replace(reg,(v,...args)=>{
return '*'.repeat(4)
})
console.log(phone);//1234567****
四十五、?!断言匹配（后面不是什么）
let phone = 'dai123csdn';
//?!表示后面不是……
let reg = /[a-z]+(?!\d+)$/i;
console.log(phone.match(reg));//['csdn', index: 6, input: 'dai123csdn', groups: undefined]
四十六、断言限制用户名关键词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>断言限制用户名关键词</title>
</head>
<body>
<main>
<input type="text" name="username" />
</main>
<script>
const input = document.querySelector("input");
input.addEventListener('keyup', e => {
//不包含dai
const reg = /^(?!.*dai.*)/i;
console.log(e.target.value.match(reg))
})
</script>
</body>
</html>
四十七、?<!断言匹配（前面不是什么）
let str = "dai99csdn";
//前面不是什么
let reg = /(?<!\d+)[a-z]+/i;
console.log(str.match(reg));//['dai', index: 0, input: 'dai99csdn', groups: undefined]
四十八、使用断言统一数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用断言统一数据</title>
</head>
<body>
<main>
<a href="https://www.baidu.com">百度</a>
<a href="https://oss.baidu.com">百度oss</a>
<a href="https://test.baidu.com">百度测试</a>
</main>
<script>
let main = document.querySelector('main');
let reg = /https:\/\/([a-z]+)?(?<!oss)\.baidu\.com/gi;
console.log(main.innerHTML.match(reg));// ['https://www.baidu.com', 'https://test.baidu.com']
main.innerHTML = main.innerHTML.replace(reg,(v,...args)=>{
return 'https://oss.baidu.com'
})
</script>
</body>
</html>
以上就是正则表达式第五期的内容，所有的正则已经整理完毕，大家可以关注《正则表达式》专栏进行学习。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享，一起进步，加油。