正则表达式的用法

正则表达式非常强大，几乎能完成所有字符串的操作，唯一的缺点是它的运用十分复杂且灵活。

字面量创建正则

// //内部写匹配规则，后面写模式
let reg = /\d/g

对象创建正则

// 第一个参数是匹配规则，第二个是模式。注意：在对象里面转义需要双斜杠\\
let reg1 = new RegExp("\\d", "g")
// 也可以使用变量作为第一个参数
let r = /\d/
let reg2 = new RegExp(r, "g")

选择符

// |表示左右两边的规则满足一种即可
let reg = /a|b/

匹配电话号码

let tel = "0791-81234567"
let reg = /^(0791|0792)-\d{7,8}$/
reg.test(tel) // true

边界约束

// 在正则中^和$用来做边界约束
let str1 = "abc123def"
let reg1 = /\d/ // 这里表示只要匹配内容中含有数字，就为true
reg1.test(str1) // true
let str2 = "123abcd"
let reg2 = /^\d/ // 这里表示匹配内容必须以数字开头
reg2.test(str1) // false
reg2.test(str2) // true
let reg3 = /^\d+$/ // 这里表示匹配内容必须只能是数字
let str3 = "1234"
let str4 = "123abc456"
reg3.test(str3) // true
reg3.test(str4) // fales

用户名限定长度

// 限定用户名输入的长度只能是6-10位字母，数字，下划线
let reg = /^[a-z0-9_]{6,10}$/i

元字符

// 元字符是正则中的最小单位，它代表了一类字符的一个
/*
   常用的元字符：
   \d 所有数字 \D 所有非数字
   \w 所有字母 \W 所有非字母
   \s 所有空白符，包括换行符 \S 所有非空白符
   . 除了换行符以外的所有字符
*/
let num = "012345"
let reg1 = /\d/
let reg2 = /\d\d/
let reg3 = /\d\d\d/
num.match(reg1) // 0
num.match(reg2) // 01
num.match(reg3) // 012

模式修正符

// 模式修正符可以改变正则匹配的模式
/*
   常用的模式修正符：
   i 不区分字母大小写
   g 全局匹配
   m 多行模式匹配
   模式可以组合使用，顺序任意
*/
let str = "abcdefg"
let reg1 = /\w/
let reg1 = /\w/g
str.match(reg1) // a
str.match(reg2) // ["a", "b", "c", "d", "e", "f", "g"]

驼峰格式替换

let str = "get-element-by-id"
let reg = /-\w/g
str = str.replace(reg, res => {
    return res[1].toUpperCase()
})

原子表

// 正则中[]代表原子表，原子表内的内容会被视为可选内容
let str = "ychizzz"
let reg = /[ciz]/g
str.match(reg) // ["c", "i", "z", "z", "z"]

/*
   区间匹配规则：
   [abc]：查找方括号内任意一个字符。
   [0-9]：查找从 0 至 9 范围内的数字，即查找数字。
   [a-z]：查找从小写 a 到小写 z 范围内的字符，即查找小写字母。
   [A-Z]：查找从大写 A 到大写 Z 范围内的字符，即查找大写字母。
   [A-z]：查找从大写 A 到小写 z 范围内的字符，即所有大小写的字母。
   
   排除匹配规则：
   [^abc]：查找不在方括号内的字符。
   
   注意：原子表中的字符会被当成普通字符串解析，元字符则不会
*/

日期格式检测

// 满足xxxx-xx-xx或者xxxx/xx/xx的都符合日期格式要求
let date1 = "2021/04/01"
let date2 = "2021-04-01"
let reg = /^\d{4}([-/])\d{2}\1\d{2}$/
console.log(reg.test(date1)); // true
console.log(reg.test(date2)); // true

匹配所有内容

let str = "20212222fafa,.,/;']["
let reg = /[\S\s]+/g
console.log(str.match(reg)); // [ "20212222fafa,.,/;'][" ]

原子组

// 正则中()表示原子组，里面的内容视为一个整体。原子组的编号按照\1 \2 \3...规则类推
let dom = `<div>123</div>`
// 匹配一个div标签和标签内的所有内容
let reg = /<(div)>[\s\S]*<\/\1>/gi
console.log(dom.match(reg)); // ["<div>123</div>"]

替换内容1

// 把下面的h1,h2标签替换成p标签
let dom = `
    <h1>ychizzz</h1>
    <span>chizzz</span>
    <h2>YCHIZZZ</h2>
    `
let reg = /<(h[1-6])>([\s\S]+)<\/\1>/ig
// 此处的args从第1项开始代表了每个组，因为正则里表示内容的组([\s\S])是第二个，因此取args[2]
dom.replace(reg, (...args) => `<p>args[2]</p>`)

替换内容2

// 对下面三个链接进行替换，把不是https的替换成https，没有www的添加www
let a1 = "http://www.baidu.com"
let a2 = "http://www.taobao.com"
let a3 = "https://jd.com"
let arr = [a1, a2, a3]
let reg = /(https?)(:\/\/)(www.)?(.*)/ig

let res = arr.map(item => {
    return item.replace(reg, (...args) => {
        args[1] = args[1] === "http" ? "https" : args[1]
        args[3] = args[3] || "www."
        return args.splice(1,4).join("")
    })
})

console.log(res) // ["https://www.baidu.com", "https://www.taobao.com", "https://www.jd.com"]

断言匹配

// 断言简单来说就是根据条件筛选出特点的符合条件的内容
let str = "吃饭快乐，吃饭健康，吃饭幸福"
// 取出健康前面的吃饭
let reg = /吃饭(?=健康)/g

/*
   常用的断言匹配：
   ?= /条件(?=内容)/ 匹配出后面具有某内容的条件
   ?<= /(?<=内容)条件/ 匹配出前面具有某内容的条件
   ?! /条件(?!内容)/ 匹配出后面不具有某内容的条件
   ?<! /(?<!内容)条件/ 匹配出前面不具有某内容的条件
*/

模糊电话号码后四位

let tel = "12345678901"
// 此处表示匹配前面具有7位数字的多个数字
let reg = /(?<=\d{7})\d+/g // 8901

let res = tel.replace(reg, v => "****")
console.log(res) // 1234567****