js字符串怎么用match转数组/.exec

一、使用 match() 方法将字符串转为数组

String.prototype.match() 是字符串实例上的原生检索方法。调用 str.match(regexp) 时，返回值的形态与正则表达式是否声明了全局标志 g 存在直接绑定关系。掌握这种分流机制，是正确获取数组的第一步。

1. 全局匹配模式：直接提取所有匹配项为一维数组

当正则表达式末尾附加 g 修饰符时，match() 会扫描整个字符串，将所有符合规则的子串依次提取并放入一个新数组中返回。

const rawText = "订单号: SO202401, 金额: 199元; 订单号: SO202402, 金额: 350元";

// 提取所有连续订单号（以 SO 开头后接数字）
const orderNumbers = rawText.match(/SO\d+/g);

console.log(orderNumbers);
console.log(Array.isArray(orderNumbers));

此时返回的 orderNumbers 是纯正的 JavaScript 数组，可以直接调用 map()、filter() 或通过 .length 获取匹配项总数。

const safeList = text.match(/\d+/g) || [];

2. 单次匹配模式：提取首个匹配项及内部捕获组

若正则没有加 g 标志，match() 只查找第一个匹配项。此时返回的虽然仍是一个类数组对象（Array.isArray() 返回 true），但其元素排列遵循特殊的结构：索引 0 为完整匹配子串，索引 1 到 n 对应正则中各个小括号 () 所声明的捕获组。

const logItem = "2026-11-10 [ERROR] Database timeout";
const matchResult = logItem.match(/(\d{4}-\d{2}-\d{2})\s+\[([A-Z]+)\]\s+(.*)/);

// 使用解构赋值直接转换为常规变量或数组
const [fullMatch, date, level, message] = matchResult || [];

console.log(matchResult);
console.log("日期:", date, "级别:", level);

二、match() 与 RegExp.prototype.exec() 的底层区别

在很多场景中，读者会发现 match() 和 exec() 可以得到类似的结果，但二者的调用主体、状态维护和返回机制有本质差别：

• 调用方差异：str.match(reg) 是字符串方法，由字符串驱动；reg.exec(str) 是正则表达式实例的方法，由正则对象驱动。
• 无 g 标志时完全等价：当不包含 /g 时，str.match(reg) 底层直接委托调用 reg.exec(str)，返回包含捕获组及 index、input、groups 属性的同构数组。
• 带 g 标志时行为分化：match(/.../g) 一次性遍历整个字符串，但抛弃所有捕获组；而 exec() 无论是否带 g，单次调用永远只返回一个匹配及其完整捕获组。

三、用 regexp.exec() 循环提取完整数组的标准步骤

当业务要求既要提取字符串中“所有出现的匹配项”，又要获取每一项里的“括号捕获组”时，match(/.../g) 无法完成任务。此时的经典解决方案是使用 regexp.exec(str) 配合 while 循环。

1. 游标 lastIndex 与 while 循环机制

当正则表达式设置了 g 修饰符时，正则实例对象内部会维护一个名为 lastIndex 的整数属性，记录下一次匹配扫描的起始索引。

1. 第一次执行 reg.exec(str)，从索引 0 开始匹配，找到后将 lastIndex 设为该匹配项末尾的下一个字符位置，并返回匹配详情数组。
2. 第二次调用 reg.exec(str)，自动从上一次停下的 lastIndex 位置继续向后搜索。
3. 当找不到更多匹配时，exec() 返回 null，同时自动将 lastIndex 重置为 0。

2. 编写标准化提取代码

以下代码演示如何从一段样式文本中，提取所有的 CSS 键值对，组装成结构化对象数组：

const cssString = "color: #333; font-size: 14px; background: #fff;";

// 必须带上 g 标志，并用圆括号声明捕获组
const ruleRegex = /([a-z-]+)\s*:\s*([^;]+);/g;

// 准备接收结果的目标数组
const parsedRules = [];
let match;

// 赋值表达式放在条件判断中，直到返回 null 终止
while ((match = ruleRegex.exec(cssString)) !== null) {
  parsedRules.push({
    property: match[1].trim(),
    value: match[2].trim(),
    startIndex: match.index
  });
}

console.log(parsedRules);

四、现代最佳实践：ES2020 的 matchAll() 转数组

ECMAScript 2020 (ES11) 为字符串引入了 matchAll() 方法。它专门用于解决 match(/.../g) 丢失捕获组、以及 exec() 需手动维护 while 循环繁琐易错的问题。

str.matchAll(regexp) 返回一个迭代器对象，正则表达式必须包含 /g 标志（否则直接抛出 TypeError）。配合展开运算符 [...iter] 或 Array.from()，可以瞬间转换为包含每项匹配及其所有捕获组的二维数组。

const dataStr = "apple: $5.5, banana: $3.2, orange: $4.0";
const itemRegex = /([a-z]+):\s*\$([0-9.]+)/g;

// 方式 A：使用 Array.from 直接转为常规数组
const allMatches = Array.from(dataStr.matchAll(itemRegex));

// 方式 B：结合 map 进一步纯化提取捕获组
const pureList = allMatches.map(([full, fruit, price]) => ({
  fruit,
  price: Number(price)
}));

console.log(pureList);

五、实战方案对比与选型建议

针对不同的业务开发需求，开发者可以根据下表迅速确定最简便、最安全的转换方式：