关于javascript:正则手记方法篇

办法篇，JavaScript 中都有哪些操作正则的办法。

RegExp 对象办法

regexp.test(str)

办法 regexp.test(str) 查找匹配项，而后返回 true/false 示意是否存在。

let str = "I love JavaScript";

// 这两个测试雷同
console.log(/love/i.test(str)); // true
console.log(str.search(/love/i) != -1); // true

regexp.exec(str)

regexp.exec(str) 办法返回字符串 str 中的 regexp 匹配项, 可指定从地位进行搜寻。

基于否具备修饰符 g 其有两种搜寻模式。

(1) 没有修饰符 g，则 regexp.exec(str) 会返回与 第一个匹配项，就像 str.match(regexp) 那样。这种行为并没有带来任何新的货色。

let str = "More about JavaScript at https://javascript.info";
let regexp = /javascript/i;
console.log(regexp.exec(str));
/* [
0 : "JavaScript"
groups:undefined
index: 11
input :"More about JavaScript at https://javascript.info"
] */

(2) 有修饰符 g，能够基于 regexp.lastIndex 地位循环搜寻全副。

具体步骤：

• 调用 regexp.exec(str) 会返回第一个匹配项，并将紧随其后的地位保留在属性 regexp.lastIndex 中。
• 下一次这样的调用会从地位 regexp.lastIndex 开始搜寻，返回下一个匹配项，并将其后的地位保留在 regexp.lastIndex 中。
  ……以此类推。
• 如果没有匹配项，则 regexp.exec 返回 null，并将 regexp.lastIndex 重置为 0。
• 因而，反复调用会一个接一个地返回所有匹配项，应用属性 regexp.lastIndex 来跟踪以后搜寻地位。

过来，在将 str.matchAll 办法增加到 JavaScript 之前，会在循环中调用 regexp.exec 来获取组的所有匹配项：

let str = "More about JavaScript at https://javascript.info";
let regexp = /javascript/gi;

let result;

while ((result = regexp.exec(str))) {console.log(`Found ${result[0]} at position ${result.index}`);
  // 在地位 11 找到了 JavaScript，而后
  // 在地位 33 找到了 javascript
}

这当初也无效，只管对于较新的浏览器 str.matchAll 通常更不便。

指定地位搜寻

咱们能够通过手动设置 lastIndex，用 regexp.exec 从给定地位进行搜寻。

例如：

let str = "Hello, world!";

let regexp = /\w+/g; // 没有修饰符 "g"，lastIndex 属性会被疏忽
regexp.lastIndex = 5; // 从第 5 个地位搜寻（从逗号开始）console.log(regexp.exec(str)); // world

如果正则表达式带有修饰符 y，则搜寻将准确地在 regexp.lastIndex 地位执行，不会再进一步。

让咱们将下面示例中的 g 修饰符替换为 y。当初没有找到匹配项，因为在地位 5 处没有单词：

let str = "Hello, world!";

let regexp = /\w+/y;
regexp.lastIndex = 5; // 在地位 5 准确查找

console.log(regexp.exec(str)); // null

当咱们须要通过正则表达式在确切地位而不是其后的某处从字符串中“读取”某些内容时，这很不便。

String 对象的办法

str.match(regexp)

str.match(regexp) 办法在字符串 str 中查找 regexp 的匹配项。搜寻胜利就返回内容，格局为数组，失败就返回 null。

它有三种模式：

1. 非全局匹配，不带 g，返回第一个匹配项，其中包含捕捉组和属性 index

let str = "2022/10/24";
let result = str.match(/(\d{4})\/(\d{2})\/(\d{2})/);

// 第一份是齐全匹配的
console.log(result[0]); // 2022/10/24（齐全匹配）// 捕捉组的后果从第二项开始展现，如果没有捕捉内容则显示 undefined
console.log(result[1]); // "2022"（第一个分组）console.log(result[2]); // "10"（第一个分组）console.log(result[3]); // "24"（第一个分组）console.log(result.length); // 4

// 其余属性：console.log(result.index); // 0（匹配地位）console.log(result.input); // '2022/10/24'（源字符串）// groups 属性它存储的不是捕捉组的信息，而是捕捉命名的信息（自定义捕捉组名时失效）。console.log(result.groups); // undefined

// 非捕捉组不会捕捉
console.log("2022/10/24".match(/(?:\d{4})\/(\d{2})\/(\d{2})/)); // ['2022/10/24', '10', '24', index: 0, input: '2022/10/24', groups: undefined]

2. 全局匹配 带有 g，则它将返回一个蕴含所有匹配项的数组，但不蕴含捕捉组和其它详细信息

"2022/10/24".match(/(?:\d{4})\/(\d{2})\/(\d{2})/g); // ['2022/10/24']

"2022/10/24".match(/(\d{4})\/(\d{2})\/(\d{2})/g); // ['2022/10/24']

3. 没有匹配项, 则无论是否带有修饰符 g，都将返回 null。

"2022/10/24".match(/(\d{6})/); // null
let result = "2022/10/24".match(/(\d{6})/) || []; // 心愿后果是数组
console.log(result); // []

str.matchAll(regexp)

留神：这是一个最近增加到 JavaScript 的个性。新式浏览器可能须要 polyfills.

办法 str.matchAll(regexp) 是 str.match 的“更新、改良”的变体。

它次要用来搜寻所有组的所有匹配项。

与 match 相比有 3 个区别：

1. 它返回一个蕴含匹配项的可迭代对象，而不是数组。咱们能够用 Array.from 将其转换为一个惯例数组。
2. 每个匹配项均以一个蕴含捕捉组的数组模式返回（返回格局与不带修饰符 g 的 str.match 雷同）。
3. 如果没有后果，则返回的是一个空的可迭代对象而不是 null。

let matchAll = "2022/10/24".matchAll(/(\d{4})\/(\d{2})\/(\d{2})/g);

console.log(matchAll); // [object RegExp String Iterator]，不是数组，而是一个可迭代对象

matchAll = Array.from(matchAll); // 当初是数组了 // [0: ['2022/10/24', '2022', '10', '24', index: 0, input: '2022/10/24', groups: undefined]]

let firstMatch = matchAll[0];

console.log(firstMatch[0]); // '2022/10/24'
console.log(firstMatch[1]); // 2022
console.log(firstMatch[2]); // 10
console.log(firstMatch[3]); // 24
console.log(firstMatch.index); // 0
console.log(firstMatch.input); // 2022/10/24

如果咱们用 for..of 来遍历 matchAll 的匹配项，那么咱们就不须要 Array.from 了。

str.split(regexp|substr, limit)

应用正则表达式（或子字符串）作为分隔符来宰割字符串。

咱们能够用 split 来宰割字符串，像这样：

const [y, m, d] = "2022/10/24".split("/");
console.log([m, d, y].join("/")); // 10/24/2022

但同样，咱们也能够用正则表达式：

console.log("2022, 10, 24".split(/,\s*/)); // ['2022', '10', '24']

另外，因为 split 办法中的正则是用来匹配分隔符，所以全局匹配没有意义。

str.search(regexp)

办法 str.search(regexp) 返回第一个匹配项的地位索引，如果没找到，则返回 -1：

let str = "A drop of ink may make a million think";

console.log(str.search(/ink/i)); // 10（第一个匹配地位）

重要限度：search 仅查找第一个匹配项 。

如果咱们须要其余匹配项的地位，则应应用其余办法，例如用 str.matchAll(regexp) 查找所有地位。

str.replace(str|regexp, str|func)

这是用于搜寻和替换的通用办法，是最有用的办法之一。它是搜寻和替换字符串的瑞士军刀。

咱们能够在不应用正则表达式的状况下应用它来搜寻和替换子字符串。

当 replace 的第一个参数是字符串时，它只替换第一个匹配项。

在上面的示例中看到：只有第一个 “/” 被替换为了 “-“。

// 用 - 替换 / 字符
console.log("2022/10/24".replace("/", "-")); // 2022-10/24
// 相似于非全局模式的正则匹配
console.log("2022/10/24".replace(/\//, "-")); // 2022-10/24

如要找到所有的连字符，咱们不应该用字符串 “/”，而应应用带 g 修饰符的正则表达式 /\//g：

// 将所有用 - 替换 / 字符
console.log("2022/10/24".replace(/\//g, "-")); // 2022-10-24

第二个参数是替换字符串。咱们能够在其中应用特殊字符，在理论替换时 replace 外部逻辑会主动解析字符串，提取出变量。

例如：

$& 代表匹配后果。

console.log("2022/10/24".replace(/(\d{4}\/\d{2}\/\d{2})/g, "明天是 $&") // 明天是 2022/10/24
);

$` 代表匹配后果右边的文本。

console.log("明天是 2022/10/24".replace(/(\d{4}\/\d{2}\/\d{2})/g, "$`") // 明天是明天是
);

$n 代表按序号 n 获取对应捕捉组的文本。

// 替换字符串
console.log("2022/10/24".replace(/(\d{4})\/(\d{2})\/(\d{2})/g, "$2/$3/$1") // 10/24/2022
);

// 命名捕捉组
console.log(
  "2022/10/24".replace(/(?<year>\d{4})\/(?<month>\d{2})\/(?<day>\d{2})/g,
    "$<month>/$<day>/$<year>"
  )
); // 10/24/2022

$<name> 代表按 name 为捕捉组命名：

// 命名捕捉组
console.log(
  "2022/10/24".replace(/(?<year>\d{4})\/(?<month>\d{2})\/(?<day>\d{2})/g,
    "$<month>/$<day>/$<year>"
  )
); // 10/24/2022

对于须要“智能”替换的场景，第二个参数能够是一个函数。

每次匹配都会调用这个函数，并且返回的值将作为替换字符串插入。

该函数 func(match, p1, p2, ..., pn, offset, input, groups) 带参数调用：

1. match —— 匹配项，
2. p1, p2, …, pn —— 捕捉组的内容（如有），
3. offset —— 匹配项的地位，
4. input —— 源字符串，
5. groups —— 具备命名的捕捉组的对象。

如果正则表达式中没有括号，则只有 3 个参数：func(str, offset, input)。

let result = "2022/10/24".replace(/(\d{4})\/(\d{2})\/(\d{2})/g,
  (_, y, m, d) => {return [m, d, y].join("/");
  }
);
console.log(result); // 10/24/2022

如果有许多组，用 rest 参数（…）能够很不便的拜访：

let result = "2022/10/24".replace(/(\d{4})\/(\d{2})\/(\d{2})/g, (...match) => {return `${match[2]}/${match[3]}/${match[1]}`;
});
console.log(result); // 10/24/2022

或者，如果咱们应用的是命名组，则带有它们的 groups 对象始终是最初一个对象，所以咱们能够像这样获取它：

let result = "2022/10/24".replace(/(?<year>\d{4})\/(?<month>\d{2})\/(?<day>\d{2})/g,
  (...match) => {let groups = match.pop();
    return `${groups.month}/${groups.day}/${groups.year}`;
  }
);

console.log(result); // 10/24/2022

str.replaceAll(str|regexp, str|func)

这个办法与 str.replace 实质上是一样的，但有两个次要的区别：

如果第一个参数是一个字符串，它会替换 所有呈现的 和第一个参数雷同的字符串 ​，​ 而 replace 只会替换 第一个。
如果第一个参数是一个没有修饰符 g 的正则表达式，则会报错。带有修饰符 g，它的工作形式与 replace 雷同。
replaceAll 的主要用途是替换所有呈现的字符串。

像这样：

// 应用冒号替换所有破折号
console.log("2022/10/24".replaceAll("/", "-")); // 2022-10-24

RegExp.$1-$9

非标准: 该个性是非规范的，请尽量不要在生产环境中应用它！

非标准 $1, $2, $3, $4, $5, $6, $7, $8, $9 属性是蕴含括号子串匹配的正则表达式的动态和只读属性。

在脚本中应用如 replace、test、match 等办法，如果正则中含有捕捉组，拜访 RegExp 对象的非标准属性 $1 和 $2 能提取捕捉组外面的内容。

let str = "I love JavaScript";

console.log(/(love)/i.test(str));

// RegExp.$1 love

参考链接

• https://zh.javascript.info/re…
• https://github.com/veedrin/ho… “ 马蹄铁 ” 专题学习打算
• https://developer.mozilla.org…