Last active
May 31, 2025 10:19
-
-
Save raohmaru/c748ed5ec35429a05db97c229ae2bd56 to your computer and use it in GitHub Desktop.
Mini template engine in JavaScript
This file contains hidden or 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
/** | |
* Mini template engine. Parses variables (w/o dot notation) and does not delete undefined variable expressions. | |
* @param {string} expr - String expression with {{variables}} to interpolate. | |
* @param {RegExp} [regex] - Custom regex to match variables. By default it matches double curly braces `{{variables}}`. | |
* @returns {(data:Object|string[]) => void} - A function that accepts an object or an array as argument to interpolate the template variables. | |
* @example | |
* const templateObj = parseTemplate('{{a}} {{b.c}}'); | |
* template({a: 'hello', b: {c:'world'}}); // "hello world" | |
* | |
* const templateArr = parseTemplate('{{}} {{}}'); | |
* templateArr(["hello", "world"]); // "hello world" | |
* | |
* const templateArrIndex = parseTemplate('{{0}} {{1}}'); | |
* templateArrIndex(["hello", "world"]); // "hello world" | |
* | |
* parseTemplate('{{name}}')(); // "{{name}}" | |
*/ | |
const parseTemplate = (expr, regex = /\{\{([^}]*)}}/g) => { | |
return (data) => { | |
let i = 0; | |
return expr.replace(regex, (s, p1) => { | |
if (Array.isArray(data)) { | |
return data[p1 || i++]; | |
} | |
// Get property of object using a string with dot notation | |
return p1.split('.').reduce((o, i) => o[i] ?? s, data || {}); | |
}) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment