Build Your Own JavaScript Templating Engine

Templating engines are essential tools for generating dynamic content, commonly used in web development to render HTML, XML, or other structured data. This challenge asks you to build a simplified templating engine in JavaScript, allowing you to understand the core principles behind these powerful tools. Successfully completing this challenge will demonstrate your understanding of string manipulation, regular expressions, and JavaScript's execution model.

Problem Description

You are tasked with creating a JavaScript function called renderTemplate that takes two arguments: a template string and a data object. The template string will contain placeholders enclosed in double curly braces {{ }}. The data object will contain key-value pairs where the keys correspond to the placeholders in the template string. The renderTemplate function should replace each placeholder in the template string 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 placeholders with their corresponding values.
• The function must handle cases where a placeholder is not found in the data object.
• The function should handle multiple placeholders within the 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 renderTemplate function should return a new string where all placeholders in the template string have been replaced 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.

Edge Cases to Consider:

• Empty template string.
• Empty data object.
• Placeholders with no corresponding values in the data object.
• Nested curly braces (e.g., {{{{}}}}). These should be treated as literal characters and not replaced.
• Placeholders with whitespace around them (e.g., {{ key }}).
• Template strings containing characters other than placeholders.

Examples

Example 1:

Input: template = "Hello, {{name}}!", data = { name: "Alice" }
Output: "Hello, Alice!"
Explanation: The placeholder `{{name}}` is replaced with the value "Alice" from the data object.

Example 2:

Input: template = "The price is {{price}} and the quantity is {{quantity}}.", data = { price: 10, quantity: 5 }
Output: "The price is 10 and the quantity is 5."
Explanation: Both placeholders `{{price}}` and `{{quantity}}` are replaced with their corresponding values.

Example 3:

Input: template = "Hello, {{name}}!  Your age is {{age}}.", data = { name: "Bob" }
Output: "Hello, Bob!  Your age is ."
Explanation: The placeholder `{{name}}` is replaced with "Bob", but `{{age}}` is not found in the data object, so it's replaced with an empty string.

Example 4:

Input: template = "This is a test with {{literal}} and {{nested{{}}}}. ", data = { literal: "value" }
Output: "This is a test with value and {{nested{{}}}}. "
Explanation: `{{literal}}` is replaced, but `{{nested{{}}}}.` is treated as a literal string because it's not a valid placeholder format.

Constraints

• The template string will be a string.
• The data object will be a JavaScript object.
• Placeholder keys will be strings.
• The function must execute in a reasonable time (less than 100ms for typical template strings and data objects).
• The function should not use any external libraries.

Notes

Consider using regular expressions to efficiently find and replace the placeholders. Be mindful of edge cases, especially those involving nested curly braces and whitespace. Think about how to avoid modifying the original template string. A good approach is to use string replacement methods that return a new string. Remember to handle the case where a placeholder is not found in the data object gracefully.