Javascript template engine - Free html template system for JavascriptMOTOBIT.COM

Sometimes I need to deliver data from our web site to another site using simple javascript, without jquery and other big libraries and let the destination site full control on the resulting html code, not only css formatting.

For the task I need a django-like template engine, which takes several source data items and table data sets as json data at input and converts the data using simple html template to the resulting htmlcode. The main idea was to get fully functional JavaScript code with less of code and maximum possible functionality.

The data template should look like a simple html code with reference to data items and dataset enclosed in {} brackets:

... and a simple json source data ...

... which creates a result html:

Main code of the Javascript template engine

I created the Javascript engine using simple regular expression for main data/dataset and for column data in the dataset row. The function transforms source html template (t) and json data (d) to resulted html.

Template and json data variants

You can set several datasets and values in the template. There are three values (time, newsfoot, pricefoot) and two datasets (news, prices) in the next template:

and adequate json data:

- You can also refer values using its index and store the row data as unnamed array.

Copyright and use this code

<A
 Href="https://www.motobit.com/tips/detpg_javascript-template-engine/"
 Title="Short, simple code to separate data
	and html template using javascript
	regular expression."
>Javascript template engine - Free html template system for Javascript</A>