From c7e494b55320768863b821be96896b28f0a280ef Mon Sep 17 00:00:00 2001 From: Luna Ruan Date: Tue, 3 May 2022 15:52:56 -0700 Subject: [PATCH] [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 | 3 ++- packages/react-devtools-shared/src/hook.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js index f0f78b7f778b5..4a01b1804b9dd 100644 --- a/packages/react-devtools-shared/src/backend/utils.js +++ b/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 { diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js index ad5b33850b765..8250bebc9354e 100644 --- a/packages/react-devtools-shared/src/hook.js +++ b/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 {