Advise on Array manipulation

Question

from my code below, the constant myText stores a string that has dynamic variables in the form {{name}}, {{age}}, i am trying to use to regex to find those dynamic variables to replace them with actual values. I have an array that stores the expected variable and its corresponding value. I need to loop into the array and search the array[item].variable from the myText string, and then replace all the found variables, with the corresponding array[item].value. I am not yet good at arrays, and all i knew is the map, foreach, functions, but these are not giving me the results

 const text = ' hello {{name}}, you have made {{age}} now, and you are a {{gender}}'

  const expects = [
    { expected: /{{name}}/, wanted: "Mary" },
    { expected: /{{age}}/, wanted: 30 },
    { expected: /{{gender}}/, wanted: "girl" },
  ];



  const result = expects.map(item => {
    return (
      text.replace( item.expected, item.wanted )
    )
  })

using the map function, i get this as a console log

['<p>hello Mary, you have made {{age}}  and you are now a {{gender}}</p>', '<p>hello {{name}}, you have made 30 and you are now {{gender}}</p>', '<p>hello {{name}}, you have made {{age}} and and you are now a girl</p>']

i expected

hello Mary, you have made 30 and you are now a girl

kindly help

Answer 1

I would turn the expects object into a single regular expression, and then you need to call replace only once:

const expects = [
  { expected: /{{name}}/, wanted: "Mary" },
  { expected: /{{age}}/, wanted: 30 },
  { expected: /{{gender}}/, wanted: "girl" },
];

// Prepare
const regex = RegExp(expects.map(({expected}) => expected.source).join('|'), "g");
const trans = Object.fromEntries(expects.map(({expected, wanted}) => [expected.source, wanted]));


// Example
const text = ' hello {{name}}, you have made {{age}} now, and you are a {{gender}}'
const result = text.replace(regex, m => trans[m]);
console.log(result);

Alternatively, if it is intended that all "variables" are encoded as {{ }}, then you could just look for that generic pattern and do the lookup:

const expects = [
  { expected: /{{name}}/, wanted: "Mary" },
  { expected: /{{age}}/, wanted: 30 },
  { expected: /{{gender}}/, wanted: "girl" },
];

// Prepare
const trans = Object.fromEntries(expects.map(({expected, wanted}) => [expected.source, wanted]));


// Example
const text = ' hello {{name}}, you have made {{age}} now, and you are a {{gender}}'
const result = text.replace(/{{.*?}}/g, m => trans[m] ?? m);
console.log(result);

Answer 2

This may be one possible solution to achieve the desired objective.

Code Snippet

const text = ' hello {{name}}, you have made {{age}} now, and you are a {{gender}}'

const expects = [
  { expected: /{{name}}/, wanted: "Mary" },
  { expected: /{{age}}/, wanted: 30 },
  { expected: /{{gender}}/, wanted: "girl" },
];

console.log(
  expects.reduce(
    (acc, {expected, wanted}) => (acc.replace(expected, wanted)),
    text
  )
);

Explanation

• Iterate over expects using .reduce()
• Keep acc as the accumulator/aggregator and set it to text initially
• De-structure the iterator to directly access expected and wanted props
• Use .replace() on the accumulator to effect the desired changes/replacements