Конвертируем HTML в JSON + JS

Онлайн инструмент позволяет преобразовать HTML-код в JSON, генерирует HTML на основе JSON и создаёт готовый JavaScript для управления элементами. Инструмент автоматически обрабатывает введённый HTML и отображает результаты в соответствующих полях.

Инструкция по использованию инструмента

Ввод HTML-кода

Введите HTML-код в поле "Введите HTML код здесь...". Инструмент автоматически преобразует его в JSON, сгенерирует HTML и JavaScript.

<div class="example">
 <h1>Привет, мир!</h1>
 <p>Это пример HTML-кода.</p>
</div>

Просмотр JSON

После ввода HTML-кода, в поле "JSON будет здесь..." появится JSON-представление вашего HTML.

{
 "tag": "div",
 "attributes": {
 "class": "example"
 },
 "children": [
 {
 "tag": "h1",
 "attributes": {},
 "children": [
 "Привет, мир!"
 ]
 },
 {
 "tag": "p",
 "attributes": {},
 "children": [
 "Это пример HTML-кода."
 ]
 }
 ]
}

Просмотр сгенерированного HTML

В поле "Сгенерированный HTML будет здесь..." отобразится HTML, созданный на основе JSON.

<div id="myelement"></div>

Просмотр сгенерированного JavaScript

В поле "JavaScript для управления будет здесь..." появится JavaScript-код, который можно использовать для управления элементами.

document.addEventListener('DOMContentLoaded', function() {
 function createElementFromJson(json) {
 if (typeof json === 'string') {
 return document.createTextNode(json);
 }
 const element = document.createElement(json.tag);
 for (const [key, value] of Object.entries(json.attributes)) {
 element.setAttribute(key, value);
 }
 for (const child of json.children) {
 element.appendChild(createElementFromJson(child));
 }
 return element;
 }
 const container = document.getElementById('myelement');
 if (container) {
 const element = createElementFromJson({
 "tag": "div",
 "attributes": {
 "class": "example"
 },
 "children": [
 {
 "tag": "h1",
 "attributes": {},
 "children": [
 "Привет, мир!"
 ]
 },
 {
 "tag": "p",
 "attributes": {},
 "children": [
 "Это пример HTML-кода."
 ]
 }
 ]
 });
 container.appendChild(element);
 } else {
 console.error('Контейнер не найден');
 }
});

Кнопки управления

Используйте кнопки "Копировать JSON", "Копировать HTML" и "Копировать JavaScript", чтобы скопировать содержимое соответствующих полей в буфер обмена.

Нажмите кнопку "Сбросить всё", чтобы очистить все поля.

Дополнительный пример использования

Инструмент способен обрабатывать более сложные элементы, например возьмём для примера элемент: progress.

Возьмём для обработки элемент progress и добавим его в поле ввода HTML.

<div class="progress">
 <div class="progress-bar progress-bar-success" style="width: 35%">
 <span class="sr-only">35% Complete (success)</span>
 </div>
 <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
 <span class="sr-only">20% Complete (warning)</span>
 </div>
 <div class="progress-bar progress-bar-danger" style="width: 10%">
 <span class="sr-only">10% Complete (danger)</span>
 </div>
</div>

Добавляем сгенерированные HTML и JavaScript коды на странице.

const element = document.createElement(json.tag);
 for (const [key, value] of Object.entries(json.attributes)) {
 element.setAttribute(key, value);
 }
 for (const child of json.children) {
 element.appendChild(createElementFromJson(child));
 }
 return element;
 }

// Вставка сгенерированного элемента в DOM
 const container = document.getElementById('myelement');
 if (container) {
 const element = createElementFromJson({
 "tag": "div",
 "attributes": {
 "class": "progress"
 },
 "children": [
 {
 "tag": "div",
 "attributes": {
 "class": "progress-bar progress-bar-success",
 "style": "width: 35%"
 },
 "children": [
 {
 "tag": "span",
 "attributes": {
 "class": "sr-only"
 },
 "children": [
 "35% Complete (success)"
 ]
 }
 ]
 },
 {
 "tag": "div",
 "attributes": {
 "class": "progress-bar progress-bar-warning progress-bar-striped",
 "style": "width: 20%"
 },
 "children": [
 {
 "tag": "span",
 "attributes": {
 "class": "sr-only"
 },
 "children": [
 "20% Complete (warning)"
 ]
 }
 ]
 },
 {
 "tag": "div",
 "attributes": {
 "class": "progress-bar progress-bar-danger",
 "style": "width: 10%"
 },
 "children": [
 {
 "tag": "span",
 "attributes": {
 "class": "sr-only"
 },
 "children": [
 "10% Complete (danger)"
 ]
 }
 ]
 }
 ]
});
 container.appendChild(element);
 } else {
 console.error('Контейнер не найден');
 }
 }); 
</script>

Таким образом можно любой HTML-элемент обработать в инструменте, создав из него JSON-элемент. Отдельный JSON-код вы можете использовать для любых действий.

Ещё инструменты

Версия: 18.03.25

BootstrapTema