sujeetkv/template-snippet.js

## template-snippet.js
/**
 * Basic template parser
 */
var TemplateSnippet = function (template) {
    'use strict';
    // var re = /<%([^%>]+)?%>/g;
    // var re = /<%(.+?)%>/g;
    var re = /\{\{(.+?)\}\}/g;
    var snippet = 'var snippet=[];\n', cursor = 0, match;
    var add = function (line, js) {
        if (line != '') {
            if (js) {
                snippet += 'snippet.push(' + line + ');\n'
            } else {
                snippet += 'snippet.push(\'' + line.replace(/'/g, "\\'") + '\');\n';
            }
        }
    };
    while (match = re.exec(template)) {
        add(template.slice(cursor, match.index));
        add(match[1], true);
        cursor = match.index + match[0].length;
    }
    add(template.substr(cursor, template.length - cursor));
    snippet += 'return snippet.join(\'\');';
    var preprocessor = new Function(snippet.replace(/[\r\t\n]/g, ' '));
    var templateFunction = function (data) {
        try {
            return preprocessor.call(data);
        } catch (err) {
            var error = new Error('TemplateSnippetError(' + err.name + '): ' + err.message);
            error.snippet = snippet;
            throw error;
        }
    };
    templateFunction.getTemplate = function () {
        return template;
    };
    templateFunction.getSnippet = function () {
        return snippet;
    };
    return templateFunction;
};

## usage-example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Example</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="template-snippet.js"></script>
<script type="text/javascript">
$(function () {
    var userCardTpl = TemplateSnippet($('#userCard').html());

    var userDataList = [
        {id: 1, name: 'Sujeet', profile: {age: 28}},
        {id: 2, name: 'David', profile: {age: 25}},
    ];

    for (var userData of userDataList) {
        $('#root').append(userCardTpl(userData));
    }
});
</script>
</head>

<body>
<div id="root"></div>

<script type="text/template" id="userCard">
    <div class="user-card" id="user-card-{{ this.id }}">
        <span class="card-title">{{ this.name.toUpperCase() }}</span>
        <span class="user-name">{{ this.name }}</span>
        <span class="user-age">{{ this.profile.age }}</span>
    </div>
</script>
</body>
</html>
	/**
	* Basic template parser
	*/
	var TemplateSnippet = function (template) {
	'use strict';
	// var re = /<%([^%>]+)?%>/g;
	// var re = /<%(.+?)%>/g;
	var re = /\{\{(.+?)\}\}/g;
	var snippet = 'var snippet=[];\n', cursor = 0, match;
	var add = function (line, js) {
	if (line != '') {
	if (js) {
	snippet += 'snippet.push(' + line + ');\n'
	} else {
	snippet += 'snippet.push(\'' + line.replace(/'/g, "\\'") + '\');\n';
	}
	}
	};
	while (match = re.exec(template)) {
	add(template.slice(cursor, match.index));
	add(match[1], true);
	cursor = match.index + match[0].length;
	}
	add(template.substr(cursor, template.length - cursor));
	snippet += 'return snippet.join(\'\');';
	var preprocessor = new Function(snippet.replace(/[\r\t\n]/g, ' '));
	var templateFunction = function (data) {
	try {
	return preprocessor.call(data);
	} catch (err) {
	var error = new Error('TemplateSnippetError(' + err.name + '): ' + err.message);
	error.snippet = snippet;
	throw error;
	}
	};
	templateFunction.getTemplate = function () {
	return template;
	};
	templateFunction.getSnippet = function () {
	return snippet;
	};
	return templateFunction;
	};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Example</title>
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script type="text/javascript" src="template-snippet.js"></script>
	<script type="text/javascript">
	$(function () {
	var userCardTpl = TemplateSnippet($('#userCard').html());

	var userDataList = [
	{id: 1, name: 'Sujeet', profile: {age: 28}},
	{id: 2, name: 'David', profile: {age: 25}},
	];

	for (var userData of userDataList) {
	$('#root').append(userCardTpl(userData));
	}
	});
	</script>
	</head>

	<body>
	<div id="root"></div>

	<script type="text/template" id="userCard">
	<div class="user-card" id="user-card-{{ this.id }}">
	<span class="card-title">{{ this.name.toUpperCase() }}</span>
	<span class="user-name">{{ this.name }}</span>
	<span class="user-age">{{ this.profile.age }}</span>
	</div>
	</script>
	</body>
	</html>