This site has been updated.
Reload to display the latest version?
(click here)

Simple template engine in JavaScript

October 24, 2020

Recently I had a task, that included creating simple templates. Nothing special, just using JavaScript replace placeholders with provided values. Obviously it’s better to have some general solution in place, so next time any change wouldn’t be painful.

Examples of some strings with placeholders:

  • “Hello, {name}!”
  • “The answer is {value}”
  • etc

There is no complicated logic inside of the template. Therefore, I need just an object with values to replace, and some mechanism to find correlation between placeholder name and keys in the values object.

So I came up with following solution:

export type TTemplateData = {
    [key: string]: string,
};

export const templateEngine = (inputString: string, data: TTemplateData) => {
    return inputString
        .replace(
            /{\s*(\w*)\s*}/g,
            (match, key) => {
                return data.hasOwnProperty(key) ? data[key] : '';
            }
        );
};