正则表达式踩坑

Posted 2021-09-03 前端熟练工

1、正则表达式 只要加了 /g 属性，在执行 RegExp 的 api 时，都需要注意 reg.lastIndex 属性值的变化

RegExp.exec(string)

一个指定字符串中执行一个搜索匹配

exec(string): array || null

参数

string

返回值

• 匹配成功

  • 返回一个数组，此数组的第 0 个元素是与正则表达式相匹配的文本，第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本（如果有的话），第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本（如果有的话），以此类推；
  • 除了数组元素和 length 属性之外，exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string；
  • RegExp 没有设置了 global 或 sticky 标志位时，reg.lastIndex 为 0；
  • RegExp 设置了 global 或 sticky 标志位时，reg.lastIndex 指向下次开始的位置，意味着可以反复调用 exec 方法来遍历字符串中的所有匹配文本；当 exec() 再也找不到匹配的文本时，它将返回 null，并把 lastIndex 属性重置为 0
• 匹配失败
  返回 null

注意事项

• RegExp 对象在设置了 设置了 global 或 sticky 标志位之后，RegExp 对象会有状态（会将上次匹配成功之后的位置记录在 lastIndex 属性中）；
• RegExp 对象在设置了 设置了 global 或 sticky 标志位之后，如果在一个字符串中完成了一次模式匹配之后要开始检索新的字符串，就必须手动地把 lastIndex 属性重置为 0。

demo

const regex1 = RegExp("foo*", "g");
const str1 = "table football, foosball";
let array1;

while ((array1 = regex1.exec(str1)) !== null) {
  console.log(`Found ${array1[0]}. Next starts at ${regex1.lastIndex}.`);
  // expected output: "Found foo. Next starts at 9."
  // expected output: "Found foo. Next starts at 19."
}

参考

w3c exec
MDN exec

RegExp.test(string)

用来查看正则表达式与指定的字符串是否匹配

test(string): bool

参数

string

返回值

bool，匹配成功 true；失败 false；

注意事项

• RegExp 对象在设置了 设置了 global 或 sticky 标志位之后，RegExp 对象会有状态（会将上次匹配成功之后的位置记录在 lastIndex 属性中）；
• RegExp 对象在设置了 设置了 global 或 sticky 标志位之后，如果在一个字符串中完成了一次模式匹配之后要开始检索新的字符串，就必须手动地把 lastIndex 属性重置为 0。
• 只要部分匹配就会返回 ture，需要添加 ^ $

参考

MDN test

前后加 ^ $

RegExp.exec(string) 与 RegExp.test(string) 注意事项

当设置了全局标志的 RegExp 对象使用时，一定要注意 lastIndex 的值变化；注意根据需要，修改 lastIndex（比如同一个正则，匹配 A 字符串之后，再去匹配 B 字符串）

string.match(RegExp)

检索返回一个字符串匹配正则表达式的结果

string.match(RegExp):array || null

参数

RegExp

返回值

• 匹配成功

  • 数组，RegExp 带有g全局标志，返回所有匹配项
  • 数组，RegExp 不带有g全局标志，返回第一个匹配项
• 匹配事变
  null

string.match(RegExp) 与 RegExp.exec(string)

如果正则表达式不包含 g 标志，str.match() 将返回与 RegExp.exec(). 相同的结果。