文章目录

  • 一、JavaScript正则表达式
  • 1.1 使用matchAll完成全局匹配
  • 1.2 使用exec完成全局匹配
  • 1.3 字符串正则方法seach与match
  • 1.4 字符串正则方法matchAll与split
  • 1.5 $符在正则替换中的使用
  • 1.6 原子组别名
  • 1.7 正则方法test
  • 1.8 正则断言匹配 ？=
  • 1.9 正则断言匹配?<=
  • 1.10 正则断言匹配 ?!
  • 1.11 正则断言匹配 ?<!


一、JavaScript正则表达式

1.1 使用matchAll完成全局匹配

// 将字符串中html标签中的内容捞取出来
let str = `
    <h1>kangyun</h1>
    <h1>kangyun.com</h1>
    <h2>tianyun.org</h2>
`
// 使用了禁止贪婪
const reg = /<(h[1-6])>([\s\S]+?)<\/\1>/gi
// matchAll返回一个可迭代的数据类型
const regStr = str.matchAll(reg)
let arr = []
for(const interator of regStr){
    arr.push(interator[2])
}
console.log(arr)

1.2 使用exec完成全局匹配

匹配的时候加上g模式

1.3 字符串正则方法seach与match

有些方法属于字符串的，有些方法属于正则表达式的。

let str = "kangyunkangyun.com"
// 字符串的search方法参数可为正则，如果没有匹配到则返回-1
// 匹配到了返回索引位置
console.log(str.search(/n/));
// 字符串的match方法将匹配到的字符串压入一个数组中，再返回这个数组
console.log(str.match(/n/gi));

1.4 字符串正则方法matchAll与split

// match不会返回一些比如分组匹配到的细节
// matchAll则会返回这些细节，但包含在一个迭代器中

1.5 $符在正则替换中的使用

const tel = '2023/01/10'
console.log(tel.replace(/\//g, '-'))

const tels = '(010)99999999 (020)88888888'
const reg = /\((\d{3,4})\)(\d{7,8})/g
console.log(tels.match(reg))
// $0表示第一个分组依次类推
console.log(tels.replace(reg, '$1-$2'))

let str = '=天天向上='
// $&就是你匹配到的内容
// 在表达式中就是\0
console.log(str.replace(/天天向上/, '=$&='))
// $`就是匹配到的字符串的前面一个字符,天天向上前一个字符是=
// 下例就是将天天向上替换成=  
console.log(str.replace(/天天向上/, '$`'))

// $'表示匹配到的字符串的后面一个字符

1.6 原子组别名

const str = `
    <h1>kangyun</h1>
    <span>玉清中学</span>
    <h2>tianyun</h2>
`

const reg01 = /<(h[1-6])>(.+?)<\/\1>/gi
console.log(str.replace(reg01, '<h4>$2</h4>'))
console.log('-----------')
// ?<con>就是给第二个分组命的名
const reg02 = /<(h[1-6])>(?<con>.+?)<\/\1>/gi
console.log(str.replace(reg02, '<h3>$<con><h3>'))

// 输出结果：
// <h4>kangyun</h4>
// <span>玉清中学</span>
// <h4>tianyun</h4>

// -------------
// <h3>kangyun<h3>
// <span>玉清中学</span>
// <h3>tianyun<h3>

1.7 正则方法test

const email = '$kangyun@qq.com'

let flag = /^[\w-]+@([\w-]+\.)+(com|org|cn)$/i.test(email)
console.log(flag)

1.8 正则断言匹配 ？=

const str = '玉清小学是一所乡村学校,什么原因导致玉清小学的学生越来越少了?'
// (?=的学生) 就是断言，表示匹配到玉清小学后面还要有一个**的学生**
let reg = /玉清小学(?=的学生)/g
// $&表示匹配到的字符串
let newStr = str.replace(reg, `<p style="color:red">$&</p>`)
console.log(newStr)
// 规范一下价格，都加上.00
let goods = `
    javascript,200元,300次
    php,300.00元,100次
    node.js,180元,260次
`
let reg = /(\d+)(.00)?(?=元)/gi

goods = goods.replace(reg, (v, ...args)=>{
    args[1] = args[1] || '.00'
    return args.splice(0, 2).join("")
})

console.log(goods)

1.9 正则断言匹配?<=

const str = 'kangyun789babala6666'
// 断言?<= 前有含kangyun的字符串
const reg = /(?<=kangyun)\d+/i
console.log(str.match(reg))
let tels = `
    镇子电话：12345678901
    玉清电话: 99999998888
`

let reg = /(?<=\d{7})\d{4}/gi

tels = tels.replace(reg, v=>{
    return "*".repeat(4)
})
console.log(tels)

// 输出结果
// 镇子电话：1234567****
// 玉清电话: 9999999****

1.10 正则断言匹配 ?!

let str = 'kangyun2020yuqing'
// ?!\d+后面不跟多个数字的
let reg = /[a-z]+(?!\d+)$/
console.log(str.match(reg))

1.11 正则断言匹配 ?<!

限制前而不是谁的