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