How can I substitute specific words in a string with multiple words from an array?

Question

How can I substitute specific words in a string with multiple words from an array?

I'm faced with a challenge where I need to replace asterisks (*) in a sentence with words from an array. Let's take an example:

let sentence = 'My * is * years old.';
let words = ['dog', 3];

//expected result => My dog is 9 years old.

What's the best way to achieve this without resorting to regex? Also, how should I handle cases where there are more asterisks than elements in the array like so:

let sentence = 'The soldiers marched *, *, *, *.';
let words = ['left', 'right'];

//expected result => The soldiers marched left, right, left, right.

Are there any vanilla JS solutions for this problem?

javascript arrays regex array-splice

Answer 1

Answer №1

To ensure the index stays within bounds, consider using a replacement function that includes an initial index value. The default starting index is set to zero.

One way to manage the index is by utilizing the remainder operator % in conjunction with the array's length.

const
    replace = (string, array, i = 0) =>
        string.replace(/\*/g, _=> array[i++ % array.length]);

console.log(replace('My * is * years old.', ['dog', 3]));
console.log(replace('The soldiers marched *, *, *, *.', ['left', 'right']));

Answer 2

To ensure the index stays within bounds, consider using a replacement function that includes an initial index value. The default starting index is set to zero.

One way to manage the index is by utilizing the remainder operator % in conjunction with the array's length.

const
    replace = (string, array, i = 0) =>
        string.replace(/\*/g, _=> array[i++ % array.length]);

console.log(replace('My * is * years old.', ['dog', 3]));
console.log(replace('The soldiers marched *, *, *, *.', ['left', 'right']));

Answer 3

Answer №2

let statement = 'Her * is * years old.';
let values = ['cat', 7];
let counter = 0;
while (statement.indexOf('*') > -1) {
    statement = statement.replace('*', values[counter++]);
    if (counter >= values.length) counter = 0;
}
console.log(statement);

displays: "Her cat is 7 years old."

Answer 4

let statement = 'Her * is * years old.';
let values = ['cat', 7];
let counter = 0;
while (statement.indexOf('*') > -1) {
    statement = statement.replace('*', values[counter++]);
    if (counter >= values.length) counter = 0;
}
console.log(statement);

displays: "Her cat is 7 years old."

Answer 5

Answer №3

If you're not a fan of regular expressions, here's an alternative approach:

words = ["start", "end"];
"The students ran *, *, *, *.".split("*").map(function (x, i) {
  return i === 0 ? x : words[(i + 1) % words.length] + x;
}).join("");

Step-by-step breakdown:

init  | "The students ran *, *, *, *."
split | ["The students ran ", ", ", ", ", ", ", "."]
i = 0 | ["The students ran ", ", ", ", ", ", ", "."]
i = 1 | ["The students ran ", "start, ", ", ", ", ", "."]
i = 2 | ["The students ran ", "start, ", "end, ", ", ", "."]
i = 3 | ["The students ran ", "start, ", "end, ", "start, ", "."]
i = 4 | ["The students ran ", "start, ", "end, ", "start, ", "end."]
join  | "The students ran start, end, start, end."

Answer 6

If you're not a fan of regular expressions, here's an alternative approach:

words = ["start", "end"];
"The students ran *, *, *, *.".split("*").map(function (x, i) {
  return i === 0 ? x : words[(i + 1) % words.length] + x;
}).join("");

Step-by-step breakdown:

init  | "The students ran *, *, *, *."
split | ["The students ran ", ", ", ", ", ", ", "."]
i = 0 | ["The students ran ", ", ", ", ", ", ", "."]
i = 1 | ["The students ran ", "start, ", ", ", ", ", "."]
i = 2 | ["The students ran ", "start, ", "end, ", ", ", "."]
i = 3 | ["The students ran ", "start, ", "end, ", "start, ", "."]
i = 4 | ["The students ran ", "start, ", "end, ", "start, ", "end."]
join  | "The students ran start, end, start, end."

Answer 7

Answer №4

Here's an alternative way to achieve the same result without using regular expressions:

s = "The soldiers marched *, *, *, *.";
f = Function("words", "var i = 0; return \"" + s.split("*").join(
  "\" + words[(i++) % words.length] + \""
) + "\";");

> | f(["L", "R"])
< | "The soldiers marched L, R, L, R."
> | f(["L", "R"].reverse())
< | "The soldiers marched R, L, R, L."
> | f(["L", "R", "R"])
< | "The soldiers marched L, R, R, L."

However, be cautious of potential malicious code:

s = "The soldiers marched *, *, *, *.";
s = "\", console.log(\"VIRUS ATTACK!!! CALL +XX-XXXXX-XXXXX NOW!!!\"), \"" + s;
f = Function("words", "var i = 0; return \"" + s.split("*").join(
  "\" + words[(i++) % words.length] + \""
) + "\";");

> | f(["L", "R"])
  | VIRUS ATTACK!!! CALL +XX-XXXXX-XXXXX NOW!!!
< | "The soldiers marched L, R, L, R."

Always make sure to sanitize user input:

s = "The soldiers marched *, *, *, *.";
s = "\", alert(\"VIRUS ATTACK!!! CALL +XX-XXXXX-XXXXX NOW!!!\"), \"" + s;
s = s.split("\"").join("\\\""); // may not be completely secure!
f = Function("words", "var i = 0; return \"" + s.split("*").join(
  "\" + words[(i++) % words.length] + \""
) + "\";");

> | f(["L", "R"])
< | "", alert("VIRUS ATTACK!!! CALL +XX-XXXXX-XXXXX NOW!!!"), "The soldiers marched L, R, L, R."

Remember, it's always best to err on the side of caution when handling user input :-|

Answer 8

Here's an alternative way to achieve the same result without using regular expressions:

s = "The soldiers marched *, *, *, *.";
f = Function("words", "var i = 0; return \"" + s.split("*").join(
  "\" + words[(i++) % words.length] + \""
) + "\";");

> | f(["L", "R"])
< | "The soldiers marched L, R, L, R."
> | f(["L", "R"].reverse())
< | "The soldiers marched R, L, R, L."
> | f(["L", "R", "R"])
< | "The soldiers marched L, R, R, L."

However, be cautious of potential malicious code:

s = "The soldiers marched *, *, *, *.";
s = "\", console.log(\"VIRUS ATTACK!!! CALL +XX-XXXXX-XXXXX NOW!!!\"), \"" + s;
f = Function("words", "var i = 0; return \"" + s.split("*").join(
  "\" + words[(i++) % words.length] + \""
) + "\";");

> | f(["L", "R"])
  | VIRUS ATTACK!!! CALL +XX-XXXXX-XXXXX NOW!!!
< | "The soldiers marched L, R, L, R."

Always make sure to sanitize user input:

s = "The soldiers marched *, *, *, *.";
s = "\", alert(\"VIRUS ATTACK!!! CALL +XX-XXXXX-XXXXX NOW!!!\"), \"" + s;
s = s.split("\"").join("\\\""); // may not be completely secure!
f = Function("words", "var i = 0; return \"" + s.split("*").join(
  "\" + words[(i++) % words.length] + \""
) + "\";");

> | f(["L", "R"])
< | "", alert("VIRUS ATTACK!!! CALL +XX-XXXXX-XXXXX NOW!!!"), "The soldiers marched L, R, L, R."

Remember, it's always best to err on the side of caution when handling user input :-|

Answer 9

Answer №5

Exploring characters sequentially:

input = "The soldiers marched *, *, *, *. ";
words = ["up", "down"];
output= ""
for (i = 0, j = 0; i < input.length; i++) {
  output += input[i] !== "*" ? input[i] : (
    words[(j++) % words.length]
  );
}
console.log(output)

As evident from the code above, there exist different approaches to handling string manipulations besides using regular expressions. However, it is crucial to grasp the concept of the modulo operator (%):

0 % 2 = 0 | 0 -> 0
1 % 2 = 1 | 1 -> 1
2 % 2 = 0 | 2 -> 0
3 % 2 = 1 | 3 -> 1
4 % 2 = 0 | 4 -> 0

The cyclic pattern of 0s and 1s depicted by the modulo operation ensures that the result never exceeds the right operand. This principle proves especially handy when needing to cycle through an array multiple times:

abc = ["X", "Y", "Z"]
for (i = 0; i < 2 * abc.length; i++) {
  // j will always stay within the bounds of abc
  j = i % abc.length; // 0, 1, 2, 0, ...
  console.log(i, j, abc[j]);
}

Answer 10

Exploring characters sequentially:

input = "The soldiers marched *, *, *, *. ";
words = ["up", "down"];
output= ""
for (i = 0, j = 0; i < input.length; i++) {
  output += input[i] !== "*" ? input[i] : (
    words[(j++) % words.length]
  );
}
console.log(output)

As evident from the code above, there exist different approaches to handling string manipulations besides using regular expressions. However, it is crucial to grasp the concept of the modulo operator (%):

0 % 2 = 0 | 0 -> 0
1 % 2 = 1 | 1 -> 1
2 % 2 = 0 | 2 -> 0
3 % 2 = 1 | 3 -> 1
4 % 2 = 0 | 4 -> 0

The cyclic pattern of 0s and 1s depicted by the modulo operation ensures that the result never exceeds the right operand. This principle proves especially handy when needing to cycle through an array multiple times:

abc = ["X", "Y", "Z"]
for (i = 0; i < 2 * abc.length; i++) {
  // j will always stay within the bounds of abc
  j = i % abc.length; // 0, 1, 2, 0, ...
  console.log(i, j, abc[j]);
}

How can I substitute specific words in a string with multiple words from an array?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Adjust the formatDate function in the Material UI datepicker

What is the best way to mix up the images in my memory game?

What is the most effective way to compare two arrays of objects in JavaScript?

Learn how to implement a call to 'next()' in Express and Node.js only after successfully creating schemas

A jquery class for styling with CSS

a new approach for creating a conditional function in pointfree fashion

in node.js, virtual machine scripts can import modules using the require function

Utilizing Json data with Jquery for dynamically placing markers on Google Maps

ASP.NET CodeBehind Fails to Recognize Changes in TinyMCE Textarea

Remove the class upon clicking

What is causing the return statement to not function properly in the Mongoose findOne method?

Choose three different images and one corresponding word from a JavaScript array to be displayed individually on the screen in separate div containers

Handling a change event for a mat-datepicker in Angular 7 can be tricky, especially when its value is tied to an optional input parameter. Let's dive into how to

Wait to display the page until all AngularJS directives have finished loading their HTML content

Generate a selection of complementary, triadic, and monochromatic color palettes using just one hex color code

Problem encountered with PDFKit plugin regarding Arabic text rendering

Error: Express is undefined and does not have a property called 'use'

Are $(function() { }) and $(document).ready(function() { }) the same function under the hood?

Adjust the scrollbar color when hovering over a particular div

Seeking a proficient Cloud Code specialist skilled in JavaScript, focused on managing installations and channels