RegExp -- 常見四種正則方法

一、正則表達式

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