Реалізуйте функцію / клас для генерації HTML.

Повне пояснення

Що це і навіщо

Генерація HTML‑строк дозволяє створювати динамічний контент без рендеру в DOM, що корисно для SSR або генерації шаблонів.

Принцип роботи / алгоритм

Функція приймає шаблон (строку) і об’єкт даних. За допомогою регулярного виразу шукає плейсхолдери {{key}} і замінює їх значеннями з об’єкта.

Реалізація (JS / TS / CSS)

function render(template, data){
  return template.replace(/\{\{(.*?)\}\}/g,(m,k)=>data[k.trim()]||'');
}
const tmpl = '<div>{{title}}</div><p>{{body}}</p>';
console.log(render(tmpl, {title:'Hi', body:'World'}));

Для складних випадків можна використати Handlebars:

const Handlebars = require('handlebars');
const tmpl = Handlebars.compile('<div>{{title}}</div>');
console.log(tmpl({title:'Hi'}));

Тестування

test('renders template', () => {
  const tmpl = '<span>{{name}}</span>';
  expect(render(tmpl, {name:'John'})).toBe('<span>John</span>');
});

Проблеми та edge cases

1. Відсутнє поле – повертається порожній рядок.
2. Неправильний синтаксис – регулярка не збігається, залишає плейсхолдер.
3. Вкладені об’єкти – {{user.name}} не працює без додаткової логіки.
4. Вставка HTML – ризик XSS, треба екранізувати.
5. Масиви – {{#each items}} потребує шаблонізатора.

Оптимізація та продуктивність

Кешувати скомпільований шаблон, щоб уникнути повторного парсингу. Для великих даних використовуйте StringBuilder‑подібний підхід.

Без JS / архітектурні альтернативи

У чистому HTML можна використати <template> і DocumentFragment, а в CSS – content для простих вставок.

Cheatsheet + follow-up

• Коротко: render(tpl, data) → заміна плейсхолдерів.
• Питання: Як обробити вкладені об’єкти без сторонніх бібліотек? Чому важливо екранізувати дані перед вставкою в HTML?