在 split 中使用正则捕获组的问题

2022-07-12 · 396 chars · 2 min read

昨天给 eazydict-bing 升级 elint,结果单元测试跑不过。发现是之前使用 split(' ') 切割字符串的,但是现在应该是库升级的原因,除了空格还会出现  ,于是下意识的想兼容下,写成:

str.split(/(\s| )/)

结果输出变得更加诡异了,为了看得更直观,用 1 2 来演示,看如下代码的输出(Chrome Devtools):

'===1===2===1==='.split(/(1|2)/)

// output
// (7) ['===', '1', '===', '2', '===', '1', '===']

这个就和我们通常理解的 split 很不一样,一般执行 split('xxx') 都会将 xxx 删除的,但是上面的代码并没有,而且在“分割字符”的左右位置切开字符串,没有删除任何东西。尝试了一会儿后发现,去掉捕获组(捕获括号)即可达到预期的效果:

'===1===2===1==='.split(/1|2/)

// output
// (4) ['===', '===', '===', '===']

颇为惊讶,以前并不知道 split 有这样的效果,仔细查了下 MDN,发现这么一段描述:

如果分隔符是包含捕获括号的正则表达式,则每次分隔符匹配时,捕获括号的结果(包括任何未定义的结果)将被拼接到输出数组中。但是,并不是所有浏览器都支持此功能。

所以呀,以后使用 split,要么直接用字符串,要么直接用 |,切记不要加括号,不要形成捕获组。(从过往的经验看,split 也不会有太复杂的正则)

赞赏

微信