JavaScript正则表达式split方法行为异常原因及目标参数值提取方案咨询

先看一下你写的代码：

var a = "abc=def&ghi=jkl&mno=pqr".split(/(^|&).*?(=|$)/);
console.log("0='" + a[0] + "' 1='" + a[1] + "' 2='" + a[2] + "' 3='" + a[3] + "' 4='" + a[4] + "' 5='" + a[5] + "' 6='" + a[6] + "' 7='" + a[7] + "' 8='" + a[8] + "' 9='" + a[9] + "' a='" + a + "'")

你预期的输出：

0=`def` 1=`jkl` 2=`pqr` 3=`undefined` 4=`undefined` 5=`undefined` 6=`undefined` 7=`undefined` 8=`undefined` 9=`undefined` a=`def,jkl,pqr`

实际得到的输出：

0=`` 1=`` 2=`=` 3=`def` 4=`&` 5=`=` 6=`jkl` 7=`&` 8=`=` 9=`pqr` a=`,,=,def,&,=,jkl,&,=,pqr`

下面逐个解答你的疑问：

1. 为什么子串=和&未被匹配为分隔符部分，反而出现在结果数组中？ #

这是因为当split使用包含捕获组的正则时，捕获到的内容会被自动加入结果数组。你的正则/(^|&).*?(=|$)/里有两个捕获组：(^|&)和(=|$)，每次匹配时这两个组捕获到的内容（比如&、=）都会被保留在数组里，而不是作为分隔符被丢弃。举个例子，第一次匹配时，(^|&)捕获到开头的空（对应^），(=|$)捕获到=，这两个就被放进了数组；后面的&和=也是同理，都是捕获组的结果，所以出现在了数组中。

2. 结果数组开头的两个空字符串是如何产生的？ #

第一个空字符串：split会把分隔符之前的内容先放进数组，而你的正则第一次匹配是从字符串开头就开始的，开头到第一个分隔符之间没有内容，所以就生成了第一个空字符串。
第二个空字符串：来自正则里第一个捕获组(^|&)在开头匹配到的^，因为^是位置匹配，捕获到的内容是空字符串，而捕获组的内容会被加入数组，所以就出现了第二个空字符串。

3. 如何修改代码以得到预期的输出结果？ #

其实不用纠结split，换用正则匹配的方式更直接，专门提取=后面到&或结尾的内容：

const str = "abc=def&ghi=jkl&mno=pqr";
// 匹配所有=后面跟着非&的内容，提取捕获组部分
const result = str.match(/=([^&]+)/g).map(item => item.slice(1));
console.log(result); // 输出: ["def", "jkl", "pqr"]

如果一定要用split，可以调整正则，用非捕获组（(?:)）避免捕获内容被加入数组，同时直接匹配掉不需要的前缀：

const str = "abc=def&ghi=jkl&mno=pqr";
let a = str.split(/(?:^|&)[^=]+=/);
// 此时a是 ["", "def", "jkl", "pqr"]，过滤掉空字符串即可
a = a.filter(item => item);
console.log(a); // 输出: ["def", "jkl", "pqr"]

这样就能得到你想要的结果了。

内容的提问来源于stack exchange，提问作者green