正则表达式分组与非捕获组

fengyehongWorld

于 2024-07-28 07:22:09 发布

阅读量371

点赞数 15

分类专栏：正则表达式文章标签：正则表达式

本文链接：https://blog.csdn.net/feyehong/article/details/140739213

版权

正则表达式专栏收录该内容

7 篇文章 0 订阅

订阅专栏

参考资料

初心者歓迎！手と目で覚える正規表現入門・その２「微妙な違いを許容しつつ置換しよう」

一. 分组

⏹语法：()

⏹作用：同时匹配多块内容，方便引用，捕获，提取对应的内容

👇👇👇有如下所示的文本👇👇👇

<select name="fruit_console">
	<option value="apple">苹果</option>
	<option value="banana">香蕉</option>
	<option value="orange">橘子</option>
	<option value="none"></option>
</select>

1.1 分组获取属性值和标签文本

⏹同时从文本中获取出

value对应的属性值
标签的文本值

需要分为两个组

value属性值
标签文本组

⏹ <option value="(\w+)">(.+)<\/option>

通过(\w+) 和 (.+) 来分别匹配 value属性值和标签的文本值并分组
由于我们使用 (.+) ，而不是 (.*) 来匹配标签的文本值，所以没有文本值的<option value="none"></option>不会被匹配到

在这里插入图片描述

1.2 分组获取属性值和标签文本，转换CSV格式

⏹要求将匹配到的内容转换为如下格式

苹果,apple
香蕉,banana
橘子,orange

⏹如下图所示，$1 和 $2 代表我们分的两个组所对应的值

在这里插入图片描述

1.3 分组取别名

1.3.1 语法

⏹在默认情况下

$0：表示整个正则表达式匹配的字符串
$1：表示第一个捕获组
$2：表示第二个捕获组

⏹在正则表达式中有多个分组的时候，使用默认的分组名称，可读性很低。
这个时候，我们可以给分组取别名，提高可读性。

⏹语法：(?<分组别名>pattern)

1.3.2 效果展示

<option value="(?<Value值>\w+)">(?<元素值>.+)<\/option>

通过?<Value值>取别名
通过?<元素值>取别名

在这里插入图片描述

1.3.3 JavaScript分组取别名，提取信息

<body>
    <select name="fruit_console">
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
        <option value="orange">橘子</option>
        <option value="none"></option>
    </select>
</body>
<script>
    // 获取元素的html字符串
    const selectTagHtmlStr = document.querySelector("select[name='fruit_console']").outerHTML;
    console.log(selectTagHtmlStr);
    console.log('----------------------------------');

    // 定义正则表达式，包含命名捕获组
    const regex = /<option value="(?<Value值>\w+)">(?<元素值>.+)<\/option>/g;

    // 使用 matchAll 方法获取所有匹配的结果
    const matches = selectTagHtmlStr.matchAll(regex);

    // 遍历所有匹配结果，提取命名捕获组的值
    for (let match of matches) {
        console.log(`Value值: ${match.groups['Value值']}`);
        console.log(`元素值: ${match.groups.元素值}`);
        console.log('----------------------------------');
    }
</script>

在这里插入图片描述

二. 非捕获组

2.1 语法

⏹语法：(?:...)

⏹作用：只分组而不捕获，用来辅助匹配，不会将结果放入存储空间，可以提高匹配速度。

2.2 遇到的问题

我们的html文本中多了一个selected属性

<select name="fruit_console">
	<option value="apple" selected>苹果</option>
	<option value="banana">香蕉</option>
	<option value="orange">橘子</option>
	<option value="none"></option>
</select>