Rivalry2

HTML Diff

3 added 3 removed

Original 2026-01-01

Modified 2026-02-21

1 У языка гипертекстовой разметки веб-страниц <a>HTML</a>и формата данных <a>JSON</a>есть общая черта: оба они помогают структурировать информацию, хотя в веб-разработке их используют для разных задач. HTML необходим для отображения разметки сайтов, а JSON - для обмена данными с сервером.

2 То есть, отправляя с сервера информацию в формате JSON, мы делаем её независимой от формата отображения на устройстве пользователя: он может листать экраны нативного мобильного приложения (где не используется HTML), запрашивать данные из консольной утилиты или смотреть в браузере. Да и для отображения в браузере подчас нужна "многоэтажная" JavaScript-логика, которую в сгенерированный сервером HTML просто не упаковать.

3 Вообще, библиотеки для работы с JSON есть практически в любом современном языке программирования, то есть это универсальный формат. Однако сама аббревиатура JSON изначально является сокращением от JavaScript Object Notation, а потому в JS есть встроенные методы для работы с JSON. Кроме того, вид данных в последнем почти идентичен синтаксису <a>объектов</a>в JavaScript. То есть JavaScript идеально поддерживает свой "дочерний" формат.

4 Итак, многие веб-разработчики предпочитают выдавать по запросу с фронтенда HTML-код, упакованный в JSON, и уже в браузере конвертировать его в обычную HTML-разметку. Так работает и наш сайт -<a>Skillbox Media</a>(мы анализировали это в <a>статье</a>о парсинге данных).

5 - JSON-ответ при подгрузке статей на страницу Skillbox Media "Код" (после нажатия кнопки "Показать ещё")Скриншот: Skillbox MediaТакой же способ подгрузки дополнительных статей в рубриках отдельных стран реализован и на сайте организации "<a>Репортёры без границ</a>". Выберем случайную страну - пусть это будет<a>Италия</a>. При нажатии на кнопку Show more posts загружаются три более старых материала. Если перейти по ссылке в кнопке, то внутри элемента <textarea> мы увидим JSON-вставку с кодом статей:

5 + JSON-ответ при подгрузке статей на страницу Skillbox Media "Код" (после нажатия кнопки "Показать ещё")Скриншот: Skillbox MediaТакой же способ подгрузки дополнительного контента реализован на платформе Stack Overflow. Для примера откроем раздел<a>Newest Questions</a>. Если перейти на следующую страницу (например, на страницу 2), на сайте подгрузятся новые вопросы. А если открыть инструменты разработчика и перейти во вкладку Network, среди запросов вы увидите JSON-файлы с данными о вопросах:

6 - JSON-ответ при подгрузке статей в рубриках стран на сайте организации "Репортёры без границ" (первая часть работы)Скриншот: Skillbox MediaJSON-ответ при подгрузке статей в рубриках стран на сайте организации "Репортёры без границ" (вторая часть работы)Скриншот: Skillbox MediaПроизвести конвертацию HTML в JSON несложно, если знать особенности обоих форматов. Сначала мы кратко разберём эти особенности, а потом напишем небольшое приложение, которое будет конвертировать один формат в другой.

6 + JSON-ответы сервера при переходе между страницами в разделе Newest Questions на сайте Stack OverflowСкриншот: Skillbox MediaПроизвести конвертацию HTML в JSON несложно, если знать особенности обоих форматов. Сначала мы кратко разберём эти особенности, а потом напишем небольшое приложение, которое будет конвертировать один формат в другой.

7 Вспомним, что<a>HTML-разметка</a>сайта состоит из элементов, которые, как правило, состоят из трёх частей: открывающий тег, закрывающий тег и контент:

8 HTML vs. JSONВнутри открывающего тега могут располагаться различные атрибуты в формате attribute="value":

9 HTML vs. JSONJSON устроен иначе: он состоит из набора пар "ключ": "значение". Ключи и значения заключены в кавычки, после ключа следует двоеточие, пары разделены запятыми и упакованы внутрь круглых скобок.

10 В качестве значений в JSON-разметке <a>могут</a>использоваться числа, строки, логические значения, объекты, массивы и null (нам далее пригодится знание этого факта, потому что мы будем создавать пример с объектами и массивами).

11 { "key1": "value", "key2": "value" }Последняя пара не отделяется запятой -<a>висящие запятые (trailing commas)</a>в JSON запрещены.

12 Кажется, что различия ощутимые, но это лишь на первый взгляд: на деле представить HTML-код в формате JSON относительно несложно, следите за руками:

13 Совистика - это наука о совах.{ "p": "Совистика - это наука о совах." }Любой HTML-элемент легко превращается в JSON-пару "ключ": "значение", где ключом выступает название элемента, а значением - его текстовое содержимое или вложенный элемент следующего уровня.

14 Теперь попробуем с помощью JavaScript сделать нечто подобное на примере одной страницы сайта.

15 Процесс упаковки данных в JSON называется сериализацией, а обратный процесс - десериализацией. Перевести HTML-разметку в JSON можно двумя способами:

16 <ul><li>Преобразовать разметку "в лоб", запихнув весь HTML-код в одну пару "ключ": "значение" - то есть как значение ключа <html>, (как на скриншоте разметки Skillbox Media).</li>

17 <li>Написать более сложный вариант JSON, чтобы структура JSON-строки полностью соответствовала структуре HTML-документа.</li>

18 </ul>Выбор способа будет зависеть от ваших задач. Мы же в образовательных целях разберём более сложный, второй способ - это позволит нам опробовать возможности языка JavaScript и сохранить структуру страницы. Возьмём для примера следующий код:

19 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Конвертация HTML в JSON</title> </head> <body> Какой-то абзац. <div> Другой абзац (элемент 3-го уровня) Другой абзац (элемент 2-го уровня) <a href="#">Какая-то ссылка (элемент 3-го уровня).</a> <img src="images/test.png" alt="Тестовое изображение"> </div> <script src="script.js"></script> </body> </html>Здесь есть все базовые составляющие шаблона HTML-страницы: служебные элементы и контент в теле страницы. У некоторых элементов есть атрибуты и вложенные элементы, что тоже нужно учесть при конвертировании.

20 - Вернёмся к типичной ситуации, как на первых скриншотах: каркас страницы статичен, а при подгрузке с сервера меняется только тело, которое и нужно скормить JSON-конвертеру. Следовательно, нас интересует содержимое элемента <body>:

20 + Вернёмся к типичной ситуации, как на первых скриншотах: каркас страницы статичен, а при подгрузке с сервера меняется только тело, которое и нужн�� скормить JSON-конвертеру. Следовательно, нас интересует содержимое элемента <body>:

21 Какой-то абзац. <div> Другой абзац (элемент 3-го уровня) Другой абзац (элемент 2-го уровня) <a href="#">Какая-то ссылка (элемент 3-го уровня).</a> <img src="images/test.png" alt="Тестовое изображение"> </div> <script src="script.js"></script>Сейчас на странице несколько произвольных абзацев и картинка. Наш учебный конвертер будет почти универсальным и сможет упаковать в JSON эти и любые другие HTML-элементы в теле - вплоть до третьего уровня вложенности.

22 Алгоритм будет следующим:

23 <ul><li>Создадим JavaScript-объект для записи HTML-элементов, их атрибутов и содержимого.</li>

24 <li>По очереди запишем в объект все элементы.</li>

25 <li>Преобразуем объект в JSON-формат.</li>

26 </ul>Чуть ниже мы рассмотрим указанные шаги в деталях, но для начала нужно создать два файла:

27 <ul><li>Первый назовём "<a>HTML в JSON.html</a>" (по ссылке - содержимое файла на сервисе Pastebin) и поместим в него собственно страницу для преобразования.</li>

28 <li>Второй будет называться "<a>script.js</a>" (по ссылке - содержимое файла на сервисе Pastebin) - в него мы вынесем написанный на JavaScript конвертер страницы в JSON.</li>

29 </ul>Скрипт будет вызываться после загрузки нашей страницы, поэтому мы поместим в тело HTML-файла элемент <script> со ссылкой на JS-файл (см. первую вставку кода).

30 Теперь рассмотрим пошагово, как будет устроен наш конвертер в файле script.js.

31 function convertHTMLtoJSON() { // Тут будет конвертер }; // Выводим результат через секунду после загрузки исходной страницы setTimeout(convertHTMLtoJSON, 1000);Сначала объявим функцию с понятным названием - "конвертер HTML в JSON". В её теле будет находиться конвертер. После объявления функции заложим её вызов с задержкой в одну секунду с помощью встроенного метода<a>setTimeout()</a>: таким образом, после открытия HTML-файла в браузере мы сначала увидим исходную страницу, а потом она сотрётся и заменится на JSON-строку.

32 Теперь займёмся телом созданной функции и для красоты на каждом шаге её работы будем выводить понятные уведомления в консоль (скриншот с ними будет ниже). Начнём с этого:

33 // Очистка консоли для повторного запуска примера console.clear(); // Показ в консоли названия программы console.log('= КОНВЕРТЕР HTML В JSON ='); // Уведомление в консоль о начале работы конвертера console.log('НАЧАТА СЕРИАЛИЗАЦИЯ HTML-КОДА.');Результаты поиска элементов, их атрибутов и содержимого также будут сопровождаться уведомлениями, чтобы мы не пропустили ничего важного.

34 Мы уже упоминали, что формат JSON похож на объекты в JavaScript. Именно поэтому, следуя алгоритму, создадим объект и запишем в него HTML-элементы.

35 let objectToStringify = new Object(); // Создаём объект для записи элементов и их контента (в конце объект будет преобразован в JSON)После создания объекта начинается главное: цикл перебора и записи элементов и содержимого в объект, и тут самое время поговорить о том, что конкретно мы хотим в итоге получить.

36 Структура JSON-результата будет такой: название элемента первого уровня, потом его атрибуты, затем его содержимое - вложенные элементы или текст. Если содержимое - это вложенные элементы, то внутри будут их названия, атрибуты и содержимое (также вложенные элементы или текст). Каждая часть структуры будет иметь порядковый номер - начиная с нуля - и указание на уровень элемента.

37 К примеру, первый элемент в теле нашей страницы после перевода в JSON должен принять такой вид:

38 { "element0Level1 (порядковый номер 1-го элемента 1-го уровня)": [ { "element0Level1Name (название этого элемента 1-го уровня)": "P" }, { "element0Level1Attributes (атрибуты этого элемента 1-го уровня)": [ { "element0Level1attribute0 (первый атрибут этого элемента 1-го уровня)": [ { "element0Level1attribute0Name (название первого атрибута)": "class" }, { "element0Level1attribute0Value (значение первого атрибута)": "myclass" } ] }, { "element0Level1attribute1 (второй атрибут этого элемента 1-го уровня)": [ { "element0Level1attribute1Name (название второго атрибута)": "style" }, { "element0Level1attribute1Value (значение второго атрибута)": "margin: 1px;" } ] } ] }, { "element0Level1Content (содержимое этого элемента 1-го уровня, в данном случае текст)": "Какой-то абзац." } ], }Переводим на человеческий язык: "элемент 0 (то есть первый - у программистов своя математика) первого уровня, имя P, есть атрибуты. Атрибут 1 class="myclass", атрибут 2 style="margin: 1px;". Содержит текст "Какой-то абзац“".

39 element0Level1 - это ключ первой пары "ключ": "значение", а всё остальное - содержимое значения этой пары, которое представляет собой массив вложенных объектов - объекта с названием элемента, объекта со всеми атрибутами и объекта с содержимым.

40 Следующие элементы 1-го уровня будут упакованы в такие же пары, а элементы 2-го и 3-го уровней повторят ту же структуру во вложениях. Короче, у нас чередуются объекты, вложенные массивы и вложенные в них объекты.

41 Простое объяснение работы JSON-конвертераКадр: сериал "В Филадельфии всегда солнечно"Теперь, когда мы представили себе результат, разберём реализацию. Цикл перебора HTML-элементов должен разобрать их на кусочки - как детальки лего. Находить составляющие элементов помогут следующие свойства:

42 <ul><li><a>tagName</a>найдёт названия элементов;</li>

43 <li><a>attributes</a>отдаст коллекцию атрибутов элемента, а обращения к attributes.name и attributes.value вернут названия и значения отдельных атрибутов;</li>

44 <li>для получения вложенных элементов любого уровня и текста понадобятся свойства <a>children</a>и <a>textContent</a>соответственно.</li>

45 </ul>На каждом из уровней вложенности HTML-элементов мы сначала будем измерять их количество, а потом перебирать с помощью цикла for.

46 // Оценка HTML-элементов 1-го уровня let bodyElemsLength = document.body.children.length; // Считаем количество элементов в bodyЗдесь и далее считаем количество HTML-элементов или атрибутов с помощью свойства<a>length</a>.

47 // Перебор всех HTML-элементов 1-го уровня for (let e = 0; e < bodyElemsLength; e++) {Название переменной e - это просто понятное сокращение от "element". Вы же можете выбрать любое, на свой вкус.

48 Самое простое - записать названия элементов. Для этого обращаемся к коллекции потомков элемента <body> и перебираем их, подставляя следующий порядковый номер элемента e. Затем обращаемся к свойству tagName:

49 // Выбор элемента 1-го уровня let elementLevel1 = document.body.children[e]; // Запись названия элемента 1-го уровня let elementLevel1Name = elementLevel1.tagName; // Выбор названия элемента 1-го уровня console.log('НАЙДЕН ЭЛЕМЕНТ 1-ГО УРОВНЯ <' + elementLevel1Name + '>'); // Уведомление о найденном элементе 1-го уровня objectToStringify['element' + e + 'Level1'] = [{['element' + e + 'Level1Name']: elementLevel1Name}]; // Запись названия элемента 1-го уровня в объектЗдесь и далее мы конструируем понятные названия ключей в квадратных скобках с помощью комбинации текста в кавычках и названий соответствующих переменных.

50 С получением атрибутов ситуация усложняется: сначала нужно проверять их наличие у элемента.

51 // Запись атрибутов элемента 1-го уровня // Проверка элемента 1-го уровня на наличие атрибутов if (elementLevel1.attributes.length > 0) {Реакция конвертера будет отличаться в зависимости от результата проверки. Если атрибуты найдены, нужно сосчитать их количество, перебрать по очереди и красиво записать в нужное место.

52 Для перебора атрибутов у нас отдельный вложенный цикл, где переменная a является сокращением от слова "attribute".

53 // Если атрибуты элемента 1-го уровня найдены let elementLevel1Attributes = elementLevel1.attributes; // Выбор атрибутов элемента 1-го уровня // Объявление массива для структурированной записи атрибутов элемента 1-го уровня let saveAttributes = new Array(); // Перебор и запись в корневой объект objectToStringify атрибутов элемента 1-го уровня for (let a = 0; a < elementLevel1Attributes.length; a++) { // Уведомление о найденном атрибуте элемента 1-го уровня console.log('Атрибут элемента 1-го уровня <' + elementLevel1Name + '>: ' + elementLevel1Attributes[a].name + '=' + elementLevel1Attributes[a].value); let attributeName = elementLevel1Attributes[a].name; // Запись названия атрибута элемента 1-го уровня let attributeValue = elementLevel1Attributes[a].value; // Запись значения атрибута элемента 1-го уровня // Запись названия и значения текущего атрибута элемента 1-го уровня в объект let currentAttribute = { ['element' + e + 'Level1' + 'attribute' + a]: [ { ['element' + e + 'Level1' + 'attribute' + a + 'Name']: attributeName }, { ['element' + e + 'Level1' + 'attribute' + a + 'Value']: attributeValue } ] }; // Сохранение структурированного атрибута элемента 1-го уровня в массив saveAttributes.push(currentAttribute); }; // Запись структурированных атрибутов элемента 1-го уровня из массива в корневой объект objectToStringify objectToStringify['element' + e + 'Level1'][1] = { ['element' + e + 'Level1Attributes']: saveAttributes };Если атрибуты не были найдены, записываем пустое значение.

54 } else { // Если у элемента 1-го уровня нет атрибутов, вывод уведомления в консоль console.log('Элемент 1-го уровня <' + elementLevel1Name + '> не имеет атрибутов.'); // Если у элемента 1-го уровня нет атрибутов, то объект с местом под них оставляем с пустым значением objectToStringify['element' + e + 'Level1'][1] = { ['element' + e + 'Level1Attributes']: '' }; };После атрибутов нужно записать содержимое элемента - то есть текст, вложенные элементы или пустое значение. Для этого нужно измерить количество вложенных элементов, а если их нет, то проверить наличие текста. Это делается следующим образом:

55 // Проверка вида содержимого элемента 1-го уровня // Проверка на наличие элементов 2-го уровня if (elementLevel1.children.length > 0) { // Если элементы 2-го уровня найдены } else if (elementLevel1.children.length == 0) { // Если элементы 2-го уровня не найдены, проверка элемента 1-го уровня на наличие текста или пустого значения if (elementLevel1.textContent) { // Если есть текст } else { // Если содержимого нет }; };После проверки происходит запись найденного содержимого элемента первого уровня:

56 // Запись структурированного содержимого элемента 1-го уровня из массива в корневой объект objectToStringify objectToStringify['element' + e + 'Level1'][2] = { ['element' + e + 'Level1Content']: elementLevel1Content };…если содержимое - это элементы второго уровня.

57 let elementLevel1Text = elementLevel1.textContent; // Выбор текстового контента внутри элемента 1-го уровня console.log('Элемент 1-го уровня <' + elementLevel1Name + '> содержит текст: "' + elementLevel1Text + '"'); // Запись текста элемента 1-го уровня в корневой объект objectToStringify objectToStringify['element' + e + 'Level1'][2] = { ['element' + e + 'Level1Content']: elementLevel1Text };…если содержимое - текст.

58 // Если элемент 1-го уровня не содержит ни вложенных элементов, ни даже текста console.log('Элемент 1-го уровня <' + elementLevel1Name + '> не содержит текста.'); // Если элемент 1-го уровня не имеет содержимого, то объект с местом под содержимое оставляем с пустым значением objectToStringify['element' + e + 'Level1'][2] = { ['element' + e + 'Level1Content']: ''…если нет содержимого.

59 Не будем душнить и бомбить вас кодом дальше: элементы второго и третьего уровней записываются аналогичным образом во время перебора содержимого их родительских элементов первого уровня - это можно увидеть ниже, в финальной версии кода.

60 Для второго и третьего уровней в их собственных циклах for элементы перебираются с помощью переменных e2 и e3 соответственно, а в переборе их атрибутов фигурируют переменные a2 и a3 - всё по аналогии с первым уровнем.

61 Когда циклы перебора/записи в объект элементов всех уровней, их атрибутов и содержимого закончены, мы скармливаем получившийся JavaScript-объект встроенному методу <a>JSON.stringify()</a>для сериализации:

62 let result = JSON.stringify(objectToStringify); // Сериализуем объектПосле этого нужно вывести результат на страницу с помощью команды на перезапись элемента <body> содержимым переменной result:

63 document.body.innerHTML = result; // Заменяем тело страницы на наш JSONИтоговую версию кода можно посмотреть (и даже скопипастить, если лень разбираться) по <a>ссылке</a>. В результате его выполнения наша страница превращается в JSON-строку и принимает следующий вид:

64 {"element0Level1":[{"element0Level1Name":"P"},{"element0Level1Attributes":[{"element0Level1attribute0":[{"element0Level1attribute0Name":"class"},{"element0Level1attribute0Value":"myclass"}]},{"element0Level1attribute1":[{"element0Level1attribute1Name":"style"},{"element0Level1attribute1Value":"margin: 1px;"}]}]},{"element0Level1Content":"Какой-то абзац."}],"element1Level1":[{"element1Level1Name":"DIV"},{"element1Level1Attributes":""},{"element1Level1Content":[{"element0Level2":[{"element0Level2Name":"P"},{"element0Level2Attributes":""},{"element0Level2Content":[{"element0Level3":[{"element0Level3Name":"SPAN"},{"element0Level3Attributes":""},{"element0Level3Content":"Другой абзац (элемент 3-го уровня)"}]}]}]},{"element1Level2":[{"element1Level2Name":"SPAN"},{"element1Level2Attributes":""},{"element1Level2Content":"Другой абзац (элемент 2-го уровня)"}]},{"element2Level2":[{"element2Level2Name":"SPAN"},{"element2Level2Attributes":""},{"element2Level2Content":[{"element0Level3":[{"element0Level3Name":"A"},{"element0Level3Attributes":[{"element0Level3attribute0":[{"element0Level3attribute0Name":"href"},{"element0Level3attribute0Value":"#"}]}]},{"element0Level3Content":"Какая-то ссылка (элемент 3-го уровня)."}]}]}]},{"element3Level2":[{"element3Level2Name":"IMG"},{"element3Level2Attributes":[{"element3Level2attribute0":[{"element3Level2attribute0Name":"src"},{"element3Level2attribute0Value":"images/test.png"}]},{"element3Level2attribute1":[{"element3Level2attribute1Name":"alt"},{"element3Level2attribute1Value":"Тестовое изображение"}]}]},{"element3Level2Content":""}]}]}],"element2Level1":[{"element2Level1Name":"SCRIPT"},{"element2Level1Attributes":[{"element2Level1attribute0":[{"element2Level1attribute0Name":"src"},{"element2Level1attribute0Value":"script.js"}]}]},{"element2Level1Content":""}]}В любом JSON-форматтере можно просмотреть результат в более читабельном виде.

65 Результат конвертации HTML в JSON: вид в JSON-форматтереСкриншот: Skillbox MediaНа всякий случай прогоним результат и через валидатор JSON.

66 Результат конвертации HTML в JSON: вид в валидаторе JSONСкриншот: Skillbox MediaА в консоли - вот такая красота.

67 Результат конвертации HTML в JSON: вид уведомлений в консолиСкриншот: Skillbox MediaМы рассмотрели один из способов превращения HTML-файла в JSON-строку. Вариантов реализации может быть много, поэтому вид кода будет сильно зависеть от ваших задач. Руководствуясь указанным алгоритмом и встроенными методами языка JavaScript, вы сможете самостоятельно реализовать подобный конвертер. А о том, как выполнить обратную конвертацию, мы расскажем в следующей статье.