JavaScript正则拆分字符串出现首尾空值问题及优化方案

嘿，我来帮你搞明白为什么会出现首尾空字符串，以及怎么更优雅地实现需求～

为什么split会返回首尾空值？ #

你用的split(/^([a-zA-Z]{1,2})([0-9]{1,2})$/)之所以得到["", "a", "12", ""]，是因为split方法在正则包含捕获组时，会把捕获到的内容也加入结果数组，再加上你的正则是从字符串开头（^）到结尾（$）完全匹配：

• 第一个空字符串：字符串开头到第一个捕获组匹配的内容（"a"）之间的部分，也就是空
• 第二个元素：第一个捕获组([a-zA-Z]{1,2})匹配到的"a"
• 第三个元素：第二个捕获组([0-9]{1,2})匹配到的"12"
• 第四个空字符串：第二个捕获组内容到字符串结尾的部分，也是空

快速解决原问题 #

如果只想用基础方法拿到["a", "12"]，可以换用exec方法，它返回的数组里，第一个元素是整个匹配的字符串，后面的就是捕获组内容，我们只需要截取后面的部分：

var myString = 'a12';
var matches = /^([a-zA-Z]{1,2})([0-9]{1,2})$/.exec(myString);
console.log(matches.slice(1)); // 输出 ["a", "12"]

更优雅的实现方式 #

ES2018+：命名捕获组 #

命名捕获组可以让代码可读性更强，直接通过groups对象获取对应部分，不需要靠索引：

var myString = 'a12';
var matches = /^(?<letter>[a-zA-Z]{1,2})(?<number>[0-9]{1,2})$/.exec(myString);
console.log(matches.groups.letter); // 输出 "a"
console.log(matches.groups.number); // 输出 "12"

ES2019+：matchAll处理全局场景 #

如果你的字符串里有多个需要拆分的组合（比如'a12 b12'），matchAll会返回一个迭代器，方便批量处理：

var myString = 'a12 b12';
for (const match of myString.matchAll(/(?<letter>[a-zA-Z]{1,2})(?<number>[0-9]{1,2})/g)) {
    console.log(match.groups.letter); // 依次输出 "a"、"b"
    console.log(match.groups.number); // 依次输出 "12"、"12"
}

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