David Walker

Tiny Template Engine Pattern That You Can Remember

by David Walker

Edit: Updated with working code samples for JavaScript and C#.  See also string interpolation.

Let's say you have a bunch of property values and you need a simple template engine.  Here is a fairly simple pattern that you can memorize to make a templating function for almost any language.

  1.  Determine your delimiters.  The pattern I am outlining only works with distinct start and end delimiters.  For example, "{{" for start and "}}" for end.  Your template will resemble
"The quick {% raw %}{{Color}} {{Animal}}{% endraw %} jumped over the lazy dog"

and that would yield the output of "The quick brown fox jumped over the lazy dog" for the input of {Animal: fox, Color: brown}.  Any delimiters will work as long as they are not contained in your template string (adding escaping is an exercise for some other time.  For now, just don't use delimiters that appear in your template text.)

2.  Split the template on the start delimiter.  Store the resulting array of fragments in a variable.

3.  Add the first item in the array of fragments to the return value.  This is never part of a property name.

4.  Loop through the remaining fragments.  Split the fragment on the end delimiter.  The first fragment section is the name of the property to look up, so look up the property that shares a name with the first fragment.  Add the property value to the return value and then add the 2nd fragment section to the return value.

5.  Return the return value.

Here is some pseudo-code demonstrating the concepts

var returnValue = "";

var templateFragments = template.Split({% raw %}"{{"{% endraw %});

returnValue += templateFragments[0];

for (var i = 1; i < templateFragments.Length; i++) {
     var fragmentSections = templateFragments[i].Split({% raw %}"}}"{% endraw %}, 2);
     returnValue += properties[fragmentSections[0]];
     returnValue += fragmentSections[1];
}

return returnValue;

Note that the for loop starts with index 1 to skip over item 0 that is returned separately.
The property value lookup could be any lookup that can look up string data based on the a string key.

Working JavaScript Version (JSFiddle)
Working C# Version (DotNetFiddle)

My goal was to break down the process to something a developer could remember and use quickly and easily in a pinch.  It doesn't do escaping or anything fancy but it is quick and simple.

Reddit user gynnihanssen posted a link to a regex variant  https://dotnetfiddle.net/WojntT which I think could meet that goal also.

John Resig has a nice micro-templating function that caches a reusable templating function at http://ejohn.org/blog/javascript-micro-templating/  It doesn't necessarily meet my quick, simple, and memorable design goal but it is pretty succint and should offer some nice performance and memory usage gains.

Phil Haack has a more involved version that looks at escaping and edge cases at
http://haacked.com/archive/2009/01/04/fun-with-named-formats-string-parsing-and-edge-cases.aspx/

Scott Hanselman has a fairly involved ToString function that does string interpolation.  http://www.hanselman.com/blog/ASmarterOrPureEvilToStringWithExtensionMethods.aspx

David Walker

David Walker is a Software Consultant, Photographer, and Digital Artist based out of Orlando, Florida, USA.

He believes in secure reliable software and productive happy teams.

More ...