JS 正则表达式技巧

需求

项目有个 graphql 查询语句，我简化了一下，场景如下

abcd  efgh{1234}
abcd  efgh  {1234}
abcd efgh :{1234}

需要拿到 abcd efgh 1234

第一行中 efgh{1234} 中 efgh 和 { 之间没有空格
第二行 efgh{1234} 中 efgh 和 { 之间有两个空格
第三行 abcd efgh 之间有一个空格，efgh 和 { 之间有冒号和空格

技巧

匹配可能存在的值

正则用 xxx? 去匹配可能存在的值，如下面一堆数据中 efg 可能不存在

[ :]*? 表示匹配空格和冒号，但是空格和冒号可能不存在

捕获组并命名分组

正则用 (?<name>xxx) 去捕获组，组名为 name，xxx 为正则表达式

(?<one>\w+) 表示匹配英文字符串，这是一个捕获组，组名 one

题解

表达式为 (?<one>\w+) *?(?<two>\w+)[ :]*?{(?<three>\w+)}

const regex = /(?<one>\w+) *?(?<two>\w+)[ :]*?{(?<three>\w+)}/;
const str = `abcd  efgh{1234}`;
str.match(regex).groups;

{
  "one": "abcd",
  "two": "efgh",
  "three": "1234"
}

踩到的一些坑

js 中正则表达式加了 gm 参数的时候，str.match(regex)，返回了一个数组，没有捕获组

const regex = /(?<one>\w+) *?(?<two>\w+)[ :]*?{(?<three>\w+)}/gm;
const str = `abcd  efgh{1234}`;
str.match(regex);

['abcd  efgh{1234}', 'abcd', 'efgh', '1234'];

后记

我正则很菜，期间群友 pomo 和德巨提供了不少帮助

pomo：用 xxx? 去匹配可能存在的值

德巨：直接给出了题解，我学习了匹配技巧

这篇文章只记录了简单的技巧，我的场景还是比较复杂的，大致如下

query xxxxTest ($path: xxxxTestInputPath) {

query xxxxTest ($path: xxxxTestInputPath)  {

query xxxxTest ($path: xxxxTestInputPath){

query xxxxTest ($path:xxxxTestInputPath) {

匹配语句如下

(query) *(\w+) $(\$\w+) *: *(\w+) *$( *){

参考文章

不错的参考文章，网站有点搓，别挂了，，我哪天有时间全抄过来

javascript - 正则表达式：排除捕获可能存在或可能不存在的模式