JavaScript正则split行为异常：结果不符预期的原因与解决方法

问题背景 #

我在HTML文档中编写了如下JavaScript代码：

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. 数组开头为何会出现两个空字符串？ #

正则第一次匹配从字符串起始位置^开始：(^|&)匹配到起始位置对应的空字符串，.*?匹配abc，(=|$)匹配=。此时split的分隔符是^abc=，分隔符前面的内容是空字符串（因为分隔符从开头开始），再加上第一个捕获组(^|&)匹配到的空字符串，所以数组开头就出现了两个空字符串。

3. 如何修改才能得到预期的输出结果？ #

方法一：用match直接提取目标内容（更直观）

var str = "abc=def&ghi=jkl&mno=pqr";
var a = str.match(/=(.*?)(?=&|$)/g).map(item => item.slice(1));
// 按原格式输出
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}'`);

正则/(.*?)(?=&|$)/匹配=后面、&或字符串结尾前的内容，map去掉前面的=，直接得到目标数组。

方法二：调整正则用split实现

如果一定要用split，改用非捕获组（(?:)）包裹不需要保留的部分，避免捕获组内容进入数组：

var a = "abc=def&ghi=jkl&mno=pqr".split(/(?:^|&)[^=]+=/).filter(item => item);
// 按原格式输出
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}'`);

(?:^|&)是非捕获组，匹配开头或&；[^=]+=匹配等号前的所有非等号字符加等号，split后过滤掉空字符串，就得到目标数组。

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