Skip to content

Instantly share code, notes, and snippets.

@sujeetkv
Last active July 10, 2024 13:12
Show Gist options
  • Save sujeetkv/252480d39ae52e92c380b9317cea00b5 to your computer and use it in GitHub Desktop.
Save sujeetkv/252480d39ae52e92c380b9317cea00b5 to your computer and use it in GitHub Desktop.
Basic template parser in JavaScript
/**
* 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment