RegExp -- 常见四种正则方法

Posted 2021-12-15 zjh-study

一、正则表达式

1、match()方法

调用

let str = "梦的翅膀受伤了!"
let res = str.match('翅膀')

match() 方法可在字符串内检索指定的值，这个校验方法有点类似于数组/字符串的indexOf()和lastIndexOf()方法，只不过这两个方法返回的是指定值首次出现的下标索引，而match()返回两种结果：

1.正常的校验指定字符，返回的则是一个不知道是数组，还是对象的字符数据，通过索引0可以获取返回的指定校验字符，但是可以通过.key的方式获取指定校验字符首次出现的下标索引和数据校验来源的原字符串

let str = "梦的翅膀受伤了!"
let res = str.match('翅膀')
console.log(res)

// 打印结果
["翅膀", index: 2, input: "梦的翅膀受伤了!", groups: undefined]

// 匹配结果获取
console.log(res[0])  // 翅膀

// 获取index
console.log(res[1]) // 报错
console.log(res.index)  // 2

// 获取匹配数据来源
console.log(res.input)  // 梦的翅膀受伤了!

Tips

通过字符串检索查找，只会返回第一次查找到要查找元素

2.如果是通过正则方式校验，如果没有使用g修饰符，则跟字符串检索没有多大区别，如果使用了g修饰符，则返回的是字符串中出现的指定字符的所有值得数组集合，不会再有index和input等属性，纯粹是一个匹配结果值得数组集合

let str = "梦的翅膀受伤了!飞翔的翅膀"
let res = str.match(/翅膀/g)
console.log(res)

// 打印结果
["翅膀", "翅膀"]

Tips 这个方法返回得是要校验的字符的字符数组集合，如果没有匹配，则返回null

2、replace()方法

这个方法是用来匹配字符串里面指定要查找的字符串，并将匹配到的字符串替换成指定的字符串

这个方法有两个参数，第一个参数可以是正则表达式，也可以是字符串，第二个参数就是匹配后替换的数据，或者生成替换文本的函数

let str = "梦的翅膀受伤了!飞翔的翅膀"
let res = str.replace('翅膀', '鸟儿')
console.log(res)

// 打印结果
梦的鸟儿受伤了!飞翔的翅膀

正则

使用正则的时候，记得加上g修饰符，否则只会替换第一个

let str = "梦的翅膀受伤了!飞翔的翅膀"
let res = str.replace(/翅膀/, '鸟儿')
console.log(res)

// 打印结果
梦的鸟儿受伤了!飞翔的翅膀

let str = "梦的翅膀受伤了!飞翔的翅膀"
let res = str.replace(/翅膀/g, '鸟儿')
console.log(res)

// 打印结果
梦的鸟儿受伤了!飞翔的鸟儿

参数二为函数

如果参数二是函数而不是字符串，在这种情况下，每个匹配都调用该函数，它返回的字符串将作为替换文本使用。该函数的第一个参数是匹配模式的字符串。接下来的参数是与模式中的子表达式匹配的字符串，可以有 0 个或多个这样的参数。接下来的参数是一个整数，声明了匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 本身

官网意思是有四个参数，第一个参数是匹配的字符串，第二个是子正则表达式匹配的字符串，第三个匹配的字符串的索引，第四个就是原字符串

let str = "梦的翅膀受伤了!飞翔的翅膀"
let res = str.replace(/翅膀/, function (current, index, input, strs) 
  console.log(current+ '-' +nextStr+ '-' +index+ '-' +strs)
  return '鸟儿'
)
console.log(res)

// 打印结果
翅膀-2-梦的翅膀受伤了!飞翔的翅膀-undefined
梦的鸟儿受伤了!飞翔的翅膀

let hml = '<div><img src="http://www.baidu.com/images/1.png" /></div>'
let res = hml.replace(/<img[^>]* src\s*?=\s*?['"]([^'"]+)[^>]*>/gi, function (current, nextStr, index, strs) 
  console.log(current+ '-' +nextStr+ '-' +index+ '-' +strs)
  return '鸟儿'
)
console.log(res)

// 打印结果
<img src="http://www.baidu.com/images/1.png" />-http://www.baidu.com/images/1.png-5-<div><img src="http://www.baidu.com/images/1.png" /></div>
<div>鸟儿</div>

3、exec()方法

用来校验传入的字符串中指定的匹配，返回一个数组，存放匹配的结果，如果没有匹配到，则返回null

返回数组的第零项元素是正则匹配到的值，第一项元素是正则表达式中第一个子表达式匹配的值，第二项元素是正则表达式中第二个兹表示匹配的值，以此类推，还会额外返回index和input属性

let str = 'abcdefgabcdefg'
let reg = /b/
let res = reg.exec(str)
console.log(res)

// 打印结果
['b', index: 1, input: "abcdefgabcdefg"]

如果是全局匹配，则可以通过循环语句，重复调用exec方法

let str = 'abcdefgabcdefg'
let reg = /b/g
let newRes
while ((newRes = reg.exec(str)) !== null) 
  console.log(newRes)


// 打印结果
["b", index: 1, input: "abcdefgabcdefg", groups: undefined]
["b", index: 8, input: "abcdefgabcdefg", groups: undefined]

4、test()方法

用于检测一个字符串是否匹配指定内容，如果匹配则返回true，不匹配则返回false

let str = 'abcdefgabcdefg'
let reg = /b/g
let bl = reg.test(str)
console.log(bl)

// 打印结果
true