Can my JavaScript regex handle dots within quotes?

I have created a regular expression to add ?. to JavaScript expressions within a string.

For example: bar.foo.some becomes bar?.foo?.some.

It works perfectly, except when there are dots between quotes (' or ").
I mean, when I test the regex on this expression: data.foo ? 'yes. I can do it': 'no.', it becomes data?.foo ? 'yes?. I can do it': 'no?.'.

What I need from this regex is to ignore the dots inside the quotes. However, I am unsure how to instruct the regex to do so.

The regex I created is quite complex as it covers cases such as ?.[ and )?. for index access, as well as function calls (some[...] and some.fn().bar).

Below are some possible expressions with the expected output as comments:

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

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

[
  `bla.params.query ? 'yes.' : 'no.'`, // expected output: bla?.params?.query ? 'yes.': 'no.'
  `bla[foo]`, // expected output: bla?.[foo]
  `bla[foo].bar }}`, // expected output: bla?.[foo]?.bar
  `bar.some().bar`, // expected output: bla?.some()?.bar
  `bla`, // expected output: bla
  `bla.some`, // expected output: bla?.some
  `bla.some.go`, // expected output: bla?.some?.go
  `bla ? 'bla.some': 'you.go'`, // expected output: bla ? 'bla.some': 'you.go'
  `bla.`, // invalid expresssion, should ignore because there nothing after the dot. expected output: bla.
].forEach((v) => {
  v = v.replace(
    /(?<=[a-z_])\.(?!\?)|(?<=[\]a-z_])(?=\[)|(?<=[\]a-z_])(?=^\()|(?<=]|\))(?=\[)|(?<=]|\))\./gi,
    '?.'
  );

  console.log(v);
});

<!-- end snippet -->

To skip . inside single or double quotes, you can use a negative lookahead to ensure that the . is not followed by a closing quote. Here's the updated regex:

/(?<=[a-z_])\.(?!\?)(?=(?:[^'"]|'[^']*'|"[^"]*")*$)|(?<=[\]a-z_])(?=\[)|(?<=[\]a-z_])(?=^\()|(?<=]|\))(?=\[)|(?<=]|\))\./gi

This regex is similar to the previous one, but it adds a lookahead assertion to check that the . is not followed by a closing quote. The lookahead matches any number of characters that are not a quote or a quote that is not followed by another quote. This ensures that the . is not inside a quoted string.

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

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

[
  `bla.params.query ? 'yes.' : 'no.'`, // expected output: bla?.params?.query ? 'yes.': 'no.'
  `bla[foo]`, // expected output: bla?.[foo]
  `bla[foo].bar }}`, // expected output: bla?.[foo]?.bar
  `bar.some().bar`, // expected output: bla?.some()?.bar
  `bla`, // expected output: bla
  `bla.some`, // expected output: bla?.some
  `bla.some.go`, // expected output: bla?.some?.go
  `bla ? 'bla.some': 'you.go'`, // expected output: bla ? 'bla.some': 'you.go'
  `bla.`, // invalid expresssion, should ignore because there nothing after the dot. expected output: bla.
].forEach((v) => {
  v = v.replace(
    /(?<=[a-z_])\.(?!\?)(?=(?:[^'"]|'[^']*'|"[^"]*")*$)|(?<=[\]a-z_])(?=\[)|(?<=[\]a-z_])(?=^\()|(?<=]|\))(?=\[)|(?<=]|\))\./gi,
    '?.'
  );

  console.log(v);
});

<!-- end snippet -->

In order to explicitly express which kind of character one wants to allow/match before each to be replaced property accessor, either dot or (opening) bracket, one might choose the notation of unicode escapes.

A character set/range, which allows letters, numbers, underscore, closing bracket and closing parentheses, embedded into a positive lookbehind then would look like this ...

(?<=[\p{L}\p{N}_\])])

And only dots which in addition are followed (positive lookahead) by either letters, numbers and underscore might be considered valid replacement points (matches), ...

\.(?=[\p{L}\p{N}_])

... whereas such an additional rule would not apply to an opening bracket.

Thus, assembling all of the above with the alternation of either an opening bracket or a dot which has a followers rule, one already comes up with ...

(?<=[\p{L}\p{N}_\])])(?:\[|\.(?=[\p{L}\p{N}_]))

And in order to prevent matches enclosed into single quotes, one could add another lookbehind, this time, a negative one like ...

(?<!'.*?)

The final regex ... /(?<!'.*?)(?<=[\p{L}\p{N}_\])])(?:\[|\.(?=[\p{L}\p{N}_]))/gu ... fulfills the OP's requirements as far as it covers the OP's provided use cases. It does not mean, it's the ultimate solution. The OP could refine the pattern to the OP's needs.

A bullet proof solution anyhow had to be built on a parser/lexer.

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

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

const regXDotBracketAccessors =
  // see ... [https://regex101.com/r/fmfcwR/1]
  /(?<!'.*?)(?<=[\p{L}\p{N}_\])])(?:\[|\.(?=[\p{L}\p{N}_]))/gu;

console.log([                           // expected:

  `bla.params.query ? 'yes.' : 'no.'`,  // bla?.params?.query ? 'yes.' : 'no.'
  `bla[foo]`,                           // bla?.[foo]
  `{{ bla[foo].bar }}`,                 // {{ bla?.[foo]?.bar }}
  `bar.some().bar`,                     // bar?.some()?.bar
  `bla`,                                // bla
  `bla.some`,                           // bla?.some
  `bla.some.go`,                        // bla?.some?.go
  `bla ? 'bla.some' : 'you.go'`,        // bla ? 'bla.some' : 'you.go'
  `bla.`,                               // bla.

  ].map(item =>
    item.replace(
      regXDotBracketAccessors,
      match => `?.${ match !== '.' && match || '' }`
    )
  )
);

<!-- language: lang-css -->

.as-console-wrapper { min-height: 100%!important; top: 0; }

<!-- end snippet -->

It seems that is that it fails to distinguish between dots inside strings and dots used as property access operators in JavaScript objects.

RegExp is designed for linear pattern matching, in your case it needs to ignore something with double quotes or single quotes and it is not RegExp's forte.

A solution could be to break the string into pieces and apply regex to non string parts like this:

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

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

function safeRegexReplace(str, regex, replacement) {
    var parts = str.split(/(".*?"|'.*?')/); // or \.(?!\?|$)

    // for loop for the parts without quotes
    for (var i = 0; i < parts.length; i++) {
        if (i % 2 === 0) { // If the index is even, we are not inside a string
            parts[i] = parts[i].replace(regex, replacement);
        }
    }

    // Join all
    return parts.join('');
}

[
  `bla.params.query ? 'yes.' : 'no.'`, // expected output: bla?.params?.query ? 'yes.': 'no.'
  `bla[foo]`, // expected output: bla?.[foo]
  `bla[foo].bar }}`, // expected output: bla?.[foo]?.bar
  `bar.some().bar`, // expected output: bla?.some()?.bar
  `bla`, // expected output: bla
  `bla.some`, // expected output: bla?.some
  `bla.some.go`, // expected output: bla?.some?.go
  `bla ? 'bla.some': 'you.go'`, // expected output: bla ? 'bla.some': 'you.go'
  `bla.`, // invalid expresssion, should ignore because there nothing after the dot. expected output: bla.
].forEach((v) => {
  v = safeRegexReplace(v, /(?<=[a-z_])\.(?!\?)|(?<=[\]a-z_])(?=\[)|(?<=[\]a-z_])(?=^\()|(?<=]|\))(?=\[)|(?<=]|\))\./gi, '?.'); //every little combination
  console.log(v);
});

<!-- end snippet -->

I'm assuming that the string does not contain nested strings.