JavaScript find every instance of regex in a string and replace it with different values

Question

I have seen similar questions to this but none that are trying to achieve quite the same thing. I need to find every instance of a regex pattern but replace every instance with a different value. Here is my code:

function replacingText(){
     var names = ["Ethan", "Kyle", "Chase", "Cole"];
     var sentance = 'This is [Cole] and [Chase].'
     var regex = /\[(.*?)\]/gm;
    for(i of names){
    sentance = sentance.replace(regex, i);
    }
    console.log(sentance);
}

This code results in this:

This is Ethan and Ethan.

But I want:

This is Ethan and Kyle.

Really, I just need some way to find each item that is inside of brackets [ ] and replace that item with a unique value and then rebuild the string with the new values. I am not partial to any approach.

Seems more like you want a generic templating solution, although it's unclear what your ultimate goal is. — Dave Newton
– Dave Newton, Commented Jan 27, 2020 at 17:02
Can you elaborate on that a little more. And what more do you need me to explain? My ultimate goal is to replace [Cole] and [Chase] with the first and second items of the array shown in the question, respectively. This will result in a string that reads "This is Ethan and Kyle." — Cole Perry
– Cole Perry, Commented Jan 27, 2020 at 17:05
What if there are more "placeholders" ([Cole], [Chase]) than names? — Andreas
– Andreas, Commented Jan 27, 2020 at 17:09
@ColePerry I'm asking if this explicit example is actually what you're trying to do. It's kind of a nonsense-looking problem, e.g., more like homework than anything real--the implication being that if it's real then it sounds to me like an XY problem. — Dave Newton
– Dave Newton, Commented Jan 27, 2020 at 17:10

dimastr90 · Accepted Answer · 2020-01-27 17:06:27Z

1

Try remove g from regex. It helps

answered Jan 27, 2020 at 17:06

dimastr90

442 bronze badges

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

2 Comments

Cole Perry Over a year ago

What exactly does the g do? Why does removing it make this work? It does work exactly the way I want it to now, but what did that g do that made it not work?

dimastr90 Over a year ago

g replace all occurrences in string. And "This is [Cole] and [Chase]." become "This is Ethan and Ethan." on first iter. Without g regex replace only first occurrence, and stops.

nonopolarity · Accepted Answer · 2020-01-27 17:10:08Z

If seems like you want to find a match, and replace with the first string in the array, and for the next match, then replace it with the second string, etc? You also have to consider the case, what if that array runs out of items.

In the original code, you are replacing everything with the first match and the [ and ] are gone. So you need to replace one, and then go onto the next one:

function replacingText() {
  var names = ["Ethan", "Kyle", "Chase", "Cole"];
  var sentance = 'This is [Cole] and [Chase].'
  var regex = /\[(.*?)\]/m;
  i = 0;
  while (regex.test(sentance) && i < names.length) {
    sentance = sentance.replace(regex, names[i]);
    i++;
  }
  console.log(sentance);
}

replacingText();

Your original code works too, if you replace one occurrence only:

function replacingText() {
  var names = ["Ethan", "Kyle", "Chase", "Cole"];
  var sentance = 'This is [Cole] and [Chase].'
  var regex = /\[(.*?)\]/m;
  for (i of names) {
    sentance = sentance.replace(regex, i);
  }
  console.log(sentance);
}

replacingText();

But then, note that if you have 20 or 200 items in the array, then it will run through the array for every item, even if there is no match.

sney2002 · Accepted Answer · 2020-01-27 17:19:20Z

1

You can pass a function to .replace(), the function should return the replacement value:

function replacingText(){
    var names = ["Ethan", "Kyle", "Chase", "Cole"];
    var sentance = 'This is [Cole] and [Chase].'

    sentance.replace(/\[(.*?)\]/g, function() {
        return names.shift();
    });
}

answered Jan 27, 2020 at 17:19

sney2002

9064 silver badges6 bronze badges

Collectives™ on Stack Overflow

JavaScript find every instance of regex in a string and replace it with different values

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related