Javascript: something like string.format with property names

Question

I wanted to make a method that i could pass a recordset (could just as easily be an general object) with format string to replace values by name. I found this other answer on SO that almost did it: https://stackoverflow.com/a/2534828/359135

function format(str, obj) {
    return str.replace(/\{\s*([^}\s]+)\s*\}/g, function(m, p1, offset, string) {
        return obj[p1]
    })
}

but it does not quite work (i don't think): http://jsfiddle.net/9Jpkv/24/

NOTE: my recordset version would just be:

function format(str, rs) {
    return str.replace(/\{\s*([^}\s]+)\s*\}/g, function(m, p1, offset, string) {
        return rs(p1); //use recordset names accessors instead of object properties
    })
}

I would like to be able to do this without iterating over the properties of the object (or columns of the recordset) like the above code almost manages to do. instead it loks for items between curly braces and tries to find them in teh object properties (or record set columns)

Or actually I am a idiot and the above actually does work!: http://jsfiddle.net/9Jpkv/26/

I was not passing passing in an object!

Loads of stuff out there, one popular project is [php.js](http://phpjs.org/) and something like the command [sprintf](http://phpjs.org/functions/sprintf/) — Xotic750, Jun 16 '15 at 09:02

Vasiliy vvscode Vanchuk · Accepted Answer · 2015-06-16T09:35:28.433

3

function template(str, data) {
  data = data || {};
  Object.keys(data).forEach(function(key) {
   str = str.replace(new RegExp('{{' + key + '}}', 'g'), data[key]);
  });
  return str;
}

Like this? -- it replace all {{name}} to corresponded values from data param

template('<div>{{name1}}</div> <span>{{name2}}</span>', { name1: 'value1', name2: 'value2' })

http://jsbin.com/kefazajude/edit?js,console

or

function template(str, data) {
  data = data || {};

  str.match(/{{(.+?)}}/g).forEach(function(key) {
   str = str.replace(key, data[key.replace('{{','').replace('}}', '')]);
  });
  return str;
}

http://jsbin.com/baxuyateme/edit?js,console

for curly bracket

function template(str, data) {
  data = data || {};

  str.match(/{(.+?)}/g).forEach(function(key) {
   str = str.replace(key, data[key.replace('{','').replace('}', '')]);
  });
  return str;
}

http://jsbin.com/tumobohelo/edit?js,console

edited Jun 16 '15 at 09:35

answered Jun 16 '15 at 08:46

Vasiliy vvscode Vanchuk

7,007
2
21
44

This is great but I would like to start with the values in curly braces and then look for them in the properties rather than iterating over the properties. – Jun 16 '15 at 08:58
Thanks very much.. turns out the example i posted worked but it was me being an idiot. however i prefer your solution as i actually understand how it works and can debug it :D – Jun 16 '15 at 09:25
also you used double curly brackets which i was hoping to switch to but was not confident in regex modification ;) – Jun 16 '15 at 09:26

score 2 · Answer 2 · edited May 23 '17 at 12:15

2

String.format = function() {
    var theString = arguments[0];

    for (var i = 1; i < arguments.length; i++) {
        var regEx = new RegExp("\\{" + (i - 1) + "\\}", "gm");
        theString = theString.replace(regEx, arguments[i]);
    }

    return theString;
}

Use:

var string = String.format('{0}-{1}-{2}', string1, string2, string3);

You should take a look at JavaScript equivalent to printf/string.format, this might be helpful.

edited May 23 '17 at 12:15

Community

1
1

answered Jun 16 '15 at 08:51

codeaholicguy

1,671
1
11
18

Thanks.. the only thing is i would like to use named properties instead of numbers and ideally I would look for the values in curly braces in the properties rather than look for the properties within the curly braces. I will update the question to be more specific – Jun 16 '15 at 08:57

Javascript: something like string.format with property names

2 Answers2