Swap out values in a string if they match any of the variables in an array

Question

Swap out values in a string if they match any of the variables in an array

Let's work with an array of objects:

const data = [
  { key: '%KEY1%', value: 'value1' },
  { key: '%KEY2%', value: '%KEY1% abc' },
  { key: '%KEY3%', value: 'xyz' }
];

Now, we have a string to process:

const inputText = `This is %KEY1%, also known as %KEY2%. Contact us at %KEY3%`;

The goal is to create a function that accepts data and inputText, and outputs the modified string:

'This is value1, also known as value1 abc. Contact us at xyz'

Here is the current implementation:

function processData(data, inputText) {
  let result = inputText;
  for (let index = 0; index < data.length; index++) {
     result = inputText.replace(data[index].key, data[index].value);
  }
  return result;
}

Unfortunately, this approach only replaces one occurrence and doesn't handle nested variables, like %KEY2%.

How would you enhance this functionality?

javascript arrays ecmascript-6

Answer 1

Answer №1

To achieve the desired result, you can loop through the array backwards and utilize the replaceAll() method.

const variables = [
  { name: '%NAME%', value: 'joe' },
  { name: '%EMAIL%', value: '%NAME%@mail.com' },
  { name: '%HOBBY%', value: 'tennis' },
];

const inputString = `Hi, my name is %NAME%', I like %HOBBY%, you can contact me at %EMAIL%`;

function doMagic(variables, inputString) {
  let output = inputString;
  variables.slice().reverse().forEach(variable => {
    output = output.replaceAll(variable.name, variable.value);
  })
  
  return output;  
}

console.log(doMagic(variables, inputString));

Another approach is to use regex and while-loop with regex.test(output()) to achieve the same outcome.

const variables = [
  { name: '%NAME%', value: 'joe' },
  { name: '%EMAIL%', value: '%NAME%@mail.com' },
  { name: '%HOBBY%', value: 'tennis' },
];

const inputString = `Hi, my name is %NAME%', I like %HOBBY%, you can contact me at %EMAIL%`;

function doMagic(variables, inputString) {
  const regex = new RegExp("(" + variables.map(x => x.name).join("|") + ")", "g");
  let output = inputString;
  while (regex.test(output)) {
    output = output.replace(regex, m => {
      return variables.filter(x => x.name == m)[0].value;
    })
  }    
  
  return output;  
}

console.log(doMagic(variables, inputString));

Answer 2

To achieve the desired result, you can loop through the array backwards and utilize the replaceAll() method.

const variables = [
  { name: '%NAME%', value: 'joe' },
  { name: '%EMAIL%', value: '%NAME%@mail.com' },
  { name: '%HOBBY%', value: 'tennis' },
];

const inputString = `Hi, my name is %NAME%', I like %HOBBY%, you can contact me at %EMAIL%`;

function doMagic(variables, inputString) {
  let output = inputString;
  variables.slice().reverse().forEach(variable => {
    output = output.replaceAll(variable.name, variable.value);
  })
  
  return output;  
}

console.log(doMagic(variables, inputString));

Another approach is to use regex and while-loop with regex.test(output()) to achieve the same outcome.

const variables = [
  { name: '%NAME%', value: 'joe' },
  { name: '%EMAIL%', value: '%NAME%@mail.com' },
  { name: '%HOBBY%', value: 'tennis' },
];

const inputString = `Hi, my name is %NAME%', I like %HOBBY%, you can contact me at %EMAIL%`;

function doMagic(variables, inputString) {
  const regex = new RegExp("(" + variables.map(x => x.name).join("|") + ")", "g");
  let output = inputString;
  while (regex.test(output)) {
    output = output.replace(regex, m => {
      return variables.filter(x => x.name == m)[0].value;
    })
  }    
  
  return output;  
}

console.log(doMagic(variables, inputString));

Answer 3

Answer №2

To eliminate all variables within the string, consider using a recursive function until none are left.

const variables = [
  { name: '%NAME%', value: 'joe' },
  { name: '%EMAIL%', value: '%NAME%@mail.com' },
  { name: '%HOBBY%', value: 'tennis' },
];

const inputString = `Hi, my name is %NAME%', I like %HOBBY%, you can contact me at %EMAIL%`;

function doMagic(variables, inputString) {
  let output = inputString;
  for (let i = 0; i < variables.length; i++) {
    output = output.replace(variables[i].name, variables[i].value);
  }
  for (let i = 0; i < variables.length; i++) {
    if (output.includes(variables[i].name)) {
      output = doMagic(variables, output);
    }
  }
  return output;
}

console.log(doMagic(variables, inputString));

Answer 4

To eliminate all variables within the string, consider using a recursive function until none are left.

const variables = [
  { name: '%NAME%', value: 'joe' },
  { name: '%EMAIL%', value: '%NAME%@mail.com' },
  { name: '%HOBBY%', value: 'tennis' },
];

const inputString = `Hi, my name is %NAME%', I like %HOBBY%, you can contact me at %EMAIL%`;

function doMagic(variables, inputString) {
  let output = inputString;
  for (let i = 0; i < variables.length; i++) {
    output = output.replace(variables[i].name, variables[i].value);
  }
  for (let i = 0; i < variables.length; i++) {
    if (output.includes(variables[i].name)) {
      output = doMagic(variables, output);
    }
  }
  return output;
}

console.log(doMagic(variables, inputString));

Answer 5

Answer №3

To perform a regex substitution using a callback function, we can follow this approach:

const placeholders = [
                   {key: '%NAME%', value: 'Alice'},
                   {key: '%EMAIL%', value: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbb5b0b99ebeb2babffeafb6">[email protected]</a>'},
                   {key: '%AGE%', value: '30'}
                  ];
const regexPattern = new RegExp("(" + placeholders.map(item => item.key).join("|") + ")", "g");
const inputText = "Hello, my name is %NAME%, feel free to email me at %EMAIL%, I am %AGE% years old";
const updatedText = inputText.replace(regexPattern, (match) => {
    return placeholders.filter(item => item.key === match)[0].value;
});
console.log(updatedText);

The approach involves creating a regex pattern that combines all placeholder keys from the map. This pattern is then used to globally search for matches in the input text. For each match found, the corresponding value from the map is substituted using a callback function.

Answer 6

To perform a regex substitution using a callback function, we can follow this approach:

const placeholders = [
                   {key: '%NAME%', value: 'Alice'},
                   {key: '%EMAIL%', value: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbb5b0b99ebeb2babffeafb6">[email protected]</a>'},
                   {key: '%AGE%', value: '30'}
                  ];
const regexPattern = new RegExp("(" + placeholders.map(item => item.key).join("|") + ")", "g");
const inputText = "Hello, my name is %NAME%, feel free to email me at %EMAIL%, I am %AGE% years old";
const updatedText = inputText.replace(regexPattern, (match) => {
    return placeholders.filter(item => item.key === match)[0].value;
});
console.log(updatedText);

The approach involves creating a regex pattern that combines all placeholder keys from the map. This pattern is then used to globally search for matches in the input text. For each match found, the corresponding value from the map is substituted using a callback function.

Answer 7

Answer №4

Solving the Problems.

Make sure to update the inputString after performing a string replacement.

The solution implemented follows these steps:

Iterate through the variables first.
If any value includes a node from the variable array, replace it (e.g. replace %NAME%@mail.com with [email protected])
Use the updated array to replace string values in the inputString.
Utilize replaceAll instead of replace to handle multiple occurrences of the same variable.

const variables = [
  { name: '%NAME%', value: 'joe' },
  { name: '%EMAIL%', value: '%NAME%@mail.com' },
  { name: '%HOBBY%', value: 'tennis' }
];
const inputString = `Hi, my name is %NAME%', I like %HOBBY%, you can contact me at %EMAIL%`;
function doMagic(variables, inputString) {
  let output = inputString;
  // First replace variables
  for (let i = 0; i < variables.length; i++) {
    const node = variables.find(item => item.value.includes(variables[i].name));
    if (node) {
      node.value = node.value.replaceAll(variables[i].name, variables[i].value);
    }
  }
  for (let i = 0; i < variables.length; i++) {
    output = output.replaceAll(variables[i].name, variables[i].value);
  }
  return output;
}
console.log(doMagic(variables, inputString))

Answer 8

Solving the Problems.

Make sure to update the inputString after performing a string replacement.

The solution implemented follows these steps:

Iterate through the variables first.
If any value includes a node from the variable array, replace it (e.g. replace %NAME%@mail.com with [email protected])
Use the updated array to replace string values in the inputString.
Utilize replaceAll instead of replace to handle multiple occurrences of the same variable.

const variables = [
  { name: '%NAME%', value: 'joe' },
  { name: '%EMAIL%', value: '%NAME%@mail.com' },
  { name: '%HOBBY%', value: 'tennis' }
];
const inputString = `Hi, my name is %NAME%', I like %HOBBY%, you can contact me at %EMAIL%`;
function doMagic(variables, inputString) {
  let output = inputString;
  // First replace variables
  for (let i = 0; i < variables.length; i++) {
    const node = variables.find(item => item.value.includes(variables[i].name));
    if (node) {
      node.value = node.value.replaceAll(variables[i].name, variables[i].value);
    }
  }
  for (let i = 0; i < variables.length; i++) {
    output = output.replaceAll(variables[i].name, variables[i].value);
  }
  return output;
}
console.log(doMagic(variables, inputString))

Answer 9

Answer №5

To efficiently replace all occurrences and loop twice, you can utilize the replaceAll method.

function performReplace(variables, input) {
  let result = input;
  for (let i = 0; i < variables.length; i++) {
     result = result.replaceAll(variables[i].name, variables[i].value);
  }
  for (let i = 0; i < variables.length; i++) {
     result = result.replaceAll(variables[i].name, variables[i].value);
  }
  return result;
}

Answer 10

To efficiently replace all occurrences and loop twice, you can utilize the replaceAll method.

function performReplace(variables, input) {
  let result = input;
  for (let i = 0; i < variables.length; i++) {
     result = result.replaceAll(variables[i].name, variables[i].value);
  }
  for (let i = 0; i < variables.length; i++) {
     result = result.replaceAll(variables[i].name, variables[i].value);
  }
  return result;
}

Answer 11

Answer №6

Utilizing the power of "reduce" in my solution

const variables = [
  { name: "%FIRST%", value: "John" },
  { name: "%LAST%", value: "Doe" },
  { name: "%AGE%", value: "30" }
];
const input =
  "Hello, my name is %FIRST% %LAST%, I am %AGE% years old";

function applyMagic(inputString, variableList) {
  const replaceVariable = (s, v) =>
    v.reduce((prev = "", { name, value }) => prev.replace(name, value), s);
  const updatedVariables = variableList.map((v) => ({
    ...v,
    value: replaceVariable(v.value, variableList)
  }));

  return replaceVariable(inputString, updatedVariables);
}

console.log(applyMagic(input, variables));

You can also opt to convert my code into a prototype like so:

const input =
  "Hello, my name is %FIRST% %LAST%, I am %AGE% years old";

String.prototype.applyMagic = function (variableList) {
  const replaceVariable = (s, v) =>
    v.reduce((prev = "", { name, value }) => prev.replace(name, value), s);
  const updatedVariables = variableList.map(({ value, ...rest }) => ({
    ...rest,
    value: replaceVariable(value, variableList)
  }));

  return replaceVariable(this, updatedVariables);
};


console.log(
  input.applyMagic([
    { name: "%FIRST%", value: "John" },
    { name: "%LAST%", value: "Doe" },
    { name: "%AGE%", value: "30" }
  ])
)

Answer 12

Utilizing the power of "reduce" in my solution

const variables = [
  { name: "%FIRST%", value: "John" },
  { name: "%LAST%", value: "Doe" },
  { name: "%AGE%", value: "30" }
];
const input =
  "Hello, my name is %FIRST% %LAST%, I am %AGE% years old";

function applyMagic(inputString, variableList) {
  const replaceVariable = (s, v) =>
    v.reduce((prev = "", { name, value }) => prev.replace(name, value), s);
  const updatedVariables = variableList.map((v) => ({
    ...v,
    value: replaceVariable(v.value, variableList)
  }));

  return replaceVariable(inputString, updatedVariables);
}

console.log(applyMagic(input, variables));

You can also opt to convert my code into a prototype like so:

const input =
  "Hello, my name is %FIRST% %LAST%, I am %AGE% years old";

String.prototype.applyMagic = function (variableList) {
  const replaceVariable = (s, v) =>
    v.reduce((prev = "", { name, value }) => prev.replace(name, value), s);
  const updatedVariables = variableList.map(({ value, ...rest }) => ({
    ...rest,
    value: replaceVariable(value, variableList)
  }));

  return replaceVariable(this, updatedVariables);
};


console.log(
  input.applyMagic([
    { name: "%FIRST%", value: "John" },
    { name: "%LAST%", value: "Doe" },
    { name: "%AGE%", value: "30" }
  ])
)

Answer 13

Answer №7

Quite detailed version, however if you aim to accomplish it in a single pass, loop through each character and once you encounter the second % (indicating end), proceed with replacing the string.

const variables = [
  { name: "%NAME%", value: "joe" },
  { name: "%EMAIL%", value: "%NAME%@mail.com" },
  { name: "%HOBBY%", value: "tennis" },
];

const inputString = `Hi, my name is %NAME%, I like %HOBBY%, you can contact me at %EMAIL%`;

const cache = variables.reduce((acc, { name, value }) => ({
  ...acc,
  [name]: value,
}), {});

const myReplace = (str) => {
  let newString = "";
  let count = 0;
  let last = 0;
  let i;
  
  for (i = 0; i < str.length; i++) {
    if (str[i] === "%") {
      if (count === 0) {
        newString = `${newString}${str.slice(last, i)}`;
        count += 1;
        last = i;
      } else {
        newString = `${newString}${myReplace(cache[str.slice(last, i + 1)])}`;
        count = 0;
        last = i + 1;
      }
    }
  }
  newString = `${newString}${str.slice(last, i)}`;
  return newString;
};

console.log(myReplace(inputString))

Answer 14

Quite detailed version, however if you aim to accomplish it in a single pass, loop through each character and once you encounter the second % (indicating end), proceed with replacing the string.

const variables = [
  { name: "%NAME%", value: "joe" },
  { name: "%EMAIL%", value: "%NAME%@mail.com" },
  { name: "%HOBBY%", value: "tennis" },
];

const inputString = `Hi, my name is %NAME%, I like %HOBBY%, you can contact me at %EMAIL%`;

const cache = variables.reduce((acc, { name, value }) => ({
  ...acc,
  [name]: value,
}), {});

const myReplace = (str) => {
  let newString = "";
  let count = 0;
  let last = 0;
  let i;
  
  for (i = 0; i < str.length; i++) {
    if (str[i] === "%") {
      if (count === 0) {
        newString = `${newString}${str.slice(last, i)}`;
        count += 1;
        last = i;
      } else {
        newString = `${newString}${myReplace(cache[str.slice(last, i + 1)])}`;
        count = 0;
        last = i + 1;
      }
    }
  }
  newString = `${newString}${str.slice(last, i)}`;
  return newString;
};

console.log(myReplace(inputString))

Swap out values in a string if they match any of the variables in an array

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Transforming a JSON string containing multiple arrays into a JavaScript object

Would it be frowned upon in JavaScript to use "if (somestring in {'oneoption':false, 'secondoption':false})"?

Utilizing an array of objects to import images

There was a lack of dynamic content on the webpage when using the view/template engine (Handlebars)

How does Sizzle JS function?

Improving Performance in JavaScript by Altering Class Properties

Retrieving the value of a basic object

Attempting to extract information from mySQL and convert it into a PHP array

Discover supplementary characters to incorporate into a JavaScript string

Converting a JSONArray to a String in Java

Encountering a discord bot malfunction while on my Ubuntu server

The instance does not have a definition for the property or method "foo" that was referenced during rendering

Passing a single item from a list as a prop in Vue.js

What is the best way to switch content between tabs using ajax and php?

How can I substitute a specific capture group instead of the entire match using a regular expression?

Is it possible to utilize a pre-existing JS "package" with Node.JS?

I am receiving a success message from webpack indicating that the compilation was successful, but I am encountering a blank page in the

Unique loading animations are assigned to each individual page within the Next.js framework

Changing synchronous functions to asynchronous

Does mysql_fetch_array combine mysql_fetch_assoc and mysql_fetch_row functions?