Heyyy 👋🏻 ! My name is Christian, an Agile Software Developer, living in Trento (IT).
I am currently working at Wonderflow.
You can read more about me.

Simple templating with regular expressions

,
by

Share on Twitter

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.


The code provided in this article follows the same thought when I created the Simple Jekyll Search jQuery plugin: create simple templates with regular expression.

###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];
	});
}

Now this is also the official solution used in Simple Jekyll Search