Chaoszhu'Blog

Appearance

js常用字符串正则API ​

字符串API(5个) ​

可以传入正则使用

replace ​

js
// $x为捕获组的引用
var result = "2,3,5".replace(/(\d+),(\d+),(\d+)/, "$3=$1+$2")
console.log(result) // => "5=2+3

// 第二个参数为函数时
"1234 2345 3456".replace(/(\d)\d{2}(\d)/g, (match, $1, $2, index, input) =>  {
  console.log([match, $1, $2, index, input]) // 匹配到的字符 --> 分组捕获引用$1-$9 --> 下标 --> 原始字符串
  // => ["1234", "1", "4", 0, "1234 2345 3456"]
  // => ["2345", "2", "5", 5, "1234 2345 3456"]
  // => ["3456", "3", "6", 10, "1234 2345 3456"]
})

match 和 matchAll ​

match

  • 有g修饰符时，返回一个匹配到的字符串组成的数组
  • 没有g修饰符时，返回一个数组，内容依次是: 捕获到字符串 --> 捕获组($1-$9) --> 下标 --> 原始字符串
js
// 带g修饰符
var string = "2017-06-27 2017.06.27 2017/06/27"
var regex = /\d{4}(-|\.|\/)\d{2}\1\d{2}/g
console.log( string.match(regex) ) // => ["2017-06-27", "2017.06.27", "2017/06/27

// 不带g修饰符
var string = "2017-06-27 2017.06.27 2017/06/27"
var regex = /\d{4}(-|\.|\/)\d{2}\1\d{2}/
console.log( string.match(regex) )
// ['2017-06-27', '-', index: 0, input: '2017-06-27 2017.06.27 2017/06/27']

matchAll

  • ES10的api；返回值为一个迭代器，要想查看其结果需要遍历迭代器【传入的正则必须带有g修饰符, 否则报错】
js
// 带g修饰符
var string = "2017-06-27 2017.06.27 2017/06/27"
var reg = /\d{4}(-|\.|\/)\d{2}\1\d{2}/g
for(let [str, group1] of string.matchAll(reg)) {
  console.log(str, group1)
}
// 2017-06-27 -
// 2017.06.27 .
// 2017/06/27 /

// 不带g修饰符
'str'.matchAll(/str/)
// VM1866:1 Uncaught TypeError: String.prototype.matchAll called with a non-global RegExp argument

split ​

第一个参数为string或者regexp，第二个参数限制返回数组的最大长度

js
'asdf-asfd-asdf'.split(/\-a/)
// [ 'asdf', 'sfd', 'sdf' ]
'asdf-asfd-asdf'.split(/\-a/, 2)
// ['asdf', 'sfd'] // 'sdf'被第二个参数限制了
js
'asdf-asfd-asdf'.search(/\-a/) // 查询字符串下标，可传正则
// return 4

正则API(2个) ​

test ​

参数: 传入字符串

js
let reg = /a/
reg.test("a") // true
reg.test("a") // true

exec(与match返回值的区别) ​

  • 两者不存在g修饰符时返回值一致

exec 使用g修饰符后，能接着上一次匹配位置后继续匹配(需要在循环中做到)，返回值还是很详细

match 使用g修饰符后，就没有关键的信息index，只保留匹配到string组成的数组

js
var string = "2017.06.27"
var regex2 = /\b(\d+)\b/g
console.log( regex2.exec(string), regex2.lastIndex )
console.log( regex2.exec(string), regex2.lastIndex )
console.log( regex2.exec(string), regex2.lastIndex )
console.log( regex2.exec(string), regex2.lastIndex )
// => ["2017", "2017", index: 0, input: "2017.06.27"] 4
// => ["06", "06", index: 5, input: "2017.06.27"] 7
// => ["27", "27", index: 8, input: "2017.06.27"] 10
// => null 0

// 循环
var string = "2017.06.27"
var regex2 = /\b(\d+)\b/g
var result;
while ( result = regex2.exec(string) ) {
  console.log( result, regex2.lastIndex )
}
// => ["2017", "2017", index: 0, input: "2017.06.27"] 4
// => ["06", "06", index: 5, input: "2017.06.27"] 7
// => ["27", "27", index: 8, input: "2017.06.27"]

修饰符g对test&exec下次匹配的影响 ​

当存在g修饰符时：这俩api会记录每次匹配的位置到reg.lastIndex中，下次匹配从lastIndex开始

test测试 ​

js
let reg = /a/g // 存在g修饰符
console.log(reg.test("a"), reg.lastIndex) // true 1
console.log(reg.test("a"), reg.lastIndex) // false 0 【匹配失败，lastIndex重置为0】
console.log(reg.test("a"), reg.lastIndex) // true 1 【再次匹配成功】

exec测试 ​

js
let reg = /a/g // 存在g修饰符
console.log(reg.exec("abc"), reg.lastIndex)
// ['a', index: 0, input: 'abc', groups: undefined] 1

console.log(reg.exec("abcd"), reg.lastIndex) // 换字符并不会影响reg的lastIndex
// null 0 【lastIndex重置为0】