正则表达式
1. 原子表的使用
let tel = '2020-04-06'
console. log ( tel. match ( /^\d{4}-\d{2}-\d{2}$/ ) )
console. log ( tel. match ( /^\d{4}[-\/]\d{2}[-\/]\d{2}$/ ) )
console. log ( tel. match ( /^\d{4}([-\/])\d{2}\1\d{2}$/ ) ) ;
const num = "2" ;
console. log ( /[0-3]/ . test ( num) ) ;
const hd = "e" ;
console. log ( /[a-f]/ . test ( hd) ) ;
let str = "(houdunren.com)+" ;
console. table ( str. match ( /[().+]/g ) ) ;
console. table ( str. match ( /[\(\)\.\+]/g ) ) ;
let hd = ` houdunren
hdcms
` ;
console. log ( hd. match ( /[\s\S]+/g ) ) ;
< h1> houdunren. con houdunwang. com< / h1>
< h2> baidu. com< / h2>
let body = document. body;
let reg = /<(h[1-6])>[\s\S]*<\/\1>/gi ;
body. innerHTML =
body. innerHTML. replace ( reg, "" ) ;
原子表
说明
[]
只匹配其中的一个原子
[^]
只匹配"除了"其中字符的任意一个原子
[0-9]
匹配0-9任何一个数字
[a-z]
匹配小写a-z任何一个字母
[A-Z]
匹配大写A-Z任何一个字母
2. 原子组的使用
let str = `<h1>as</h1>
<h2>dfd</h2>
` ;
let reg = /<(h[1-6])>[\s\S]*<\/\1>/g ;
console. log ( str. match ( reg) ) ;
原子组与原子表的差别在于原子组一次匹配多个元子,而原子表则是匹配任意一个字符
1.没有添加 g 模式修正符时只匹配到第一个,匹配到的信息包含以下数据 2. 在match中使用原子组匹配,会将每个组数据返回到结果中
变量
说明
0
匹配到的完整内容
1,2…
匹配到的原子组
index
原字符串中的位置
input
原字符串
groups
命名分组
< input type= "text" name= "email" value= "[email protected] " / >
let email = document. querySelector ( `[name="email"]` ) . value;
console. log ( email) ;
let reg = /^[\w-]+@([\w-]+\.)+(com|org|cc|cn|net)$/i ;
console. log ( email. match ( reg) ) ;
let str = `
<h1>内容1部分</h1>
<h2>内容2部分</h2>
<p>内容3部分</p>
` ;
let reg = /<(h[1-6])>([\s\S]+)<\/\1>/gi ;
console. log ( str. match ( reg) ) ;
console. log ( str. replace ( reg, "<p>$2</p>" ) ) ;
let res = str. replace ( reg, ( p0, p1, p2) => `<p> ${
p2} </p>` ) ;
console. log ( res) ;
let url = `
http://www.baidu.com
https://www.sina.com
https://www.qq.com
` ;
let reg = /(?:http|https)?:\/\/((?:\w+\.)?\w+\.(?:com|cn|net))/gi ;
console. log ( url. match ( reg) ) ;
let urls = [ ] ;
while ( ( res = reg. exec ( url) ) ) {
urls. push ( res[ 1 ] ) ;
}
console. log ( urls) ;
3. 多种重复匹配
let str = "www.baiduww.com" ;
console. log ( str. match ( /w+/g ) ) ;
console. log ( str. match ( /w?/g ) ) ;
console. log ( str. match ( /w*/g ) ) ;
console. log ( str. match ( /w{2}/g ) ) ;
console. log ( str. match ( /w{2,}/g ) ) ;
console. log ( str. match ( /w{1,3}/g ) ) ;
let tel = "010-99999999" ;
console. log ( tel. match ( /^0\d{2,3}-\d{7,8}$/ ) ) ;
console, log ( tel. match ( /(10)+/ ) )
< input type= "text" name= "username" / >
document
. querySelector ( `[name="username"]` )
. addEventListener ( "keyup" , ( e) => {
let reg = /^[a-z][\w-]{2,7}$/i ;
let val = e. target. value;
console. log ( val) ;
console. log ( reg. test ( val) ) ;
} ) ;
document
. querySelector ( `[name="password"]` )
. addEventListener ( "keyup" , ( e) => {
let regs = [ /^[a-z0-9]{5,9}$/i , /[A - Z]/ , /\d/ ] ;
let val = e. target. value;
let status = regs. every ( ( e) => e. test ( val) ) ;
console. log ( status ? "正确" : "不包含" ) ;
} ) ;
4. 禁止贪婪
< main>
< span> www. baidu. com< / span>
< span> www. sina. com. cn< / span>
< span> dsfdsfds< / span>
< / main>
const main = document. querySelector ( "main" ) ;
const reg = /<span>([\s\S]+?)<\/span>/gi ;
let str = "" ;
main. innerHTML = main. innerHTML. replace ( reg, ( v, p1) => {
console. log ( `<h4> ${
p1} </h4>` ) ;
return `<h4> ${
p1} </h4>` ;
} ) ;
5. 全局匹配
< body>
< main>
< h1> 内容1 部分< / h1>
< h2> 内容1 部分< / h2>
< h3> 内容1 部分< / h3>
< / main>
< / body>
< script>
let val = /<(h[1-6])>([\s\S]+?)<\/\1>/gi ;
let body = document. body;
let hd = body. innerHTML. matchAll ( val) ;
console. log ( hd) ;
let arr = [ ] ;
for ( const iterator of hd) {
arr. push ( iterator[ 2 ] ) ;
}
console. log ( arr) ;
< / script>
String. prototype. matchAll = function ( reg) {
let res = this . match ( reg) ;
if ( res) {
let str = this . replace ( res[ 0 ] , "^" . repeat ( res[ 0 ] . length) ) ;
let match = str. matchAll ( reg) || [ ] ;
return [ res, ... match] ;
}
} ;
function search ( param, reg) {
let result = [ ] ;
while ( ( ee = reg. exec ( param) ) ) {
result. push ( ee) ;
}
return result;
}
let matchs = search ( document. body. innerHTML, /<(h[1-6])>[\s\S]+?<\/\1>/gi ) ;
console. log ( matchs) ;
6. 正则常用的方法
let str = "houdunren.com" ;
console. log ( str. search ( "com" ) ) ;
console. log ( str. search ( /\.com/i ) ) ;
let str = "houdunren.com" ;
console. log ( str. match ( "com" ) ) ;
let str = "houdunren" ;
let reg = /[a-z]/ig ;
for ( const iterator of str. matchAll ( reg) ) {
console. log ( iterator) ;
}
let str = "2023-02-12" ;
console. log ( str. split ( "-" ) ) ;
let str = "2023/02-12" ;
console. log ( str. split ( /-|\// ) ) ;
let str = "2023/02/12" ;
console. log ( str. replace ( /\//g , "-" ) ) ;
变量
说明
$$
插入一个“$”
$&
插入匹配的字符串
$`
插入当前匹配的子串左边的内容。
$’
插入当前匹配的子串右边的内容。
$n
假如第一个参数是 RegExp 对象,并且 n 是个小于100的非负整数,那么插入第 n 个括号匹配的字符串。提示:索引是从1开始
< body>
< input type= "text" name= "email" / >
< / body>
< script>
let email = document. querySelector ( `[name="email"]` ) ;
email. addEventListener ( "keyup" , e => {
console. log ( /^\w+@\w+\.\w+$/ . test ( e. target. value) ) ;
} ) ;
< / script>
< body>
< div class = "content" >
后盾人不断分享视频教程,后盾人网址是 houdunren. com
< / div>
< / body>
< script>
let content = document. querySelector ( ".content" ) ;
let reg = /(?<tag>后盾)人/g ;
let num = 0 ;
while ( ( result = reg. exec ( content. innerHTML) ) ) {
num++ ;
}
console. log ( `后盾人共出现 ${
num} 次` ) ;
< / script>
7. 断言匹配
let val = "<p align=right>标题</p>"
let str = val. splace ( /align(?=right)?/gi , "text-align" )
console. log ( str)
let str = val. splace ( /(?<=align=)right?/gi , "center" )
console. log ( str)
let hd = "houdunren12" ;
let reg = /[a-z]+(?!\d{2})$/i ;
console. table ( reg. exec ( hd) ) ;
let hd = "hdcms99houdunren" ;
let reg = /(?<!\d+)[a-z]+/i ;
console. log ( reg. exec ( hd) ) ;