How to use placeholders in jQuery?

Question

I want to create a text template and set in it placeholders and fill this placeholders and use it in my page? like ..

var temp = '<div class="persons">';
temp += '<p> <span class="firstname">First Name :</span> <span> [firstname]</span> </p>';
temp += '<p> <span class="lastname">Last Name :</span> <span> [lastname]</span> </p>';
temp += '<p> <span class="tel">Telephone :</span> <span> [tel]</span> </p>';
temp += '</div>';

and change [firstname], [lastname], [tel] with my values and show in page? or any other idea?

What have you tried? Also, you should take a look at existing JS template engines. — Florian Margaine, Apr 25 '12 at 20:48
Use a sprintf / format type of function: see here http://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format/4673436#4673436 — Dominic, Apr 25 '12 at 20:54

Florian Margaine · Answer 1 · 2012-04-26T08:37:35.073

3

Quick & dirty JS template engine:

// Create a matching object for each of your replacement
var matches = {
    "[firstname]": "fred",
    "[lastname]": "smith",
    "[tel]": "123456789"
}

// Loop through the keys of the object
Object.keys( matches ).forEach( function( key ) {
    // Replace every key with its value
    temp = temp.replace( key, matches[ key ] )
} )

edited Apr 26 '12 at 08:37

answered Apr 25 '12 at 20:55

Florian Margaine

58,730
15
91
116

1

I really like `Object.keys()`. Didn't know about it before. However in order to have an affect you have to store the result from `replace()` since it is not operating on the object itself. See here: http://jsfiddle.net/6vxKB/1/ – nuala Apr 26 '12 at 08:32
1

Oops, my bad, I'm editing for a working solution :). Be aware of `Object.keys` as it's not cross-browser although shimming it is a matter of [a few lines](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/keys) (the same goes for `forEach`). – Florian Margaine Apr 26 '12 at 08:36

score 2 · Answer 2 · answered Apr 25 '12 at 20:50

2

You could simply replace them.

temp.replace("[firstname]", "fred").replace("[lastname]", "smith").replace("[tel]", "123456789");

Not sure if you are using jQuery Templates or not.

answered Apr 25 '12 at 20:50

locrizak

12,192
12
60
80

score 2 · Accepted Answer · answered Apr 25 '12 at 20:53

2

Have you tried .replace() ?

http://jsfiddle.net/KL9kz/

answered Apr 25 '12 at 20:53

nuala

2,681
4
30
50

fedeghe · Answer 4 · 2012-09-18T23:20:26.357

Try something like this, very basic

function replaceall(tpl, o, _p, p_) {
    var pre = _p || '%',
        post = p_ || '%',
       reg = new RegExp(pre + '([A-z0-9]*)' + post, 'g'),
        str;
    return tpl.replace(reg, function (str, $1) {
        return o[$1];
    });
};
var temp = '<div class="persons">'+
        '<p> <span class="firstname">First Name :</span> <span> [firstname]</span> </p>'+
        '<p> <span class="lastname">Last Name :</span> <span> [lastname]</span> </p>'+
        '<p> <span class="tel">Telephone :</span> <span> [tel]</span> </p>'+
    '</div>',
    data = {
        'firstname':'Fede',
        'lastname':'Ghe',
        'tel' : '+00 012 3456789' 
    };
alert(replaceall(temp, data, '\\\[', '\\\]'));

be cafeful to escape Placeholders bounds and adjust inner regexp if needed hope it helps

How to use placeholders in jQuery?

4 Answers4