如何在半异步场景（如String.replace）中使用JavaScript async/await？

我需要对文本执行同步顺序的正则替换操作——每次替换函数执行完成后，再处理下一个匹配项。但部分匹配场景必须调用异步函数，原生String.replace不支持异步替换函数，于是尝试将替换函数改为async，但这样会导致返回Promise而非字符串，无法正常工作。

我曾使用过一个第三方replaceAsync工具函数：

async function replaceAsync(string, regexp, replacerFunction) {
    const replacements = await Promise.all(
        Array.from(string.matchAll(regexp),
            match => replacerFunction(...match)));
    let i = 0;
    return string.replace(regexp, () => replacements[i++]);
}

但该函数通过Promise.all并行执行所有替换逻辑，当前替换让出控制权时后续替换会提前启动，导致最终结果异常。

解决方案：实现顺序执行的异步替换函数 #

要实现顺序执行，需要放弃Promise.all的并行处理，改为逐个遍历匹配项并依次执行异步逻辑。同时为了避免替换后字符串长度变化导致索引偏移，建议倒序处理匹配项：

async function replaceAsyncSequential(string, regexp, replacerFunction) {
  // 获取所有匹配结果
  const matches = Array.from(string.matchAll(regexp));
  let processedText = string;

  // 倒序遍历，防止前面的替换影响后续匹配的位置
  for (let i = matches.length - 1; i >= 0; i--) {
    const match = matches[i];
    // 等待当前替换逻辑完成
    const replacement = await replacerFunction(...match);
    // 根据匹配的位置和长度，替换对应片段
    processedText = processedText.slice(0, match.index) + replacement + processedText.slice(match.index + match[0].length);
  }

  return processedText;
}

使用方式 #

将原来的text.replace(re, async replacer)替换为：

text = await replaceAsyncSequential(text, re, async function (match, comment, op1, op2, op3, op4, op5, op6, op7) {
  // 原有的异步替换逻辑保持不变
  if (op1 !== undefined) {
    log("processing @@");
    parseEnum(config, op1, args1);
  } else if (op2 !== undefined) {
    log("processing {{}}");
    parseConfig(config, interpolateConfig(config, op2));
    return "";
  } else if (op3 !== undefined && !configOnly) {
    log("processing [[]]");
    return await parseMacro(config, op3, asyncInstances);
  } else if (op4 !== undefined) {
    log("processing <<>>");
    await parseInclude(config, interpolateConfig(config, op4));
    return "";
  } else if (op5 !== undefined && !configOnly) {
    log("processing ~~~~");
    // TODO parseStyle(op5);
  } else if (op6 !== undefined) {
    log("processing $$");
    return interpolateConfig(config, op6);
  } else if (op7 !== undefined) {
    log("processing ^^");
  }
});

原理说明 #

• 倒序处理匹配项：如果正序替换，前面的替换会改变字符串的长度，导致后续匹配项的match.index失效；倒序处理时，已处理的部分不会影响未处理匹配项的位置。
• 逐个await替换逻辑：确保上一个替换的异步操作完全完成后，再处理下一个匹配项，严格保证顺序执行。

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