How to add optional chaining to strings with brackets access in js?

I create this regex to add optional chaining (?.) in the string: /(?<=\w+\.)(\w+)\.(?!\?)/g.

This regex works fine for property access with dot notation. for example foo.bar.baz will transform to foo?.bar?.baz.

But I want also to support property with brackets foo.bar[0].baz.

So I change the regex to have . or [: /(?<=\w+\.)(\w+)\.|\[(?!\?)/g but the replace remove the [ char.

Is it possible to change the regex so it match and replace also properties with brackets?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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
];

const regex = /(?<=\w+\.)(\w+)\.(?!\?)/g;
const outputs = inputs.map((input) => input.replace(regex, '$1?.'));
console.log(outputs);

<!-- end snippet -->

You can use

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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
];

const regex = /(?<=[a-z_])\.(?!\?)|(?<=[\]a-z_])(?=\[)|(?<=])\./gi;
const outputs = inputs.map((input) => input.replace(regex, '?.'));
console.log(outputs);

<!-- end snippet -->

The pattern matches

• (?<=[a-z_]) - immediately before the current location, there must be an ASCII letter or underscore
• \. - a dot
• (?!\?) - not immediately followed with a ? char
• | - or
• (?<=[\]a-z_])(?=\[) - a position between ], underscore or an ASCII letter char and a [ char
• | - or
• (?<=])\. - a . that is immediately preceded with a . char.

You would need to identify string literals and decimal points so to avoid replacing things that should stay.

Below is a much longer regex that will identify string literals, decimal points, and insertion points just before a [.

I modified and added some more challenging test cases:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const inputs = [
  'foo.bar',
  'foo.bar.baz',
  'foo.bar.baz?.go',
  'foo[0].bar',
  'foo.bar[0]',
  'foo.bar[0].bla',
  'foo',
  'foo.bar[text].some.bla[0]',
  "foo.you['tex.t']['t[ext'].some?.[0].bla",
  "foo[2.][9e1]",
  "2.3.toFixed?.['.']",
  "+1_2..toFixed",
  "'ab][c.'.toUpperCase",
  "foo.[']'].$$$._",
];

const regex = /(\[?(?:(['"`])(?:\\.|(?!).)*|\.(?=[\d.[\]])|[^'"`?.[])+)(?=[?.[])\??\.?/g;
const outputs = inputs.map((input) => input.replace(regex, '$1?.'));
console.log(outputs);

<!-- end snippet -->

The first (large) capture group matches text that needs to remain unaltered:

• (['"`])(?:\\.|(?!\2).)*\2 matches a string literal that takes into account that a backslash is an escape character, so the character that follows it should not be taken as string delimiter. The group (['"`]) is the second group in the overal regex, so the closing delimiter is matched with \2.
• \.(?=[\d.[\]]) matches a decimal point when it cannot be interpreted as a property accessor point.
• [^'"`?.[] matches any character of '"`?.[. This restriction is to avoid that during backtracking the previous options would be given up in favor of this one.
• (?: | | )+ repeats matching the above options as long as possible. This part of the match will stop at either the end of the input, or just before a ., a ? or a [. (A quote could also be possible, but then the input is malformed)

After that first capture group has been matched, we are at a potential insertion point of ?.. But it should not be inserted when at the end of the input, so we have this assertion:

• (?=[?.[]) requires that a character must still follow (so not at the end of the input) which must be one of ?.[. This requirement also avoids backtracking to an invalid insertion position.

Then the insertion point has been reached:

• \??\.? matches the characters (if any) that need to be removed before inserting ?.. Note that this also matches ?., which results in a replacement of itself.

The replacement is:

• $1 to reproduce what was captured in the first (large) capture group
• ?. to insert the optional chaining operator character combination.