Last active
July 10, 2024 13:12
-
-
Save sujeetkv/252480d39ae52e92c380b9317cea00b5 to your computer and use it in GitHub Desktop.
Basic template parser in JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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; | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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