Войти Регистрация
Фронтенд

53. Карточка товара Ozon из дерева в HTML-строку

Средняя

Карточку товара Ozon рендерят на сервере из дерева. Узел — либо строка (текст), либо объект {tag, attrs, children}; attrs и children могут отсутствовать. Название и отзывы пишут продавцы и покупатели, поэтому в тексте бывают <script>, кавычки и &.

Напишите toHtml(node). В тексте экранируются &, <, >; в значениях атрибутов — ещё и ". Атрибуты выводятся в порядке ключей объекта, значение — в двойных кавычках. true — атрибут без значения (disabled), false, null и undefined — атрибут не выводится. Числа выводятся как есть.

img, br, input, meta и hr — пустые элементы: без закрывающего тега, дети не выводятся. Остальные теги закрываются всегда, даже без детей. Пробелов и переносов между узлами нет.

В работе: Продавец назвал товар «Кабель <b>USB-C</b> 2 м & 60 Вт» — на витрине это должно быть текстом, а не жирным шрифтом.

Пример 1: карточка с ценой

Аргументы теста
{"tag": "div", "attrs": {"class": "tile", "data-sku": 1408823}, "children": [{"tag": "img", "attrs": {"src": "/c/1408823.jpg", "alt": "Кабель"}}, {"tag": "span", "attrs": {"class": "price"}, "children": ["1 290 ₽"]}]}
Ожидается
"<div class=\"tile\" data-sku=\"1408823\"><img src=\"/c/1408823.jpg\" alt=\"Кабель\"><span class=\"price\">1 290 ₽</span></div>"

Пример 2: текст продавца экранируется

Аргументы теста
{"tag": "h1", "children": ["Кабель <b>USB-C</b> 2 м & 60 Вт"]}
Ожидается
"<h1>Кабель &lt;b&gt;USB-C&lt;/b&gt; 2 м &amp; 60 Вт</h1>"
Как проверяем Объявите toHtml — тест вызывает её сам. Таймеры и Date в тестах ненастоящие: время идёт по команде теста, поэтому setTimeout на 5 секунд проверяется мгновенно. Тестов 9: 2 открыты выше, остальные приходят после старта подхода. Лимит — 2 с на тест.
function toHtml(node) // → string
деревьясериализацияэкранированиеXSS

Источник: на задачах Ozon: серверный рендер карточки товара. Условие пересказано своими словами.