[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)

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 {