关于正则的基本知识点都在下面的代码中，每个知识点都有对应的案例。我也是跟着B站上"后盾人教程"学的。
<!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>Document</title>
</head>
<body>
<!--
知识点:
关于全局匹配获取括号里的内容，可以用match(while+i模式(仅仅是忽略大小写的作用)),matchAll(g模式),exec(gi模式),replace(gi模式)
模式 :g(全局匹配) i(忽略大小写) s(忽略换行符) m(每一行单独处理) y(找不到停止)
-->
<!-- 3. -->
<!-- <div class="content">
dsfajoaewjf.com
</div> -->
<!-- 18.操作dom -->
<!-- <h2>xxxxx</h2>
<h3>xxxxxxxx</h3>
<H4>xxxxxxxxxx</H4>
<h3>
xxxxxxxxx
</h3> -->
<!--20.验证邮箱 -->
<!-- <input type="text" value="xxxxxx" name="email"/><span class="isEmail"></span> -->
<!-- 21.dom替换 -->
<!-- <div class="content">
<h2>aBCDEFG</h2>
<h3>bbcdefg</h3>
<p>cBCDEFG</p>
</div> -->
<!-- 23.使用多个正则验证密码 -->
<!-- <input type="text" name="password"/><span class="emailErrTxt"></span> -->
<!-- 24.禁止贪婪匹配 -->
<!-- <div class="content">
<span>joadsjfoad</span>
<span>fajodfjoadf</span>
</div> -->
<!-- 28.使用$&添加链接 -->
<!-- <div class="content">
有问题找百度，百度一下就知道！
</div> -->
<!-- 30.批量按需替换链接 -->
<!-- <div class="content">
<a style="color:red" href="http://www.hdcms.com">
开源系统
</a>
<a id='l1' href="http://houduren.com">后盾人</a>
<a href="http://yahoo.com">雅虎</a>
<h4>http://www.hdcms.com</h4>
</div> -->
<!-- 32.给组起别名，细节结果中的groups中就会有内容了 -->
<!-- <div class="content">
<a href='http://www.baidu.com'>百度</a>
<a href="http://www.sina.com">新浪</a>
</div> -->
<!-- 34.?<=断言匹配,前面是什么 -->
<!-- <div class="content">
<a href="https://www.baidu.com">链接1</a>
<a href="https://yahoo.com">链接2</a>
</div> -->
<!-- 37.断言匹配限制用户关键词 -->
<!-- <input type="text" name="username"/> -->
<!-- 38.?<!前面不是什么 -->
<!-- <div class="content">
<a href="https://www.houdunren.com/1.jpg">1.jpg</a>
<a href="https//oss.houdunren.com/2.jpg">2.jpg</a>
<a href="https://cdn.houdunren.com/3.jpg">3.jpg</a>
<a href="https://houdunren.com/4.jpg">后盾人</a>
</div> -->
<script>
//1.
// let str="adsfadwf56dsfa432432"
// let nstr=[...str].filter(v=>!isNaN(v)).join("")
//正则
// console.log(str.match(/\d/g).join(""))
//2.
//正则表达式字面量的写法读取变量，但是可以配合eval
// let str="un.com"
// let reg="u"
// console.log(eval(`/${reg}/`).test(str))
//3.
// let s=prompt('请输入想要找的字符，支持正则')
// let contentDiv=document.querySelector('.content')
// let reg=new RegExp(s,'g')
// contentDiv.innerHTML=contentDiv.innerHTML.replace(reg,search=>{
// return `<span style="color:red">${search}</span>`
// })
//4.
// let num="010-9999999";
// console.log(/^(010|020)\-\d{7,8}$/.test(num))
//5.[],()
// let str=222254535;
// let reg=/[123]/
// let reg=/(12|31)/
// console.log(reg.test(str))
//6.转义字符\
// let num=23.12
// console.log(/\d+\.+\d+/.test(num))
// //字符串"\d"=>"d" "\\d"=>"\d"
// let reg=new RegExp("\\d+\\.\\d+")
// console.log(reg.test(num))
// let url="http://www.baidu.com"
// \/是因为/代表正则里的结束字符
// console.log(/https?:\/\/\w+\.\w+\.\w+/.test(url))
//7.
// let str=`
// 张三:010-888999,李四:020-64545654
// `
// //获取张三，李四
// console.log(str.match(/[^\-,\s\d:]+/g))
//8.
// let str='32432434@qq.com'
// console.log(/^\w+@\w+\.\w+$/.test(str))
//9.
// let str=`
// hou.com
// hannda.com
// `
// s模式视为单行匹配，可以理解为忽略换行符
// console.log(str.match(/.+/s)[0])
//10.
// let str=`
// <span>
// hou.com
// hannda.com
// </span>
// `
//这里的+得加，不加只能匹配一个，加上的话可以贪婪匹配
// console.log(/<span>[\d\D]+<\/span>/.test(str))
//11.
// let hd="hasdfuaUsU"
// //g全局匹配，i不区分大小写
// console.log(hd.match(/u/gi))
// console.log(hd.replace(/u/gi,'@'))
//12.
// let str=`
// #1 js,200元 #
// #2 php,200元 #
// #9 houdunren.com # 后盾人
// #3 node.js,180元 #
// `
// m 每一行单独处理
// let lesson=str.match(/^\s+#\d\s+.+\s+#$/gm).map(v=>{
// v=v.replace(/\s+#\d\s+/,'').replace(/\s+#/,'')
// let [name,price]=v.trim().split(',')
// return {name,price}
// })
// console.log(lesson)
//13.
// let str='hjouun'
// 这里什么都不加的话，下面while循环中的lastIndex一直为0 导致死循环
// let reg=/u/g
// while((res=reg.exec(str))){
// console.log(reg.lastIndex)
// console.log(res)
// }
//14.
//y模式 如果在lastIndex处匹配不到，会停止，但是可以修改reg的lastIndex属性 y模式会提高检索的效率，找不到就停，不再往下找了
// let str='xx23434543,345345345,0000000xxxxxxx'
//加了问号，可以查两次结果
// let reg=/(\d+),?/y
// reg.lastIndex=2;
// let num=[]
// while(res=reg.exec(str)) num.push(res[1])
// console.log(num)
//15,
//可以把选取的内容放在()里，然后后面使用\1代表选取和前面()一样的内容
// let str="2021-08/03"//false
// let str="2021-08-03"//true
// 这里的\1代表的内容和([-\/])的内容一样
// let reg=/\d{4}([-\/])\d{2}\1\d{2}/
// console.log(reg.test(str))
//16.
//字符是有自己特定的属性的，可以根据这个选取特定的字符 比如文字sc=Han 用这个匹配时，要加上u模式
// let str="战三:020-35345435,王思:010-3435345"
//获取里面的文字
// console.log(str.match(/[^\-\d:,]+/g))
// console.log(str.match(/\p{sc=Han}+/gu))
//17.
//[.+] 中的.+没有特殊含义 原子表字符不解析
//18.正则操作DOM
// let body=document.querySelector('body')
//[\d\D] [\s\S] [^] 代表所有都可以匹配
//这里用+的话 <h1></h1>就匹配不到了。。
// body.innerHTML=body.innerHTML.replace(/<(h\d)>[^]*<\/\1>/gi,'')
//19.
//原子组()的其它知识
// let str=`
// <h1>xxxxxxxxx</h1>
// <h2>xxxxxxx</h2>
// `
// let reg=/<(h[1-6])>([^]+)<\/\1>/i
//使用字符串的match匹配时，g模式和i模式输出的结果不一样，i模式输出的全一些，而且可以把原子组里面的内容输出 索引1的内容就是第一个原子组里面的内容
// console.log(str.match(reg))
//20.验证邮箱
// let input=document.querySelector("input[name='email']")
// let span=document.querySelector('.isEmail')
//因为可以是.com.cn 所以这里得用原子组包起来 要不然只会识别.com的情况
// let reg=/^[\w-]+\@([\w-]+\.)+(com|con|net)$/i
// input.addEventListener('keyup',function(){
// span.innerHTML=reg.test(this.value)?'正确':'错误'
// })
//21.DOM替换
// let div=document.querySelector('.content')
//这里有三个括号
// let reg=/<(h[1-6])>(\w([^]+))<\/\1>/gi
// console.log(div.innerHTML.replace(reg,`<span>$3</span>`));
// let res= div.innerHTML.replace(reg,($0,$1,$2,$3)=>{
// $0匹配到的全部内容 $1取出匹配到的全部内容中的第一个括号中的内容
// console.log($0)
// return `<span>${$3}</span>`
// })
//22.嵌套分组、记录组、不记录组 提取域名
// let str=`
// http://houdunren.com
// https://xxxxx.com
// `
//?:代表该组不会记录到组编号中，就是最后不能用$数字获取括号里的内容
// let reg=/https?:\/\/((?:\w+\.)(?:com|cn|org|con))/ig
// let arr=[]
// while(res=reg.exec(str)){
// console.log(res);
// arr.push(res[1])
// }
//23.使用多个正则验证密码
// let emailInput=document.querySelector("input[name='password']")
// let span=document.querySelector('.emailErrTxt')
// let regs=[
// {
// name:'必须含有特殊字符',
// reg:/[^a-z0-9]/i
// },
// {
// name:'必须含有字母',
// reg:/[a-z]/i
// },
// {
// name:'必须含有数字',
// reg:/[0-9]/
// },
// {
// name:'长度必须是五位以上',
// reg:/[^]{5,}/
// }
// ]
// emailInput.addEventListener('keyup',function(){
// span.innerHTML=''
// let res=regs.every(v=>{
// if(!v.reg.test(this.value)) span.innerHTML=v.name
// return v.reg.test(emailInput.value)
// })
// res?span.innerHTML='密码正确':''
// })
//24.禁止贪婪匹配 量词后面加上?,可以禁止贪婪匹配
// let div=document.querySelector('.content')
//注意([^]*)?是不会禁止贪婪匹配的，因为括号里面的内容还是会往多的取，而?只是匹配括号里的内容为0或1个 说白了就是?加在量词后面可以实现禁止贪婪匹配
// let reg=/<span>([^]*)?<\/span>/gi
// reg=/<span>([^]*?)<\/span>/gi
//?本身就是会往1个进行贪婪匹配，这样??写法就可以限制为0个
// div.innerHTML=div.innerHTML.replace(reg,($0,$1)=>{
// return `<h2>${$1}</h2>`
// })
//25.matchAll全局匹配
// let str=`
// <h2>adfadf</h2>
// <h2>dafasf</h2>
// <h2>afawefdsf</h2>
// `
//想要获取括号里的内容，就要去掉g模式,并使用i模式;但是由于去掉了g模式，就不能匹配到所有了，这里就形成了矛盾
//使用matchAll可以解决这个矛盾
// let reg=/<(h[1-6])>([^]+?)<\/\1>/g
// matchAll方法会返回一个关于REGEXP的迭代对象
// console.log(str.matchAll(reg))
// let regArr=str.matchAll(reg)
// let res=[]
// for(let i of regArr){
// res.push(i[2])
// }
//26.为兼容低端浏览器，手动实现matchAll
// String.prototype.matchAll=function(reg){
// let res=this.match(reg)
// if(!res) return
// //根据res[0]的搜索结果的字符长度个数，用相应个数的'^'进行替换
// let str=this.replace(res[0],'^',res[0].length)
// //如果匹配不到就给一个[]
// let matchRes=str.matchAll(reg) || []
// return [res,...matchRes]
// }
//这里不用g模式，用i模式，是因为想要得到括号里的内容，我们写的matchAll和原有的matchAll是有区别的
// let reg=/<(h[1-6])>([^]+?)<\/\1>/i
// let str=`
// <h2>adfadf</h2>
// <h2>dafasf</h2>
// <h2>afawefdsf</h2>
// `
// console.log(str.matchAll(reg))
//27.使用exec实现全局匹配
// function search(str,reg){
// let result=[]
// //reg如果不是g模式的话，这里就会导致死循环
// while(res=reg.exec(str)){
// result.push(res[2])
// }
// console.log(result);
// }
// let str=`
// <H2>adfadf</h2>
// <h2>dafasf</h2>
// <h2>afawefdsf</h2>
// `
//这里使用的是exec进行匹配，不需要使用i模式就可以获取到括号里的内容，这里的i模式只是起到忽略大小写的作用
//这里如果不加g模式的话，是不会继续往下进行匹配的
// let reg=/<(h[1-6])>([^]+?)<\/\1>/gi
// search(str,reg)
//28.$在正则中的使用
//使用$&,$`,$'将str变为"==内容=="
// let str="=内容="
//$&表示匹配到的内容,$`表示匹配到的内容的前面内容,$'表示匹配到的内容的后面内容
// console.log(str.replace(/内容/,"$`$&$`"))
//29.使用$&添加链接
// let div=document.querySelector('.content')
// div.innerHTML=div.innerHTML.replace(/百度/g,"<a href='http://www.baidu.com'>$&</a>")
//30.批量按需修改链接
// let div=document.querySelector('.content')
// let reg=/(<a.*href=['"])(http)(:\/\/)(www\.)?(houduren|hdcms)/gi
// div.innerHTML=div.innerHTML.replace(reg,(v,...args)=>{
// args[1]='https'
// //如果这个位置有www.,那么就用原来的，没有就加上www.
// args[3]=args[3] || 'www.'
// return args.slice(0,5).join('')
// })
//31.原子组别名的使用
// let str=`
// <h1>heejofapjsdjf</h1>
// `
// //?<content>定义原子组别名
// let reg=/<(h[1-6])>(?<content>.*?)<\/\1>/
// //$<content>使用原子组别名
// console.log(str.replace(reg,"<span>$<content></span>"))
//32.给组起别名，细节结果中的groups中就会有内容了
// let div=document.querySelector('.content')
// let reg=/<a.*href=(['"])(?<link>.*?)\1>(?<title>.*?)<\/a>/gi
// let links=[]
// for(let regItem of div.innerHTML.matchAll(reg)){
// links.push(regItem["groups"])
// }
//33.?=断言匹配,后面是什么
//添加.00以规范价格
// let lessons=`
// node.js,300.00元,200次,
// html,200元,100次,
// java,400元,200次
// `
// //注意(?=元)是不会加到组里面的！
// let reg=/(\d+)(.00)?(?=元)/gi
// lessons=lessons.replace(reg,(v,...args)=>{
// args[1]=args[1] || '.00'
// return args.splice(0,2).join('')
// })
//34.?<=断言匹配,前面是什么
// let div=document.querySelector('.content')
// let reg=/(?<=href=(['"])).+(?=\1)/ig
// div.innerHTML=div.innerHTML.replace(reg,"https://www.houdunren.com")
//35.使用断言处理电话号码
// let phoneNumber=`
// 小王:13985647651
// 小李:13345678983
// `
// let reg=/(?<=\d{7})\d{4}/gi
// phoneNumber=phoneNumber.replace(reg,v=>{
// return '*'.repeat(4)
// })
//36.使用断言匹配?!,后面不是什么
// let str='houdunren2010hdcms'
// //注意$不修饰断言！
// let reg=/[a-z]+(?!\d+)$/i
// console.log(str.match(reg))
//37.断言匹配限制用户关键词
// let userInput=document.querySelector("input[name='username']")
// //不能有小明关键字,而且是以字母开头的4位字母
// let reg=/^(?!.*小明.*)[a-z]{4}$/
// userInput.addEventListener("keyup",function(ev){
// console.log(this.value.match(reg))
// })
//38.?<!前面不是什么
// let contentDiv=document.querySelector('.content')
//注意.*后面一定要加个?以禁止贪婪匹配，要不然就会取到后面的</a>中的/
// let reg=/https?:\/\/([a-z]+)?(?<!oss)\..*?(?=\/)/gi
// contentDiv.innerHTML=contentDiv.innerHTML.replace(reg,(...args)=>{
// return 'https://oss.houduren.com'
// })
</script>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
