API tools faq
paste
Advertisement
evkpr

Конвертер HTML в JSON (для Skillbox)

evkpr
Jul 4th, 2022
477
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 24.99 KB | None | 0 0
raw download clone embed print report
  1. function convertHTMLtoJSON() {
  2.     // Очистка консоли для повторного запуска примера
  3.     console.clear();
  4.     // Показ в консоли названия программы
  5.     console.log('= КОНВЕРТЕР HTML В JSON =');
  6.     // Уведомление в консоль о начале работы конвертера
  7.     console.log('   НАЧАТА СЕРИАЛИЗАЦИЯ HTML-КОДА.');
  8.     let objectToStringify = new Object(); // Создаём объект для записи элементов и их контента (объект будет преобразован в JSON в конце)
  9.            
  10.     // Оценка HTML-элементов 1-го уровня
  11.     let bodyElemsLength = document.body.children.length; // Считаем количество элементов в body
  12.     console.log('       НА СТРАНИЦЕ НАЙДЕНО ' + bodyElemsLength + ' ЭЛЕМЕНТОВ 1-ГО УРОВНЯ.'); // Уведомление о количестве найденных элементов 1-го уровня
  13.     console.log(document.body.children); // Вывод в консоль найденных элементов 1-го уровня
  14.     console.log('____________________________________________________________________________________________________'); // Добавление отступа после вывода в консоль главной информации
  15.                
  16.     // Перебор всех HTML-элементов 1-го уровня
  17.     for (let e = 0; e < bodyElemsLength; e++) {
  18.            
  19.         // Выбор элемента 1-го уровня
  20.         let elementLevel1 = document.body.children[e];
  21.                
  22.         // Запись названия элемента 1-го уровня
  23.         let elementLevel1Name = elementLevel1.tagName; // Выбор названия элемента 1-го уровня
  24.         console.log('   НАЙДЕН ЭЛЕМЕНТ 1-ГО УРОВНЯ <' + elementLevel1Name + '>'); // Уведомление о найденном элементе 1-го уровня
  25.         objectToStringify['element'+ e + 'Level1'] = [{['element' + e + 'Level1Name']: elementLevel1Name}]; // Запись названия элемента 1-го уровня в объект
  26.                
  27.         // Запись атрибутов элемента 1-го уровня
  28.            
  29.             // Проверка элемента 1-го уровня на наличие атрибутов
  30.             if (elementLevel1.attributes.length > 0) {
  31.                    
  32.                 // Если атрибуты элемента 1-го уровня найдены
  33.                 let elementLevel1Attributes = elementLevel1.attributes; // Выбор атрибутов элемента 1-го уровня
  34.                    
  35.                 // Объявление массива для структурированной записи атрибутов элемента 1-го уровня
  36.                 let saveAttributes = new Array();
  37.                                
  38.                 // Перебор и запись в корневой объект objectToStringify атрибутов элемента 1-го уровня
  39.                 for (let a = 0; a < elementLevel1Attributes.length; a++) {
  40.                    
  41.                     // Уведомление о найденном атрибуте элемента 1-го уровня
  42.                     console.log('       Атрибут элемента 1-го уровня <' + elementLevel1Name + '>: ' + elementLevel1Attributes[a].name + '=' + elementLevel1Attributes[a].value);
  43.                        
  44.                     let attributeName = elementLevel1Attributes[a].name; // Запись названия атрибута элемента 1-го уровня
  45.                     let attributeValue = elementLevel1Attributes[a].value; // Запись значения атрибута элемента 1-го уровня
  46.                        
  47.                     // Запись названия и значения текущего атрибута  элемента 1-го уровня в объект
  48.                     let currentAttribute = {
  49.                         ['element' + e + 'Level1' + 'attribute' + a]: [
  50.                             {
  51.                                 ['element' + e + 'Level1' + 'attribute' + a + 'Name']: attributeName
  52.                             },
  53.                             {
  54.                                 ['element' + e + 'Level1' + 'attribute' + a + 'Value']: attributeValue
  55.                             }
  56.                         ]
  57.                     };
  58.                     // Сохранение структированного атрибута элемента 1-го уровня в массив
  59.                     saveAttributes.push(currentAttribute);
  60.  
  61.                 };
  62.                    
  63.                 // Запись структурированных атрибутов элемента 1-го уровня из массива в корневой объект objectToStringify
  64.                 objectToStringify['element' + e + 'Level1'][1] = {
  65.                     ['element' + e + 'Level1Attributes']: saveAttributes
  66.                 };
  67.                
  68.                    
  69.             } else {
  70.                 // Если у элемента 1-го уровня нет атрибутов, вывод уведомления в консоль
  71.                 console.log('       Элемент 1-го уровня <' + elementLevel1Name + '> не имеет атрибутов.');
  72.                 // Если у элемента 1-го уровня нет атрибутов, то объект с местом под них оставляем с пустым значением
  73.                 objectToStringify['element' + e + 'Level1'][1] = {
  74.                     ['element' + e + 'Level1Attributes']: ''
  75.                 };
  76.             };
  77.                    
  78.         // Запись содержимого элемента 1-го уровня (других элементов или текста)
  79.            
  80.             // Проверка элемента 1-го уровня на наличие вложенных элементов
  81.             if (elementLevel1.children.length > 0) {
  82.                        
  83.                 // Уведомление в консоль о количестве найденных элементов 2-го уровня внутри элемента 1-го уровня
  84.                 console.log('       У элемента <' + elementLevel1Name + '> ' + elementLevel1.children.length + ' вложенных элементов.');
  85.                        
  86.                 // Объявление массива для структурированной записи содержимого элемента 1-го уровня
  87.                 // (элементов 2-го уровня)
  88.                 let elementLevel1Content = new Array();
  89.                        
  90.                 // Перебор элементов 2-го уровня, если они найдены               
  91.                 for (let e2 = 0; e2 < elementLevel1.children.length; e2++) {
  92.                                        
  93.                     let elementLevel2 = elementLevel1.children[e2]; // Выбор элемента 2-го уровня
  94.                            
  95.                     // Объявление массива для структурированной записи текущего элемента 2-го уровня
  96.                     let thisInnerContentLevel2 = new Array();
  97.                            
  98.                     // Запись названия элемента 2-го уровня
  99.                     let elementLevel2Name = elementLevel2.tagName; // Выбор названия элемента 2-го уровня
  100.                     console.log('           НАЙДЕН ЭЛЕМЕНТ 2-ГО УРОВНЯ <' + elementLevel2Name + '>'); // Уведомление о найденном элементе 2-го уровня
  101.                                                        
  102.                     // Запись структурированного названия элемента 2-го уровня
  103.                     let elementLevel2NameSaver = {
  104.                         ['element' + e2 + 'Level2Name']: elementLevel2Name
  105.                     };
  106.                     thisInnerContentLevel2.push(elementLevel2NameSaver);
  107.                                        
  108.                     // Запись атрибутов элемента 2-го уровня
  109.                            
  110.                         // Проверка элемента 2-го уровня на наличие атрибутов
  111.                         if (elementLevel2.attributes.length > 0) {
  112.                                    
  113.                             // Если атрибуты элемента 2-го уровня найдены
  114.                             let elementLevel2Attributes = elementLevel2.attributes; // Выбор атрибутов элемента 2-го уровня
  115.                                    
  116.                             // Объявление массива для структурированной записи атрибутов элемента 2-го уровня
  117.                             let saveAttributes2 = new Array();
  118.                                    
  119.                             // Перебор и запись атрибутов элемента 2-го уровня
  120.                             for (let a2 = 0; a2 < elementLevel2Attributes.length; a2++) {
  121.                                 // Уведомление о найденном атрибуте элемента 2-го уровня
  122.                                 console.log('               Атрибут элемента 2-го уровня <' + elementLevel2Name + '>: ' + elementLevel2Attributes[a2].name + '=' + elementLevel2Attributes[a2].value);
  123.                                        
  124.                                 let attributeName2 = elementLevel2Attributes[a2].name; // Запись названия атрибута элемента 2-го уровня
  125.                                 let attributeValue2 = elementLevel2Attributes[a2].value; // Запись значения атрибута элемента 2-го уровня
  126.                                        
  127.                                 // Запись названия и значения текущего атрибута  элемента 2-го уровня в объект
  128.                                 let currentAttribute2 = {
  129.                                     ['element' + e2 + 'Level2' + 'attribute' + a2]: [
  130.                                         {
  131.                                             ['element' + e2 + 'Level2' + 'attribute' + a2 + 'Name']: attributeName2
  132.                                         },
  133.                                         {
  134.                                             ['element' + e2 + 'Level2' + 'attribute' + a2 + 'Value']: attributeValue2
  135.                                         }
  136.                                     ]
  137.                                 };
  138.                                        
  139.                                 // Сохранение структированного атрибута элемента 2-го уровня в массив
  140.                                 saveAttributes2.push(currentAttribute2);
  141.  
  142.                             };
  143.                                    
  144.                             // Запись структурированных атрибутов элемента 2-го уровня из массива атрибутов элемента 2-го уровня (saveAttributes2)
  145.                             // в массив содержимого элемента 1-го уровня (elemenLevel1Content)
  146.                             // с помощью промежуточного объекта elementLevel2AttributesSaver
  147.                             let elementLevel2AttributesSaver = {
  148.                                 ['element' + e2 + 'Level2Attributes']: saveAttributes2
  149.                             };
  150.                             thisInnerContentLevel2.push(elementLevel2AttributesSaver);
  151.                                                    
  152.                         } else {
  153.                                    
  154.                             // Если у элемента 2-го уровня нет атрибутов, вывод уведомления в консоль
  155.                             console.log('               Элемент 2-го уровня <' + elementLevel2Name + '> не имеет атрибутов.');
  156.                                    
  157.                             // Если у элемента 2-го уровня нет атрибутов, то объект с местом под них оставляем с пустым значением
  158.                             let elementLevel2AttributesSaver = {
  159.                                 ['element' + e2 + 'Level2Attributes']: ''
  160.                             };
  161.                             thisInnerContentLevel2.push(elementLevel2AttributesSaver);
  162.  
  163.                         };
  164.                                
  165.                                    
  166.                     // Запись содержимого элемента 2-го уровня (других элементов или текста)
  167.                                        
  168.                         // Проверка элемента 2-го уровня на наличие вложенных элементов
  169.                         if (elementLevel2.children.length > 0) {
  170.                                            
  171.                             // Уведомление в консоль о количестве найденных элементов 3-го уровня внутри элемента 2-го уровня
  172.                             console.log('               У элемента <' + elementLevel2Name + '> ' + elementLevel2.children.length + ' вложенных элементов.');
  173.                                            
  174.                             // Объявление массива для структурированной записи содержимого элемента 2-го уровня
  175.                             // (элементов 3-го уровня)
  176.                             let elementLevel2Content = new Array();
  177.                                            
  178.                             // Перебор элементов 3-го уровня, если они найдены
  179.                             for (let e3 = 0; e3 < elementLevel2.children.length; e3++) {
  180.                                                
  181.                                 let elementLevel3 = elementLevel2.children[e3]; // Выбор элемента 3-го уровня
  182.                                                
  183.                                 // Объявление массива для структурированной записи текущего элемента 3-го уровня
  184.                                 let thisInnerContentLevel3 = new Array();
  185.                                                
  186.                                 // Запись названия элемента 3-го уровня
  187.                                 let elementLevel3Name = elementLevel3.tagName; // Выбор названия элемента 3-го уровня
  188.                                 console.log('                   НАЙДЕН ЭЛЕМЕНТ 3-ГО УРОВНЯ <' + elementLevel3Name + '>'); // Уведомление о найденном элементе 3-го уровня
  189.                                                
  190.                                 // Запись структурированного названия элемента 3-го уровня
  191.                                 let elementLevel3NameSaver = {
  192.                                     ['element' + e3 + 'Level3Name']: elementLevel3Name
  193.                                 };
  194.                                 thisInnerContentLevel3.push(elementLevel3NameSaver);
  195.                                            
  196.                                 // Запись атрибутов элемента 3-го уровня
  197.                                            
  198.                                     // Проверка элемента 3-го уровня на наличие атрибутов
  199.                                     if (elementLevel3.attributes.length > 0) {
  200.                                                    
  201.                                         // Если атрибуты элемента 2-го уровня найдены
  202.                                         let elementLevel3Attributes = elementLevel3.attributes; // Выбор атрибутов элемента 3-го уровня
  203.                                                        
  204.                                         // Объявление массива для структурированной записи атрибутов элемента 3-го уровня
  205.                                         let saveAttributes3 = new Array();
  206.                                                        
  207.                                         // Перебор и запись атрибутов элемента 3-го уровня
  208.                                         for (let a3 = 0; a3 < elementLevel3Attributes.length; a3++) {
  209.                                            
  210.                                             // Уведомление о найденном атрибуте элемента 3-го уровня
  211.                                             console.log('                       Атрибут элемента 3-го уровня <' + elementLevel3Name + '>: ' + elementLevel3Attributes[a3].name + '=' + elementLevel3Attributes[a3].value);
  212.                                                            
  213.                                             let attributeName3 = elementLevel3Attributes[a3].name; // Запись названия атрибута элемента 3-го уровня
  214.                                             let attributeValue3 = elementLevel3Attributes[a3].value; // Запись значения атрибута элемента 3-го уровня
  215.                                                            
  216.                                             // Запись названия и значения текущего атрибута  элемента 3-го уровня в объект
  217.                                             let currentAttribute3 = {
  218.                                                 ['element' + e3 + 'Level3' + 'attribute' + a3]: [
  219.                                                     {
  220.                                                         ['element' + e3 + 'Level3' + 'attribute' + a3 + 'Name']: attributeName3
  221.                                                     },
  222.                                                     {
  223.                                                         ['element' + e3 + 'Level3' + 'attribute' + a3 + 'Value']: attributeValue3
  224.                                                     }
  225.                                                 ]
  226.                                             };
  227.                                                            
  228.                                             // Сохранение структированного атрибута элемента 3-го уровня в массив
  229.                                             saveAttributes3.push(currentAttribute3);
  230.  
  231.                                         };
  232.                                                    
  233.                                         // Запись структурированных атрибутов элемента 3-го уровня из массива атрибутов элемента 3-го уровня (saveAttributes3)
  234.                                         // в массив элемента 3-го уровня (thisInnerContentLevel3)
  235.                                         // с помощью промежуточного объекта elementLevel3AttributesSaver
  236.                                         let elementLevel3AttributesSaver = {
  237.                                             ['element' + e3 + 'Level3Attributes']: saveAttributes3
  238.                                         };
  239.                                         thisInnerContentLevel3.push(elementLevel3AttributesSaver);
  240.                                                
  241.                                     }  else {
  242.                                    
  243.                                         // Если у элемента 3-го уровня нет атрибутов, вывод уведомления в консоль
  244.                                         console.log('                       Элемент 3-го уровня <' + elementLevel3Name + '> не имеет атрибутов.');
  245.                                                
  246.                                         // Если у элемента 3-го уровня нет атрибутов, то объект с местом под них оставляем с пустым значением
  247.                                         let elementLevel3AttributesSaver = {
  248.                                             ['element' + e3 + 'Level3Attributes']: ''
  249.                                         };
  250.                                         thisInnerContentLevel3.push(elementLevel3AttributesSaver);
  251.  
  252.                                     };
  253.                                    
  254.                                 // Запись любого HTML-содержимого элемента 3-го уровня
  255.                                
  256.                                     // Проверка элемента 3-го уровня на наличие любого HTML-содержимого
  257.                                     if (elementLevel3.innerHTML) {
  258.                                        
  259.                                         let elementLevel3innerHTML = elementLevel3.innerHTML;
  260.                                         console.log('                       Элемент 3-го уровня <' + elementLevel3Name + '> содержит вложения: "' + elementLevel3innerHTML + '"');
  261.                                        
  262.                                         elementLevel3innerHTMLSaver = {
  263.                                             ['element' + e3 + 'Level3Content']: elementLevel3innerHTML
  264.                                         };
  265.                                         thisInnerContentLevel3.push(elementLevel3innerHTMLSaver);
  266.                                        
  267.                                     } else {
  268.                                         console.log('                       Элемент 3-го уровня <' + elementLevel3Name + '> не содержит вложений.');
  269.                                        
  270.                                         // Если элемент 3-го уровня не имеет содержимого, то объект с местом под содержимое оставляем с пустым значением
  271.                                         let elementLevel3EmptyContentSaver = {
  272.                                             ['element' + e3 + 'Level3Content']: ''
  273.                                         };
  274.                                         thisInnerContentLevel3.push(elementLevel3EmptyContentSaver);
  275.                                        
  276.                                     };
  277.                                    
  278.                                 // Запись текущего вложенного элемента 3-го уровня в промежуточный объект
  279.                                 // (содержит объект с порядковым номером и значение-массив из трёх объектов:
  280.                                 // имя, атрибуты, содержимое элемента 3-го уровня)
  281.                                 let elementLevel3Saver = {
  282.                                     ['element' + e3 + 'Level3']: thisInnerContentLevel3
  283.                                 };
  284.                                                
  285.                                 // Запись промежуточного объекта с вложенными элементом 3-го уровня в массив содержимого элемента 2-го уровня
  286.                                 elementLevel2Content.push(elementLevel3Saver);
  287.                                    
  288.                             }; // Конец цикла for для перебора элементов 3-го уровня, если они были найдены
  289.                            
  290.                             // Запись массива всего содержимого элемента 2-го уровня (элементов 3-го уровня)
  291.                             // в промежуточный объект (содержит порядковый номер элемента 2-го уровня, к которому относится контент,
  292.                             // и значение-массив текущего содержимого выбранного элемента 2-го уровня
  293.                             let elementLevel2ContentSaver = {
  294.                                 ['element' + e2 + 'Level2Content']: elementLevel2Content
  295.                             };
  296.                             // Запись промежуточного объекта всего структурированного содержимого элемента 2-го уровня
  297.                             // в массив элемента 2-го уровня
  298.                             thisInnerContentLevel2.push(elementLevel2ContentSaver);
  299.                            
  300.                        
  301.                         // Конец проверки элементов 2-го уровня на наличие вложенных элементов 3-го уровня
  302.                        
  303.                         // Проверка элементов 2-го уровня на наличие текста или отсутствия вложений
  304.                         } else if (elementLevel2.children.length == 0) {
  305.                                        
  306.                             // Проверка элемента 2-го уровня на наличие текста, если вложенных элементов нет
  307.                             console.log('               У элемента 2-го уровня <' + elementLevel2Name + '> нет вложенных элементов. Поиск текста.');
  308.                                            
  309.                             if (elementLevel2.textContent) {
  310.                                 let elementLevel2Text = elementLevel2.textContent; // Выбор текстового контента внутри элемента 2-го уровня
  311.                                 console.log('               Элемент 2-го уровня <' + elementLevel2Name + '> содержит текст: "' + elementLevel2Text + '"');
  312.                                                
  313.                                 // Запись текста элемента 2-го уровня
  314.                                 let elementLevel2TextSaver = {
  315.                                     ['element' + e2 + 'Level2Content']: elementLevel2Text
  316.                                 };
  317.                                 thisInnerContentLevel2.push(elementLevel2TextSaver);
  318.                                                
  319.                             } else {
  320.                                                
  321.                                 // Если элемент 2-го уровня не содержит ни вложенных элементов, ни даже текста
  322.                                 console.log('               Элемент 2-го уровня <' + elementLevel2Name + '> не содержит текста.');
  323.                                                
  324.                                 // Если элемент 2-го уровня не имеет содержимого, то объект с местом под содержимое оставляем с пустым значением
  325.                                 let elementLevel2EmptyContentSaver = {
  326.                                     ['element' + e2 + 'Level2Content']: ''
  327.                                 };
  328.                                 thisInnerContentLevel2.push(elementLevel2EmptyContentSaver);
  329.                                                
  330.                             };
  331.                        
  332.                         };
  333.                        
  334.                         // Запись всех вложенных элементов 2-го уровня в промежуточный объект
  335.                         let elementLevel2Saver = {
  336.                             ['element' + e2 + 'Level2']: thisInnerContentLevel2
  337.                         };
  338.                                    
  339.                         // Запись промежуточного объекта с вложенными элементами 2-го уровня в массив содержимого элемента 1-го уровня
  340.                         elementLevel1Content.push(elementLevel2Saver);
  341.                        
  342.                 }; // Конец цикла for для перебора элементов 2-го уровня, если они были найдены
  343.                            
  344.                 // Запись структурированного содержимого элемента 1-го уровня из массива в корневой объект objectToStringify
  345.                 objectToStringify['element' + e + 'Level1'][2] = {
  346.                     ['element' + e + 'Level1Content']: elementLevel1Content
  347.                 };
  348.                    
  349.             } else if (elementLevel1.children.length == 0) {
  350.                    
  351.                 // Проверка элемента 1-го уровня на наличие текста, если вложенных элементов нет
  352.                 console.log('       У элемента 1-го уровня <' + elementLevel1Name + '> нет вложенных элементов. Поиск текста.');
  353.                    
  354.                 if (elementLevel1.textContent) {
  355.                     let elementLevel1Text = elementLevel1.textContent; // Выбор текстового контента внутри элемента 1-го уровня
  356.                     console.log('       Элемент 1-го уровня <' + elementLevel1Name + '> содержит текст: "' + elementLevel1Text + '"');
  357.                        
  358.                     // Запись текста элемента 1-го уровня в корневой объект objectToStringify
  359.                     objectToStringify['element' + e + 'Level1'][2] = {
  360.                         ['element' + e + 'Level1Content']: elementLevel1Text
  361.                     };
  362.                        
  363.                 } else {
  364.                        
  365.                     // Если элемент 1-го уровня не содержит ни вложенных элементов, ни даже текста
  366.                     console.log('       Элемент 1-го уровня <' + elementLevel1Name + '> не содержит текста.');
  367.                            
  368.                     // Если элемент 1-го уровня не имеет содержимого, то объект с местом под содержимое оставляем с пустым значением
  369.                     objectToStringify['element' + e + 'Level1'][2] = {
  370.                         ['element' + e + 'Level1Content']: ''
  371.                     };
  372.                 };
  373.                
  374.             };
  375.     };
  376.                
  377.     // Вывод результата конвертации HTML в JSON
  378.     let result = JSON.stringify(objectToStringify); // Сериализуем объект
  379.     document.body.innerHTML = result; // Заменяем тело страницы на наш JSON
  380.     // Добавление отступа перед уведомлением в консоль о завершении работы конвертера
  381.     console.log('____________________________________________________________________________________________________');
  382.     // Уведомление в консоль о завершении работы конвертера
  383.     console.log('СЕРИАЛИЗАЦИЯ HTML-КОДА ЗАВЕРШЕНА.');
  384. };
  385.        
  386. setTimeout(convertHTMLtoJSON, 1000); // Выводим результат через секунду после загрузки исходной страницы
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!