Javascript - Find an replace a part of a string with value from an array

Question

I have an string, but at certain points in the string it has dynamic values. I want to find those points in the string and replace them with values from an array.

Let's say I have:

var array = ['string', 'value'];
var string = 'This is a {1}, and this is a {2}.';

Now I need to figure out a way to replace {1}, with the value of the first index in the array and replace {2} with the value of the second index of the array.

So the string would like this:

This is a string, and this is a value.

This seems so simple, but I am breaking my head on this. I can't find a way to do this easily.

Oriol · Accepted Answer · 2016-02-20 20:41:41Z

5

You can use replace with a regular expression and a function:

string.replace(/{(\d+)}/g, function(match, n) {
  return array[n-1];
});

You can also check n < 1 || n > array.length to provide a fallback value in case the number is out of bounds.

Alternatively, the new ES6 way is using tagged template strings

function tag(strings, ...values) {
  var parts = [];
  for(var i=0; i<strings.length; ++i)
    parts.push(strings[i], array[values[i]-1]);
  return parts.join('');
}
tag`This is a ${1}, and this is a ${2}.`

edited Feb 20, 2016 at 20:41

answered Feb 20, 2016 at 20:30

Oriol

291k71 gold badges459 silver badges535 bronze badges

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

3 Comments

DijkeMark Over a year ago

When I use your first example, the '{' and '}' are still in the string, though the 1 and 2 are replaced properly.

DijkeMark Over a year ago

The match variable contains either '{1}' or '{2}', but only the value itself is replaced and not the brackets.

DijkeMark Over a year ago

Okay, thank you. Now it works. Apparently, somewhere in my code that made the string, it added two {{ and two }}, instead of one. Now it works perfectly.

Thomas · Accepted Answer · 2016-02-20 20:34:51Z

1

like this

string.replace(/\{(\d+)\}/g, function(m, n){
  return array[n-1]
})

answered Feb 20, 2016 at 20:34

Thomas

3,6031 gold badge16 silver badges10 bronze badges

1 Comment

DijkeMark Over a year ago

When I use your first example, the '{' and '}' are still in the string, though the 1 and 2 are replaced properly.

Matías Fidemraizer · Accepted Answer · 2016-02-21 15:20:39Z

1

You can use Array.prototype.reduce:

var StringHelper = {
  format: function(format, args) {
    return args.reduce(function(result, currentReplace, currentReplaceIndex) {
      result = result.replace("{" + (currentReplaceIndex + 1) + "}", args[currentReplaceIndex]);

      return result;
    }, format);
  }
};

var sourceString = "My name is {1} and I'm {2} years old";
var replaceItems = ["Matías", "31"];

var parsedString = StringHelper.format(sourceString, replaceItems);

alert(parsedString);

It's a good alternative to regular expressions, and I'm not absolutely sure if I did a jsPerf test in the right way, but it shows that this approach outperforms the regular expression one.

edited Feb 21, 2016 at 15:20

answered Feb 20, 2016 at 20:34

Matías Fidemraizer

65.1k19 gold badges132 silver badges216 bronze badges

4 Comments

DijkeMark Over a year ago

This also worked for me, though I prefer the accepted answer.

Matías Fidemraizer Over a year ago

@DijkeMark I believe you don't know the power of encapsulation. Check my updated answer which generalizes the solution into an object function.

Matías Fidemraizer Over a year ago

@DijkeMark If you can't use ES6 or above, that simple string formatting function is the closest solution to your issue and as I said, it seems like it outperforms regular expressions. BTW I'll leave my answer for further readers.

DijkeMark Over a year ago

I see, thank you for this explanation. I will keep it in mind for further cases.

Collectives™ on Stack Overflow

Javascript - Find an replace a part of a string with value from an array

3 Answers 3

3 Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related