JQuery - replace one string for another in .load-ed html?

Question

I'm loading an html snippet using

$("#TemplateDump").load("Themes/default.template", function() { processTemplate() })

The html i am loading contains

<div>
`hello ##name##, your age is ##age##. 
your page is <a href="##website##">here</a>
</div>

I need to replace the ## placeholders with "joe","112" and "www.whatever.com". Is there a more jquery way of doing this rather than using straight javascript .replace? Are there any place holder replacement plugins around? using .replace in IE on the url placeholder just doesnt work either. Dont know why. By the way, the templates cant be changed.

Answer 1

try jTemplates or a simpler plugin

Answer 2

Doing a simple templating system in vanilla javascript isn't too hard.

var myValues = {
    name : 'Joe',
    age : '112',
    website: 'http://www.whatever.com'
};
var myString = "hello ##name## ..."; // etc

for (var key in myValues) {
    myString.replace(new RegExp("##" + key + "##", g), myValues[key]);
}

Just make sure you run this script on the HTML before it gets inserted into the document. You might want to use a different AJAX function other than load(), perhaps get()?

$.get(
    'themes/default.template',
    {},
    function (data) {
        data = processTemplate(data);
        $('#templateDump').html(data);
    }
);