diff --git a/components/src/utils/variable-interpolation.test.ts b/components/src/utils/variable-interpolation.test.ts index 57a8a03..376a2ad 100644 --- a/components/src/utils/variable-interpolation.test.ts +++ b/components/src/utils/variable-interpolation.test.ts @@ -215,6 +215,14 @@ describe('replaceVariables() with custom formats', () => { }, expected: 'hello (perses\\.|prometheus\\$) (world\\.)', }, + { + text: 'hello ${var1:regexliteral} ${var2:regexliteral}', + state: { + var1: { value: ['perses.', 'prometheus$'], loading: false }, + var2: { value: 'world.', loading: false }, + }, + expected: 'hello (perses\\\\.|prometheus\\\\$) (world\\\\.)', + }, // singlequote { text: 'hello ${var1:singlequote} ${var2:singlequote}', diff --git a/components/src/utils/variable-interpolation.ts b/components/src/utils/variable-interpolation.ts index f536aa8..35d243e 100644 --- a/components/src/utils/variable-interpolation.ts +++ b/components/src/utils/variable-interpolation.ts @@ -62,6 +62,7 @@ export enum InterpolationFormat { SQLSTRING = 'sqlstring', TEXT = 'text', QUERYPARAM = 'queryparam', + REGEX_LITERAL = 'regexliteral', } function stringToFormat(val: string | undefined): InterpolationFormat | undefined { @@ -110,6 +111,10 @@ export function interpolate(values: string[], name: string, format: Interpolatio const escapedRegex = values.map((v) => v.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')); return `(${escapedRegex.join('|')})`; } + case InterpolationFormat.REGEX_LITERAL: { + const escapedRegex = values.map((v) => v.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\\\$&')); + return `(${escapedRegex.join('|')})`; + } case InterpolationFormat.SINGLEQUOTE: return values.map((v) => `'${v}'`).join(','); case InterpolationFormat.SQLSTRING: @@ -143,7 +148,6 @@ export function replaceVariable( if (typeof variableValue === 'string') { replaceString = interpolate([variableValue], varName, varFormat || InterpolationFormat.RAW); } - text = text.replaceAll(variableSyntax, replaceString); return text.replaceAll(alternativeVariableSyntax, replaceString); }