Javascript regex replace in-string variable with actual variable value

Question

I would like "category/[categoryName]/[amount]" to become "category/movies/all" (replace "[variable-name]" with the value of the variable with the same name). I have this so far but I'm missing something:

let categoryName = "movies"; // example variable, set somewhere else
let amount = "all"; // example variable, set somewhere else
...
let searchUrl = "category/[categoryName]/[amount]"; // Set dynamically, could be any params
let regex = /\[(.+?)\]/ug;
searchUrl = searchUrl.replace(regex, window['$1']);

but the value of searchUrl just becomes "category/undefined/undefined".

Is what I'm trying to do even possible? Was that asked before and my question title is just malformed? I know how to do this with 2 regexes, first getting the variable names then looping in them and substituting. However I would like to do it with one "replace" only. Is that possible or I have to use 2 regexes?

Answer 1

If I understand correctly for this to work as dynamically as you state you will have to do the following

// example variable, you need to use var so its 
// available on the window otherwise this will not work
var categoryName = "movies"; 
...
let searchUrl = "category/[categoryName]/all";
let regex = /\[(.+?)\]/ug;
let variableName = searchUrl.match(regex)[0];
searchUrl = searchUrl.replace(regex, window['variableName']);

Your dynamic variable will have to be stored globally for this work!

Answer 2

You're so close! What you have now tries to replace [categoryName] with the global variable $1 , which doesn't exist. What you want is to use searchUrl.replace(regex, categoryName) , assuming categoryName is dynamically set with the correct category.

Answer 3

It seems that with .replace you can enter multiple 'replacers', so you could say str.replace(regex, replacer1, replacer2, replacer3...) . Alternatively, you can pass a function to replace a matched value each time one is found.

I just modified your code to:

let categoryName = "movies"; // example variable, set somewhere else
let amount = "all"; // example variable, set somewhere else

// previous answer suggestion
// let replacers = [categoryName, amount];

let searchUrl = "category/[categoryName]/[amount]"; // Set dynamically, could be any params
let regex = /\[(.+?)\]/gu;
let replacers = searchUrl.match(regex).map( m => m.replace(/\[|\]/g,''));
searchUrl = searchUrl.replace(regex, () => { let val = eval(replacers.shift()); return val; });

output => "category/movies/all"

Since your regex is global, it continues to find matches but since there is only 1 replacer in your original code, it replaces the match with that replacer.

ie categories/undefined/undefined (using searchUrl.replace(regex, window['$1']); )

You may want to put your replacers into an array. Then with each match, use a function to replace the match with the value stored in the array, as shown in my example above.

Note: This example works for 2 matches only.

Hope this helps.

MDN - Specifying a function as a parameter