如何修改正则表达式以匹配字符串中的函数调用，实现可选链替换？

AI 小北

2026-8-2

给多级属性访问（含函数调用）添加可选链?.的正则方案

需求说明

需要将字符串中的多级属性访问、带函数调用的表达式转换为可选链形式，示例输入输出如下：

const inputs = [
  'foo', // foo
  'foo.bar', // foo.bar
  'foo.bar.baz', // foo.bar?.baz
  'bla.some()', // bla.some?.()
  'bla.bar.you()', // bla.bar?.you?.()
  'account === prop.account.id', // account === prop.account?.id
  '{ myclass: foo.bar.baz }', // { myclass: foo.bar?.baz }
];

原正则的局限

原正则/(?<=\w+\.)(\w+)\.(?!\?)/g仅能处理属性访问场景（如foo.bar.baz），无法匹配函数调用的情况（如bla.some()），导致这类场景无法添加可选链。

修改后的正则及替换逻辑

将正则扩展为同时匹配属性访问的.和函数调用的(，修改后的正则为：

/(?<=\w+\.)(\w+)(\.|\()(?!\?)/g

替换时使用'$1?.$2'，即给匹配到的属性名/函数名后插入?.，保留后续的.或(。

测试代码

const inputs = [
  'foo', // foo
  'foo.bar', // foo.bar
  'foo.bar.baz', // foo.bar?.baz
  'bla.some()', // bla.some?.()
  'bla.bar.you()', // bla.bar?.you?.()
  'account === prop.account.id', // account === prop.account?.id
  '{ myclass: foo.bar.baz }', // { myclass: foo.bar?.baz }
];

inputs.forEach((input) => {
  const output = input.replace(/(?<=\w+\.)(\w+)(\.|\()(?!\?)/g, '$1?.$2');
  console.log(`${input} → ${output}`);
});