Regular Expressions (Volume 5)
- Thirty-seven, atomic group aliases
- Thirty-eight, using atomic group aliases to optimize regular
- Thirty-nine, regular method test
- Forty, regular method exec
- Forty-one, ?= assertion match (what is behind)
- Forty-two, use assertions to standardize prices
- Forty-three, ?<= assertion match (what is in front)
- Forty-four, use assertions to obfuscate phone numbers
- Forty-five, ?! Assert match (nothing behind)
- Forty-six, assertion limit username keywords
- Forty-seven, ?<! assertion match (what is not in front)
- Forty-eight, use assertions to unify data
Thirty-seven, atomic group aliases
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>
*/
Thirty-eight, using atomic group aliases to optimize regular
<!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>
Thirty-nine, regular method 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>
Forty, regular method 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
Forty-one, ?= assertion match (what is behind)
<!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>
Forty-two, use assertions to standardize prices
<!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>
Forty-three, ?<= assertion match (what is in front)
<!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>
Forty-four, use assertions to obfuscate phone numbers
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****
Forty-five, ?! Assert match (nothing behind)
let phone = 'dai123csdn';
//?!表示后面不是……
let reg = /[a-z]+(?!\d+)$/i;
console.log(phone.match(reg));//['csdn', index: 6, input: 'dai123csdn', groups: undefined]
Forty-six, assertion limit username keywords
<!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>
Forty-seven, ?<! assertion match (what is not in front)
let str = "dai99csdn";
//前面不是什么
let reg = /(?<!\d+)[a-z]+/i;
console.log(str.match(reg));//['dai', index: 0, input: 'dai99csdn', groups: undefined]
Forty-eight, use assertions to unify data
<!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>
The above is the content of the fifth issue of regular expressions. All the regular expressions have been sorted out. You can pay attention to the " Regular Expressions " column to learn.
I will share the common problems in my usual projects and the knowledge of the written test and interview with you on CSDN, and make progress together. Come on.