[React DevTools] Fix regex for formateWithStyles function (#24486)

The previous regex to detect string substitutions is not quite right, this PR fixes it by: Check to make sure we are starting either at the beginning of the line or we match a character that's not % to make sure we capture all the % in a row. Make sure there are an odd number of % (the first X pairs are escaped % characters. The odd % followed by a letter is the string substitution)

Author: lunaruan

packages/react-devtools-shared/src/backend/utils.js

@@ -1,3 +1,4 @@
+/**
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
@@ -188,7 +189,7 @@ export function formatWithStyles(
  }
 
  // Matches any of %(o|O|d|i|s|f), but not %%(o|O|d|i|s|f)
- const REGEXP = /([^%]|^)(%([oOdisf]))/g;
+ const REGEXP = /([^%]|^)((%%)*)(%([oOdisf]))/g;
  if (inputArgs[0].match(REGEXP)) {
  return [`%c${inputArgs[0]}`, style, ...inputArgs.slice(1)];
  } else {

packages/react-devtools-shared/src/hook.js

@@ -189,7 +189,7 @@ export function installHook(target: any): DevToolsHook | null {
  }
 
  // Matches any of %(o|O|d|i|s|f), but not %%(o|O|d|i|s|f)
- const REGEXP = /([^%]|^)(%([oOdisf]))/g;
+ const REGEXP = /([^%]|^)((%%)*)(%([oOdisf]))/g;
  if (inputArgs[0].match(REGEXP)) {
  return [`%c${inputArgs[0]}`, style, ...inputArgs.slice(1)];
  } else {