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?

i tried this one and it works: searchUrl = searchUrl.replace(regex, '$1'); (it returns "category/categoryName/all").. But i am not quite sure why do you use window['$1'] nor why it does not work — wakakak
– wakakak, Commented Nov 19, 2019 at 0:55
Sorry I forgot one crucial detail! I changed my question, where categoryName is supposed to have a value — NaturalBornCamper
– NaturalBornCamper, Commented Nov 19, 2019 at 1:00
then why not use: searchUrl = searchUrl.replace(regex, categoryName); ? — wakakak
– wakakak, Commented Nov 19, 2019 at 1:01
because "category/[categoryName]/all" is set dynamically, it could be something else than "categoryName" — NaturalBornCamper
– NaturalBornCamper, Commented Nov 19, 2019 at 1:04
duh.. of course.. forgive me, sometimes my brain just stops working.. I have done similar to this before, but i was using object, and so: let data = { categoryName: "movies" // example variable, set somewhere else }; let searchUrl = "category/[categoryName]/all"; let regex = /[(.+?)]/ug; searchUrl = searchUrl.replace(regex, function(match, p1) { return data[p1]; }); console.log(searchUrl); — wakakak
– wakakak, Commented Nov 19, 2019 at 1:44

Smokey Dawson · Accepted Answer · 2019-11-19 01:24:43Z

2

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!

answered Nov 19, 2019 at 1:24

Smokey Dawson

9,29023 gold badges87 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NaturalBornCamper Over a year ago

My fault for not being precise enough. I know I can do it with 2 regex calls, but I would like to do it with only one call, a one-liner. I updated my question to be more precise, just wondering if this is possible. Still upvoted your answer as it's relevant to my original one.

piticent123 · Accepted Answer · 2019-11-19 01:18:49Z

0

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.

answered Nov 19, 2019 at 1:18

piticent123

3232 silver badges8 bronze badges

1 Comment

NaturalBornCamper Over a year ago

Thanks friend! Not exactly what I'm looking for though, I updated my question ;)

matt6frey · Accepted Answer · 2019-11-20 00:28:52Z

0

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.

i.e. 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

edited Nov 20, 2019 at 0:28

answered Nov 19, 2019 at 3:50

matt6frey

13310 bronze badges

3 Comments

NaturalBornCamper Over a year ago

Yeah I was hoping to have a X number of variables and that the javascript would just parse ANYTHING between [ ] then find the corresponding variable, but it doesn't seem to be possible and it looks like I will have to use a loop with matches then replace manually unfortunately

matt6frey Over a year ago

the replacers array could have values in pushed into the depending the number of matches. A way you could do it is use searchUrl.match(regex).map( m => m.replace(/\[|\]/g,'')) to get the matched results, then when using .replace replace those values using the function I provided.

matt6frey Over a year ago

*Added eval to function call

Collectives™ on Stack Overflow

Javascript regex replace in-string variable with actual variable value

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related