如何在JavaScript中为括号访问的字符串添加可选链？

要同时支持点符号和括号形式的属性访问，且保留原有括号不被删除，我们可以调整正则表达式，通过分支匹配+替换函数来分别处理两种场景：

修改后的实现代码 #

const inputs = [
  'foo.bar',        // foo?.bar
  'foo.bar.baz',    // foo?.bar?.baz
  'foo.bar.baz.go', // foo?.bar?.baz?.go
  'foo[0].bar',     // foo?.[0]?.bar
  'foo.bar[0]',     // foo?.bar?.[0]
  'foo.bar[0].bla', // foo?.bar?.[0]?.bla
  'foo',            // foo
  'foo.bar[text].some.bla[0]', // foo?.bar?.[text]?.some?.bla?.[0]
  "foo?.you['text'][text].some[0].bla", // foo.you?.['text']?.[text]?.some?.[0]?.bla
];

// 匹配两种场景：1. 无前置?的.\w+ 2. 无前置?的[
const regex = /(?<!\?)(?:(\.)(\w+)|(\[))/g;

const outputs = inputs.map(input => 
  input.replace(regex, (match, dot, prop, bracket) => {
    if (dot) {
      // 处理点访问：将 .prop 替换为 ?.prop
      return `?.${prop}`;
    } else if (bracket) {
      // 处理括号访问：将 [ 替换为 ?.[
      return `?.[`;
    }
    return match;
  })
);

console.log(outputs);

正则表达式解释 #

• (?<!\?)：负向预查，确保当前匹配的内容前面没有已经存在的?，避免重复添加可选链
• (?:(\.)(\w+)|(\[))：非捕获分组，包含两个分支：
  • (\.)(\w+)：捕获点符号和后续的属性名，用于处理foo.bar这类场景
  • (\[)：捕获括号访问的左括号，用于处理foo[0]这类场景

替换逻辑说明 #

通过替换函数区分两种匹配结果：

• 如果匹配到点符号分支（dot存在），则将.prop替换为?.prop
• 如果匹配到括号分支（bracket存在），则将[替换为?.[，保留原有括号内的内容

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