Hey 👋🏻

My name is Christian, an Agile Developer, living in Trento (IT)

I write good code at Wonderflow

You can follow me on and Github


More about me 🤖




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.


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 :

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