JS宏进阶：正则表达式的使用

正则表达式，对于任何一门编程语言来说，都是一种非常强大的工具，主要用于搜索、编辑或操作文本和数据。因此，在JS中，也存在相应的对象new RegExp( )，在本章中，将详细介绍正则表达式在JS宏中的运用。

一、正则表达式的创建

在基础篇章中，曾提及正则表达式对象，在JS中有两种创建方法，示例如下：

// 字面量语法

const regex1 = /abc/;

// RegExp 构造函数

const regex2 = new RegExp('abc');

此外，在js中创建正则表达式时，还存在响应的修饰符。如下所示：

因此，在JS中，正则表达式的完整创建语法为：

字面量创建语法：let reg = /正则匹配模式/修饰符号，示例如下

const regexp = /[0-9]+/g  //全局搜索

构造函数创建语法：let reg = new RegExp("正则匹配模式", "修饰符")，示例如下

let reg = new RegExp("[0-9]+", "g") //全局搜索

注意：对于两种创建方法来说，修饰符都是可选的。另外，如果使用new RegExp构造函数来创建正则表达式对象，要匹配 \ 本身，要写成：\\\\，这是因为，他的参数是字符串，在字符串中 \ 是需要转义的，所以，前面两个 \\ 相当于正则表达式中的元字符 \ ， 后面的两个 \\ 相当于被元字符 \ 转义的 \ ，连在一起就表示匹配 \ 本身。依次类推：元字符 \d ，需写成 \\d ; \w ，需写成 \\w 等。

二、正则表达式对象中的方法

1、test方法

用于测试一个字符串是否匹配某个模式，返回布尔值。

const regex = new RegExp("hello");
console.log(regex.test("hello world")); // true
console.log(regex.test("world")); // false

上述示例中，用于测试的字符串"hello world"中符合正则匹配模式：hello，返回true。不符合的，就返回false。

2、exec方法

用于在字符串中执行搜索匹配。匹配成功返回一个数组，否则返回 null 。返回的数组包含匹配的结果以及捕获组（如果有的话）。

const regex = new RegExp("(hello) (world)");
const result = regex.exec("hello world");
if (result) {
  console.log(result[0]); // "hello world"
  console.log(result[1]); // "hello"
  console.log(result[2]); // "world"
}

另外，返回的数组包含一些额外的属性，如下图所示：

三、字符串对象String中的正则表达式

在基础篇章中，我们已经了解了字符串对象中的一些常用方法。比如，用于查找某一特定字符索引的serch，字符串替换的replace等等。在这些方法中，我们也可以将正则表达式作为他的参数，这样就可以查找、替换、匹配符合某一特定模式的字符串。

1、字符串方法match

使用正则表达式模式在字符串中查找匹配项。语法如下：

str.match(regexp);

str：是要搜索的字符串对象

regexp：是正则表达式对象

返回值与注意点如下所示：

如果 regexp 没有全局标志 g，则返回一个数组，包含第一个匹配项及其捕获组（如果有的话），以及两个附加属性：index（匹配项在字符串中的位置）和input （被搜索的字符串）。

如果 regexp 有全局标志 g，则返回一个包含所有匹配项的数组，没有捕获组信息。

如果没有匹配项，则返回 null 。

使用实例

const str = "abs12ysjhi892jha98wehj29ashx982y3huiahs89829hiuas8d9902hsd8a9";

// 查找第一个匹配项
const match1 = str.match(/\d+/);
console.log(JSON.stringify(match1)); // ["12"]
	
// 查找所有匹配项
const match2 = str.match(/\d+/g); //使用全局搜索，查找所有匹配项
console.log(JSON.stringify(match2)); // ["12","892","98","29","982","3","89829","8","9902","8","9"]

执行效果如下图所示

2、字符串方法matchAll

返回一个包含所有匹配正则表达式及其分组捕获的迭代器。语法如下：

str.matchAll(regexp);

str：是要搜索的字符串对象

regexp：是正则表达式对象

返回值是一个迭代器，每个迭代项是一个包含匹配项及其捕获组的数组。

使用实例：

const str = "test1test2";
const regex = /t(e)(st(\d?))/g;

const matches = str.matchAll(regex);
for (const match of matches) {
  console.log(match.join(",") + " index: " + match.index + " input：" + match.input + " " + typeof match.groups);
}

// 输出:
// ["test1", "e", "st1", "1", index: 0, input: "test1test2", groups: undefined]
// ["test2", "e", "st2", "2", index: 5, input: "test1test2", groups: undefined]

执行效果图如下所示：

3、字符串方法replace

使用正则表达式模式在字符串中查找匹配项，并替换与此模式匹配的子串。语法如下

str.replace(regexp|substr, newSubStr|function);

str：是要搜索的字符串对象

regexp|substr：是正则表达式对象 | 等待替换的字符串

newSubStr|function：用于替换匹配项的新字符串 | 一个返回替换字符串的函数

返回一个新字符串，其中匹配项被替换为新的字符串或函数返回值。

使用实例如下所示：

const str = "Hello World!";

// 替换匹配项
const newStr1 = str.replace(/world/i, "JavaScript");
console.log(newStr1); // "Hello JavaScript!"

// 使用函数进行替换
const newStr2 = str.replace(/(\w+)\s(\w+)/, (match, p1, p2) => {
  return `${p2}, ${p1}!`;
});
console.log(newStr2); // "World, Hello!"

效果图如下所示：

4、字符串方法search

执行正则表达式和字符串之间的搜索匹配，返回匹配项的索引，或者如果没有匹配项，则返回 -1。语法如下

str.search(regexp);

str：是要搜索的字符串对象

regexp：是正则表达式对象

使用实例：

const str = "Hello World!";

// 查找匹配项的索引
const index = str.search(/world/i);
console.log(index); // 6

5、字符串方法split

使用正则表达式模式在字符串中查找匹配项，并分割字符串。语法如下

str.split(regexp|substr, limit);

str：是要搜索的字符串对象

regexp|substr：要分割的子串（非正则表达式模式）

limit ( 可选 )：一个整数，限制返回的数组长度。

返回值是一个数组，包含被分割后的子串。

使用实例：

const str = "Hello World,   Hello   JavaScript";
	
// 使用正则表达式分割字符串
const parts = str.split(/\s+/);
console.log(JSON.stringify(parts)); // ["Hello","World,","Hello","JavaScript"]
	
// 限制返回数组的长度
const parts2 = str.split(/\s+/, 2);
console.log(JSON.stringify(parts2)); // ["Hello","World,"]

效果图如下所示：

四、总结

new RegExp( ) 提供了一种动态创建正则表达式的方法，而正则表达式对象的方法（如 test和 exec）以及字符串对象的方法（如 match、replace等）则提供了丰富的操作手段来处理和匹配字符串。理解这些方法和标志，可以大大提高你在 JavaScript 中处理字符串的效率和能力。