【JavaScript】match用法 | 正则匹配 | 捕获组与非捕获组

match正则匹配

var e = "www.apple.com:@baidu.com"
var match = e.match(/com/g)
console.log("match: "+match);

> "match: com,com"

match返回值问题

match的返回值是一个数组
数组的第0个元素是与整个正则表达式匹配的结果
数组的第1个元素是 匹配结果中 与第1个子表达式（也就是正则表达式第1个括号内的部分）相对应的内容
数组的第2个元素是 匹配结果中 与第2个子表达式（也就是第2个括号内的部分）相对应的内容
以此类推

示例代码：

var e = "https://www.apple.com:@baidu.com"
var match = e.match(/^https?\:\/\/([^\/:?#]+)(?:[\/:?#]|$)/)

console.log("match: "+match);
console.log("match[0]: "+match[0]);
console.log("match[1]: "+match[1]);
console.log("match[2]: "+match[2]);

正则表达式：/^https?\:\/\/([^\/:?#]+)(?:[\/:?#]|$)/
https://jex.im/regulex/

输出：

> "match: https://www.apple.com:,www.apple.com"
> "match[0]: https://www.apple.com:"
> "match[1]: www.apple.com"
> "match[2]: undefined"

其中：

• match[0]是"https://www.apple.com:@baidu.com"和整个/^https?\:\/\/([^\/:?#]+)(?:[\/:?#]|$)/匹配的结果：https://www.apple.com:
• match[1]是https://www.apple.com: 中 和第1个捕获组（也就是小括号内的内容）([^\/:?#]+)相对应的部分：www.apple.com
• match[2]是https://www.apple.com: 中 和第2个捕获组相对应的部分，由于(?:[\/:?#]|$)中存在?:，所以它是非捕获组，所以它不算；(?:[\/:?#]|$)又没有其他的小括号了，所以match[2]就什么也匹配不上了

再例如

var e = "abcdx.efghx"
var match = e.match(/efg(.x)/)
console.log("match: "+match);

console.log("match[0]: "+match[0]);
console.log("match[1]: "+match[1]);
console.log("match[2]: "+match[2]);

输出：

> "match: efghx,hx"
> "match[0]: efghx"
> "match[1]: hx"
> "match[2]: undefined"

参考：
https://www.w3school.com.cn/jsref/jsref_match.asp
https://blog.csdn.net/weixin_43791776/article/details/84455293

正则表达式中的\1

在正则表达式中，\1表示对正则表达式中第一个捕获组的引用。捕获组用括号 () 表示，可以将匹配到的内容进行分组。当正则表达式中存在多个捕获组时，可以使用\1、\2、\3等来引用不同的捕获组。

例如，如果正则表达式中有两个捕获组，分别为(abc)和(def)，那么\1将引用第一个捕获组(abc)，\2将引用第二个捕获组(def)。

再例如我们想要匹配并替换重复的单词：

const text = "Hello, Hello, World!";
const pattern = /\b(\w+)\b\s+\b\1\b/g;

const result = text.replace(pattern, "$1");
console.log(result);

在这个例子中，我们使用正则表达式 \b(\w+)\b\s+\b\1\b 来匹配重复的单词，其中：

• \b(\w+)\b 匹配一个单词，
  • \b 是一个特殊代码，代表着单词的开头或结尾，也就是单词的分界处
    具体而言，\b 匹配这样的位置：它的前一个“显式位置”字符和后一个“显式位置”字符不全是 \w
• \s+ 匹配一个或多个空格
• \b\1\b中的\1 引用第一个捕获组(\w+)中的内容

在replace()方法中，我们可以使用$1来引用第一个捕获组的内容，并将其作为替换字符串。

输出结果：

Hello, World!

在这个示例中，正则表达式匹配到了两个重复的单词 “Hello”，然后使用替换操作将重复的单词替换为一个单词。因此，输出结果为 “Hello, World!”。

正则表达式中的?:

在正则表达式中，符号?:表示一个非捕获组（non-capturing group）。通常，正则表达式中的括号用于分组匹配，并在结果中保存该分组匹配上的内容。
但有时候，我们可能不希望保存该分组匹配上的内容，这时可以使用(?:)可以创建一个非捕获组，它不会将分组匹配上的内容保存到结果中。

下面是一个示例，展示了使用非捕获组的情况：

var pattern1=/aacdaa/;
var pattern2=/(?:aa|bb)cd\1/;
var pattern3=/(aa|bb)cd\1/;

var str="aacdaa";
console.log(str.match(pattern1)); // ["aacdaa", index: 0, input: "aacdaa"]
console.log(str.match(pattern2)); // null
console.log(str.match(pattern3)); // ["aacdaa", "aa", index: 0, input: "aacdaa"]

pattern1匹配到了，没问题，普通的匹配
pattern2没匹配到，因为(?:aa|bb)是非捕获组，不作数，所以\1在这里识别不到
pattern3匹配到了，且返回值中包含两个字符串，因为(aa|bb)是捕获组，所以后面的\1就会去匹配 第一个捕获组(aa|bb) 匹配到的内容，也就是\1会去匹配"aa"，然后能匹配到