Javascript looping replacing data in a string

Question

I have a small piece of code that I am trying to do a replacement on. There are two data objects. One is a list of URL's that contain a {variable}, and the other is an object of the replacement values for those variables.

I have created some code to try and get it working but I think there is probably a more efficient way of handling this.

// Content we will look through and replace variables in
let urls = [
    'http://www.example.com/{var1}/{var2}',
    'http://www.example.com/{var1}/{var4}',
];

// Data used for the replacement
let variables = [{
    variable: 'var1',
    value: '123'
},
{
    variable: 'var2',
    value: '456'
},
{
    variable: 'var4',
    value: '789'
}]

// Will hold the final URLs
let finalURLs = [];

// Loop over all URLS
for (let index = 0; index < urls.length; ++index) {

    // Loop over all variables
    for (let d = 0; d < data.length; ++d) {

        // Set the replaced URL
        let u = urls[index].replace('{' + data[d].variable + '}', data[d].value);
        finalURLs.push(u);

    }

}

// Desired output
finalURLs = [
    'http://www.example.com/123/456',
    'http://www.example.com/123/789'
]

I'm sure I am way off on this but looking for some pointers on what to do.

This is pretty much the way to do it, though. There are always multiple ways to write code, but you have two arrays that need to interact, so you're going to need two nested loops. Nothing wrong with that. — Amunium
– Amunium, Commented Apr 4, 2019 at 7:45
how is this the way to do it? for 2 input urls you'd get 6 output urls with that code @Amunium — Jaromanda X
– Jaromanda X, Commented Apr 4, 2019 at 7:46
@JaromandaX - Yes, and he accidentally used data instead of variables. There are a few issues, but the question was one of efficiency, and there's really nothing to improve there. He needs two nested loops, regardless if he uses for-loops or map()/forEach() instead. Nothing wrong with it conceptually, he just needs to iron out the bugs. — Amunium
– Amunium, Commented Apr 4, 2019 at 10:35

Nina Scholz · Accepted Answer · 2019-04-04 07:44:47Z

1

You could take an object for the replacement strings and replace all found values.

var urls = ['http://www.example.com/{var1}/{var2}', 'http://www.example.com/{var1}/{var4}'],
    vars = { var1: '123', var2: '456', var4: '789' },
    result = urls.map(s => s.replace(/\{([^}]*?)\}/g, (_, v) => v in vars ? vars[v] : v));

console.log(result);

answered Apr 4, 2019 at 7:44

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

4 Comments

DedaDev Over a year ago

I don't get it what is the second argument in your replace method? Function with underscore as parameter which is never used... what?

Nina Scholz Over a year ago

you need a placeholder for the paramter. _ is a common sign, that this parameter is not used.

DedaDev Over a year ago

According to MDN, if the function is passed as a parameter in the replace method, the first argument of that function is matched string, and second is the nth element matched, in this case, underscore is matched string {var} and v is the same thing but without parenthesis, can you explain me that?

Nina Scholz Over a year ago

right, but i need only the part inside of the curlies, not the whole match.

jo_va · Accepted Answer · 2019-04-04 07:45:41Z

1

You can use Array.prototype.map(), Array.prototype.forEach() and String.prototype.replace(). Use a regular expression to apply the replacement globally.

const urls = [
  'http://www.example.com/{var1}/{var2}',
  'http://www.example.com/{var1}/{var4}',
];

const variables = [
  { variable: 'var1', value: '123' },
  { variable: 'var2', value: '456' },
  { variable: 'var4', value: '789' }
];

const result = urls.map(url => {
  variables.forEach(({ variable, value }) => {
    url = url.replace(new RegExp(`{${variable}}`, 'g'), value);
  });
  return url;
});

console.log(result);

edited Apr 4, 2019 at 7:45

answered Apr 4, 2019 at 7:42

jo_va

14.1k3 gold badges25 silver badges49 bronze badges

1 Comment

arizafar Over a year ago

better url.replace(RegExp(variable,g), value);

Barmar · Accepted Answer · 2019-04-04 07:43:50Z

0

You keep on replacing in the original value of urls[index], not the value that resulted from the previous replacement.

for (let index = 0; index < urls.length; ++index) {
    let cur_url = urls[index];
    // Loop over all variables
    for (let d = 0; d < data.length; ++d) {
        // Set the replaced URL
        cur_url = cur_url.replace('{' + data[d].variable + '}', data[d].value);   
    }
    finalURLs.push(cur_url);
}

answered Apr 4, 2019 at 7:43

Barmar

789k57 gold badges554 silver badges669 bronze badges

Comments

CertainPerformance · Accepted Answer · 2019-04-04 07:45:09Z

One option would be to use a regular expression to match every variable surrounded by brackets, and then look up the replacer in an object indexed by variable, whose values are the replacements:

// Content we will look through and replace variables in
let urls = [
    'http://www.example.com/{var1}/{var2}',
    'http://www.example.com/{var1}/{var4}',
];

// Data used for the replacement
let variables = [{
    variable: 'var1',
    value: '123'
},
{
    variable: 'var2',
    value: '456'
},
{
    variable: 'var4',
    value: '789'
}];
const replacements = variables.reduce((a, { variable, value }) => {
  a[variable] = value;
  return a;
}, {});

const pattern = new RegExp(
  Object.keys(replacements).map(needle => `{${needle}}`).join('|'),
  'g' // global match; replace all
);
const newUrls = urls.map(url => (
  url.replace(pattern, (needleWithBrackets) => {
    // Trim out the leading and trailing brackets:
    const needle = needleWithBrackets.slice(1, needleWithBrackets.length - 1);
    return replacements[needle];
  })
));
console.log(newUrls);

Of course, it would be nicer if you can declare the replacements upfront:

// Content we will look through and replace variables in
let urls = [
    'http://www.example.com/{var1}/{var2}',
    'http://www.example.com/{var1}/{var4}',
];
const replacements = {
  var1: 123,
  var2: 456,
  var4: 789
};

const pattern = new RegExp(
  Object.keys(replacements).map(needle => `{${needle}}`).join('|'),
  'g' // global match; replace all
);
const newUrls = urls.map(url => (
  url.replace(pattern, needleWithBrackets => replacements[needleWithBrackets.slice(1, needleWithBrackets.length - 1)])
));
console.log(newUrls);

JMarton · Accepted Answer · 2019-04-04 07:59:04Z

0

This seems like it can be solved with a template string.

const variables = { var1: '123', var2: '323', var4:'254'}

const finalUrls = [
   `http://www.example.com/${variables.var1}/{variables.var2}`,
   `http://www.example.com/${variables.var1}/{variables.var4}`
]

I hope I understood your exact case.

Another note, If variables could contain special characters you should use encodeURI

answered Apr 4, 2019 at 7:59

JMarton

12 bronze badges

Collectives™ on Stack Overflow

Javascript looping replacing data in a string

5 Answers 5

4 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related