正则表达式，我虽时常冷落你，但我未敢忘却你~

_光光
197 阅读6分钟

正则表达式是一种文本模式，通过特殊的字符组合成一个规则。通过它可以匹配、截取、替换符合这个规则的字符串。

声明正则表达式

正则表达式声明方式为两种：

字面量

// 一般采用这种方式
const reg = /0/

构造函数

// 如果需要动态生成正则，就采用这哥方式
const reg = new RegExp('0')

字符串匹配

RegExp.prototype.test

// 包含 '0' 
const reg = /0/;

console.log(reg.test('aa'));   // false
console.log(reg.test('a0'));   // true

// 包含 'abc'
const reg1 = /abc/

console.log(reg1.test('aabbcc'))  // false
console.log(reg1.test('aabcc'))   // true

元字符和限定符

正则中的特殊字符分为 元字符、限定符，通过这些特殊字符来表示出复杂匹配规则和含义。

字符类

字符作用
x | y匹配 x 或 y 任意字符
[][ ] 整体用来匹配一位字符，[ ]内部代表当前位置的多种情况
()()内部代表一个整体，他在操作多个字符时非常常用
// | 示例
// 匹配字符串中包含 'abc' 或 'ac'
const reg = /abc|ac/

reg.test('aabbcc')      // false
reg.test('abd')         // false
reg.test('abcd')        // true
reg.test('acd')         // true
reg.test('a')           // false

// [] 示例
// 匹配字符串中包含 'a' 或 'b' 或 'c'
const reg = /[abc]/

reg.test('aabbcc')      // true
reg.test('cba')         // false

// () 示例
// 匹配字符串中包含 'abc'
const reg = /(abc)/

reg.test('aabbcc')      // false
reg.test('bacbabc')     // true

反向类

字符作用
^将^书写在 [ ] 内开始位置，代表反向类；他表示 内部字符以外的其他字符 可以匹配成功
const reg = /[^abc]/

reg.test('abc')       // false
reg.test('ac')        // false
reg.test('b')         // false
reg.test('ad')        // false
reg.test('dd')        // true

范围类

字符作用常见形式
[字符-字符]形式为[ 字符-字符 ]，用来表示这个位置字符可匹配的范围[0-9]
[a-z]
[A-Z]
const reg = [0-3]   // 等同于 [0123]

reg.test('2a')      // true

组合类

作用常见形式
[]内可书写多个范围组合形式[0-9a-zA-Z]
[0-3a-c]
const reg = [0-3b-g] // 等同于 [0123bcdefg]

预定义类

预定义类是正则内置的一些匹配规则

字符作用备注
\转义字符，它主要有两个功能：
1、让普通字符具有特殊功能
2、去除特殊字符的功能，让其变为普通字符
\d匹配数字字符
\D匹配非数字字符（了解）
\w匹配单词字符包含：
1、数字
2、_（下划线）
3、大小写英文字母字符
\i匹配英文字母字符（不区分大小写）
\W匹配非单词字符除大小写英文字符、数字、_（下划线）以外的字符
\s匹配所有空白字符，换行、空格、制表符等不可见的空白符
\S匹配可见字符（了解）
.匹配除换行符（\n、\r）以外的任何单个字符（了解）如果要匹配.本身,需要通过转义符对.进行转义（\.）

边界词

字符使用方式作用备注
^在正则表达式开始位置书写^代表字符串开始位置，必须以指定内容开始，才能匹配成功
$在正则表达式结束位置书写$代表字符串结束位置，必须以指定内容结束，才能匹配成功
同时使用^和$在正则开始位置书写^,在正则结束位置书写$代表着严格匹配，字符串中除了含有匹配成功部分之外，不能含有其他内容
// ^ 示例
// 以0-3开头且第二位为4
const reg = /^[0-3]4/

reg.test('3')    // false
reg.test('345')  // true

// $ 示例
// 以倒数第二位为0-3，最后一位为4结尾
const reg = /[0-3]4$/

reg.test('3')    // false
reg.test('345')  // false
reg.test('334')  // true

// ^ + $  示例
// 进行严格匹配，一共三位字符，第一位字符为0-3，第二位字符为4，最后一位字符为a-c
const reg = /^[0-3]4[a-c]$/

量词

自定义量词

字符功能备注
{n}前面的字符需要连续出现n次/a{2}/：a字符需要连续出现两次
{n,m}前面的字符连续出现次数需要在某个范围内/a{2,5}/：a字符连续出现次数在2-5之间
{n,}前面的字符连续出现次数至少n次/a{2,}/：a字符至少连续出现2次
// 1需要连续出现三次  
const reg = /01{3}/

reg.test('011011010100')   // false
reg.test('010101011')      // false
reg.test('010111')         // true

// 01需要连续出现三次
// ()的内容会作为一个整体
const reg = /(01){3}/

reg.test('010100011')      // false
reg.test('010110111')      // false
reg.test('11010101')       // true

// 01需要连续出现3-4次
const reg = /(01){3,4}/

reg.test('0101')           // false
reg.test('010101')         // true
reg.test('0101010101')     // true

预定义量词

字符功能备注
+前面字符至少出现一次
*前面字符至少出现0次等于字符可有可无，适用于可选的内容部分
?代表前面字符出现0次或1次

字符串替换

语法参数备注
String.prototype.replace(RegExp,String)RegExp：匹配规则的正则表达式
String：字符串，替换的内容
String.prototype.replace(RegExp,replaceHandler)RegExp：匹配规则的正则表达式
replaceHandler：函数，用来处理替换的内容		replaceHandler会接收一个参数，这个参数为匹配成功的内容，replaceHandler的返回值来作为替换的内容
//  字符串替换 默认只会替换第一个符合规则的字符，如果需要替换所有符合规则的字符串，可以添加匹配模式

// String.prototype.replace(RegExp,String) 
const colors = '红绿绿绿蓝红绿红红'
const replacedColors = colors.replace(/绿/,'白')
console.log('colors',replacedColors)        // colors 红白绿绿蓝红绿红红

// String.prototype.replace(RegExp,function (matchedString) {})
// 如果第二个参数为函数，则这个函数的参数为匹配成功的内容，并且函数的返回值会替换这个部分

const colors = '红绿绿绿蓝红绿红红'
const replacedColors = colors.replace(/绿|蓝/g,function (matchedString) {
    console.log('matchedString',matchedString)
    if(matchedString === '绿' ) return '白'
    if(matchedString === '蓝' ) return '黑' 
})

console.log('replacedColors',replacedColors)      // replacedColors 红白白白黑红白红红

匹配模式

字符作用备注
g全局匹配，找到所有符合规则的内容
i忽略大小写，找到所有符合规则的字母无论大小写
const data = 'a1b2C3Cc4'  

// 单个匹配模式
data.replace(/\d/g,'-')

// 多个匹配模式  
data.replace(/\d/gi,'-')

// 通过构造函数  
const Reg = new RegExp('\d','gi')
data.replace(Reg,'-')

字符串提取

String.prototype.match(reg)

  • 参数
    reg：正则表达式，用来检索匹配字符串

  • 返回值
    found：数组，包含正则检索结果。如果正则开启全局匹配则可以获取所有提取结果，如果未开启全局匹配就会返回捕获组，捕获组会包含成员属性index、groups、input。

    • index：被提取出的字符
    • groups：捕获组数组或undefined
    • input：被匹配的原字符串
// 未开启全局匹配  
const str = 'a1b2c3d4e5f6g7h8i9'
const found = str.match(/\d/)
console.log('found',found);

image.png

// 开启全局匹配  
const str = 'a1b2c3d4e5f6g7h8i9'
const found = str.match(/\d/g)
console.log('found',found);

Snipaste_2022-04-24_22-06-59.png

RegExp.prototype.exec(string)

  • 参数
    string：字符串，待匹配的字符串

  • 返回值
    result：数组或null，方匹配成功时返回数组，否则返回null

正则每次匹配成功时，就会将匹配成功的位置记录在lastIndex属性中。当正则和被匹配字符串不变的情况下，每次调用exec匹配成功就会更新lastIndex，为下次匹配做准备。这样我们可以遍历每次匹配结果

const reg = /\d/g
const str = 'a1b2c3d4e5f6g7h8i9'
let result  
while((result = reg.exec(str))!==null) {
  console.log('result',result);
}

image.png

avatar
文章
阅读
粉丝