Есть ли готовые решения для преобразования JSON в HTML и обратно?
Задача:
- хранить набор полей разной вложенности как схему в JSON
- на основе этой схемы в JSON загружать - создавать различной вложенности поля редактирования, позволяющие создавать по этой схеме отедельный JSON с данными
- на основе первого генерировать разметку, на основе второго - наполнять разметку по соотв. схеме
Возможно по логике кажется похожим на существующие разметки конструкторов в WP, которые ныне состоят разве что из шорткодов или кастомных тегов (разметка Gutenberg WP).
Почти то, что нужно - Editor.js, но мб есть и какие-нибудь другие standalone решения.
Дополнительно
Зачем?
Есть же парсеры html
Ответы:
есть множество готовых решений для преобразования JSON в HTML и обратно.
Для преобразования JSON в HTML можно использовать библиотеки JavaScript, такие как Handlebars.js, Mustache.js, и Underscore.js. Они предоставляют возможность генерации HTML-шаблонов на основе JSON-данных.
Для преобразования HTML в JSON можно использовать библиотеки JavaScript, такие как jQuery, которые предоставляют методы для работы с HTML-документами и преобразования их в JSON-объекты.
Также существуют онлайн-инструменты, такие как https://www.convertjson.com/html-to-json.htm и https://www.convertjson.com/json-to-html.htm, которые позволяют быстро и просто конвертировать HTML и JSON друг в друга.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Готовые решения для преобразования JSON в HTML и обратно есть, но важно уточнить формат. JSON сам по себе не знает, как должен выглядеть HTML. Нужна схема: какие поля становятся заголовками, списками, таблицами, карточками и т.п.
Для JSON → HTML можно использовать шаблонизаторы:
Пример на Handlebars:
const template = Handlebars.compile('<h2>{{title}}</h2><p>{{text}}</p>'); const html = template({ title: 'Заголовок', text: 'Текст' });const template = Handlebars.compile('<h2>{{title}}</h2><p>{{text}}</p>'); const html = template({ title: 'Заголовок', text: 'Текст' });
HTML → JSON сложнее. Если HTML произвольный, его нужно парсить DOMParser/cheerio и вытаскивать нужные элементы:
const root = new DOMParser().parseFromString(html, 'text/html'); const data = { title: root.querySelector('h2')?.textContent || '', text: root.querySelector('p')?.textContent || '' };const root = new DOMParser().parseFromString(html, 'text/html'); const data = { title: root.querySelector('h2')?.textContent || '', text: root.querySelector('p')?.textContent || '' };
Если вам нужен редактор, который хранит контент в JSON, смотрите Editor.js, TipTap/ProseMirror, Slate. Они изначально работают со структурированным документом и умеют рендерить HTML.
Итог: JSON → HTML делается легко через шаблон. HTML → JSON надёжно работает только если HTML имеет предсказуемую структуру.