三、javascript正则表达式

---

一、Javascript正则表达式

1.1 y模式

// g g会一直匹配下去，遇到不是的跳过继续往下匹配
// y y遇到匹配不上的就不会再匹配下去了

let str = 'kakangyun'
let reg = /k/g
console.log(reg.exec(str))
console.log(reg.lastIndex)
// y往下一个匹配是a不是k匹配不上，就不再继续匹配了
// y在匹配大文档的时候会节省资源
console.log(reg.exec(str))
console.log(reg.lastIndex)

1.2 原子表的基本使用

// [] 原子表
// () 原子组

let time = '2022-02-23'
let reg = /^\d{4}([-\/])\d{2}\1\d{2}$/
console.log(reg.exec(time))

1.3 区间匹配

+ : 一次以上
* : 0次以上
? : 0或1次
. : 除换行之外的所有字符
match 匹配到的就存进数组中，再继续匹配，区配到的又存进数组中

// [0-9] [a-z] 

1.4 认识原子组

// 原子组()可以在正则中引用原子组\1\2\3
let html = `
    <h1>kangyun</h1>
    <h2>永恒的宁静</h2>
`
let reg = /\s*<(h[1-6])>([\s\S]*)<\/\1>/i
console.log(html.match(reg))
console.log(reg.exec(html))

邮箱正则匹配:

let mail = "17902@qq.com.cn"
let reg = /^[\w-]+@([\w-]+\.)+(com|org|cc|cn|net)$/i
console.log(reg.test(mail))

另一个demo:

let str = `
    <h1>hello,world!</h1>
    <span>你好呀!</span>
    <h2>hehe!</h2>
    `
// 将str中的h标签替换成p标签
let reg = /<(h[1-6])>([\s\S]+)<\/\1>/gi
// $2是第二个原子组匹配到的内容
// console.log(str.replace(reg, `<p>$2</p>`))

let res = str.replace(reg,(p0,p1,p2)=>{
    // console.log(p0) p0正则匹配到的内容
    // console.log(p1) 第一个分组匹配到的内容
    // console.log(p2) 第二个分组匹配到的内容
    return `<p>${p2}<p>`
})
console.log(res)

1.5 嵌套分组与不记录分组

// ?: 这个分组不记录
// 将字符串中的域名提取出来
let urls = `
    https://www.tianyun.com
    http://tianyun.com
    http://ty.com
`

let reg  = /https?:\/\/((?:w+\.)?\w+\.(?:com|cn|net|org))/gi

// match返回匹配的字符串
// exec会返回每个分组匹配的字符串

let urlArr = []
while((res = reg.exec(urls))){
    urlArr.push(res[1])
}
console.log(urlArr)

1.6 批量使用正则表达式完成密码验证

const password = 'abcd';
const regs = [
    /^[a-z0-9]{5,10}$/i,
    /[A-z]/,
    /[0-9]/
]

let state = regs.every(e=>{
    console.log(e)
    e.test(password)
});
console.log(state)

1.7 禁止使用贪婪

// ?前面是表过个数的时候表示禁用贪婪模式
let str = "kyyyyyy";
// + 匹配>=1
console.log(str.match(/ky+/))  //kyyyyyy
// +后面那个问题就是禁止贪婪,+就取=1
console.log(str.match(/ky+?/)) //ky
console.log(str.match(/ky*?/)) //k
// 往少的贪加上?
console.log(str.match(/ky{2,100}?/)) //kyy
// ?? ? 0或1个，加上问号就是往小的贪0
console.log(str.match(/ky??/)) //k

// 将字符串中span标签替换成h4标签
let str = `
    <span>kangyun</span>
    <span>kangyun.com</span>
    <span>tianyun.org</span>
`
// 使用了禁止贪婪
const reg = /<span>([\s\S]+?)<\/span>/gi
var res = str.replace(reg, (v,p1)=>{
    return `<h4 style="color:red">${p1}</h4> `;
})
console.log(res)