Simple JavaScript Template Engine
Template engines are invaluable tools for generating dynamic content, separating presentation logic from application code. This challenge asks you to build a basic template engine in JavaScript that allows you to substitute variables within a template string with provided data. This will help you understand how template engines work under the hood and improve your JavaScript string manipulation skills.
Problem Description
You are tasked with creating a JavaScript function called renderTemplate that takes two arguments: a template string and an object containing data to be substituted into the template. The template string will contain placeholders in the format {{variableName}}. The renderTemplate function should replace each placeholder with the corresponding value from the data object. If a placeholder is not found in the data object, it should be replaced with an empty string.
Key Requirements:
- The function must correctly replace all placeholders in the template string with their corresponding values from the data object.
- If a placeholder is not found in the data object, it should be replaced with an empty string.
- The function should handle multiple placeholders within the same template string.
- The function should not modify the original template string.
- The function should return a new string with the placeholders replaced.
Expected Behavior:
The function should return a string where all placeholders have been replaced with their corresponding values. The order of replacement should be consistent.
Edge Cases to Consider:
- Empty template string.
- Empty data object.
- Placeholders with invalid variable names (e.g., starting with a number, containing spaces). While you don't need to validate these, ensure they are handled gracefully (replaced with an empty string).
- Nested placeholders (e.g.,
{{{{variable}}}}). Your engine doesn't need to handle nested placeholders. Simple, single-level placeholders are sufficient. - Placeholders with the same name. The last occurrence in the template should take precedence.
Examples
Example 1:
Input: template = "Hello, {{name}}! You are {{age}} years old.", data = { name: "Alice", age: 30 }
Output: "Hello, Alice! You are 30 years old."
Explanation: The placeholders `{{name}}` and `{{age}}` are replaced with "Alice" and "30" respectively.
Example 2:
Input: template = "My name is {{name}} and I live in {{city}}.", data = { name: "Bob" }
Output: "My name is Bob and I live in ."
Explanation: The placeholder `{{name}}` is replaced with "Bob", while `{{city}}` is replaced with an empty string because it's not in the data object.
Example 3:
Input: template = "The value is {{value}} and again {{value}}.", data = { value: 10 }
Output: "The value is 10 and again 10."
Explanation: The placeholder `{{value}}` is replaced with "10" in both occurrences.
Example 4:
Input: template = "", data = { name: "Charlie", age: 25 }
Output: ""
Explanation: An empty template string should return an empty string.
Constraints
- The template string will consist of alphanumeric characters, spaces, and the placeholder delimiters
{{and}}. - The data object will contain string values.
- The function must complete within a reasonable time (e.g., less than 100ms for typical template sizes). Performance is not a primary focus, but avoid excessively inefficient algorithms.
- The function should be written in standard JavaScript (ES5 or later).
Notes
Consider using regular expressions to find and replace the placeholders. Think about how to efficiently iterate through the template string and the data object. Remember to create a new string rather than modifying the original template. Focus on clarity and correctness first, then consider optimization if needed.