Simple templating with regular expressions

Let’s say you made a jQuery plugin and want to have an output (like a list of search results), whose aspect and format can be defined by the user.

Theory

The theory is very simple:

With a JSON file/object and the template the user provided you can create a basic templating system.

You have a JSON file/object that contains the data you want to parse (in this example it is a list of articles containing the title, category, description, url and publication date of the article).

Something similar to this:

var data =
[
	{
		'title'			:	'Simple templating with regular expressions',
		'category'		:	'tutorials',
		'description'	:	'some description text',
		'url'			:	'/simple-templating-with-regular-expressions/',
		'pub_date'		:	'12 Oct 2013'
	},
	{
		'title'			:	'Vendor prefixes? No thanks',
		'category'		:	'tutorials',
		'description'	:	'some description text',
		'url'			:	'/vendor-prefixes-no-thanks/',
		'pub_date'		:	'09 Oct 2013'
	}
]

The format will be specified by the user and it is a variable that contains… well the format of the template.

I thought it was a good idea to isolate variables in a template with wrapping {} around them.

A valid template could look like this :

<a href="{url}" title="{description}">{title}</a>

and you’ll probably want to save that into a variable (see code below).

And now what?

I take this example again from my jQuery plugin:

You could loop through the JSON object and replace each occurency of a property inside curly braces with the property that corresponds to the current item of the JSON object.

var template='<a href="{url}" title="{description}">{title}</a>';
for (var i = 0; i < data.length; i++) {
    var obj = data[i];
    output = template;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) {
            var regexp = new RegExp('\{' + key + '\}', 'g');
            output = output.replace(regexp, obj[key]);
        }
    }
    list.append( $(output) );
}

kudos to Todd Motto

update 20/10/2013

Todd Motto improved this idea with a very clever trick using a for in loop and hasOwnProperty to parse the data without errors. At the same time he got rid of the obsolete and redundant properties variable.

See the discussion on Twitter!

update 21/10/2013

Dillon de Voor suggested another solution in the comments. Pretty genius idea, I have to say:

var template='<a href="{url}" title="{description}">{title}</a>';
for (var i = 0; i < data.length; i++) {
    var obj = data[i];
    output = template.replace(/\{(.*?)\}/g, function(match, property) {
    	return obj[property];
	});
}