API tools faq
paste
Advertisement
Alexislls

Convertidor HTML a JSON

Alexislls
Jun 14th, 2025
162
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 19.84 KB | Source Code | 0 0
raw download clone embed print report
  1. function convertHTMLtoJSON() {
  2.     // Limpieza de la consola para repetir el lanzamiento del ejemplo
  3.     console.clear();
  4.     // Mostrar en la consola el nombre del programa
  5.     console.log('= CONVERTIDOR HTML A JSON =');
  6.     // Notificación en la consola sobre el inicio del trabajo del convertidor
  7.     console.log('   INICIADA LA SERIALIZACIÓN DEL CÓDIGO HTML.');
  8.     let objectToStringify = new Object(); // Creamos un objeto para registrar elementos y su contenido (el objeto será convertido a JSON al final)
  9.            
  10.     // Evaluación de los elementos HTML de nivel 1
  11.     let bodyElemsLength = document.body.children.length; // Contamos la cantidad de elementos en el body
  12.     console.log('       SE ENCONTRARON ' + bodyElemsLength + ' ELEMENTOS DE NIVEL 1 EN LA PÁGINA.'); // Notificación sobre la cantidad de elementos de nivel 1 encontrados
  13.     console.log(document.body.children); // Mostrar en la consola los elementos de nivel 1 encontrados
  14.     console.log('____________________________________________________________________________________________________'); // Agregar un separador después de mostrar la información principal en la consola
  15.                
  16.     // Recorrer todos los elementos HTML de nivel 1
  17.     for (let e = 0; e < bodyElemsLength; e++) {
  18.            
  19.         // Selección del elemento de nivel 1
  20.         let elementLevel1 = document.body.children[e];
  21.                
  22.         // Registro del nombre del elemento de nivel 1
  23.         let elementLevel1Name = elementLevel1.tagName; // Selección del nombre del elemento de nivel 1
  24.         console.log('   ENCONTRADO ELEMENTO DE NIVEL 1 <' + elementLevel1Name + '>'); // Notificación sobre el elemento de nivel 1 encontrado
  25.         objectToStringify['element'+ e + 'Level1'] = [{['element' + e + 'Level1Name']: elementLevel1Name}]; // Registro del nombre del elemento de nivel 1 en el objeto
  26.                
  27.         // Registro de los atributos del elemento de nivel 1
  28.            
  29.             // Verificación del elemento de nivel 1 para la presencia de atributos
  30.             if (elementLevel1.attributes.length > 0) {
  31.                    
  32.                 // Si se encontraron atributos del elemento de nivel 1
  33.                 let elementLevel1Attributes = elementLevel1.attributes; // Selección de los atributos del elemento de nivel 1
  34.                    
  35.                 // Declaración de un array para el registro estructurado de los atributos del elemento de nivel 1
  36.                 let saveAttributes = new Array();
  37.                                
  38.                 // Recorrido y registro en el objeto raíz objectToStringify de los atributos del elemento de nivel 1
  39.                 for (let a = 0; a < elementLevel1Attributes.length; a++) {
  40.                    
  41.                     // Notificación sobre el atributo encontrado del elemento de nivel 1
  42.                     console.log('       Atributo del elemento de nivel 1 <' + elementLevel1Name + '>: ' + elementLevel1Attributes[a].name + '=' + elementLevel1Attributes[a].value);
  43.                        
  44.                     let attributeName = elementLevel1Attributes[a].name; // Registro del nombre del atributo del elemento de nivel 1
  45.                     let attributeValue = elementLevel1Attributes[a].value; // Registro del valor del atributo del elemento de nivel 1
  46.                        
  47.                     // Registro del nombre y valor del atributo actual del elemento de nivel 1 en el objeto
  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.                     // Guardar el atributo estructurado del elemento de nivel 1 en el array
  59.                     saveAttributes.push(currentAttribute);
  60.  
  61.                 };
  62.                    
  63.                 // Registro de los atributos estructurados del elemento de nivel 1 desde el array en el objeto raíz objectToStringify
  64.                 objectToStringify['element' + e + 'Level1'][1] = {
  65.                     ['element' + e + 'Level1Attributes']: saveAttributes
  66.                 };
  67.                
  68.                    
  69.             } else {
  70.                 // Si el elemento de nivel 1 no tiene atributos, mostrar notificación en la consola
  71.                 console.log('       El elemento de nivel 1 <' + elementLevel1Name + '> no tiene atributos.');
  72.                 // Si el elemento de nivel 1 no tiene atributos, el objeto con espacio para ellos se deja con valor vacío
  73.                 objectToStringify['element' + e + 'Level1'][1] = {
  74.                     ['element' + e + 'Level1Attributes']: ''
  75.                 };
  76.             };
  77.                    
  78.         // Registro del contenido del elemento de nivel 1 (otros elementos o texto)
  79.            
  80.             // Verificación del elemento de nivel 1 para la presencia de elementos anidados
  81.             if (elementLevel1.children.length > 0) {
  82.                        
  83.                 // Notificación en la consola sobre la cantidad de elementos de nivel 2 encontrados dentro del elemento de nivel 1
  84.                 console.log('       El elemento <' + elementLevel1Name + '> tiene ' + elementLevel1.children.length + ' elementos anidados.');
  85.                        
  86.                 // Declaración de un array para el registro estructurado del contenido del elemento de nivel 1
  87.                 // (elementos de nivel 2)
  88.                 let elementLevel1Content = new Array();
  89.                        
  90.                 // Recorrido de los elementos de nivel 2, si se encuentran             
  91.                 for (let e2 = 0; e2 < elementLevel1.children.length; e2++) {
  92.                                        
  93.                     let elementLevel2 = elementLevel1.children[e2]; // Selección del elemento de nivel 2
  94.                            
  95.                     // Declaración de un array para el registro estructurado del elemento actual de nivel 2
  96.                     let thisInnerContentLevel2 = new Array();
  97.                            
  98.                     // Registro del nombre del elemento de nivel 2
  99.                     let elementLevel2Name = elementLevel2.tagName; // Selección del nombre del elemento de nivel 2
  100.                     console.log('           ENCONTRADO ELEMENTO DE NIVEL 2 <' + elementLevel2Name + '>'); // Notificación sobre el elemento de nivel 2 encontrado
  101.                                                        
  102.                     // Registro del nombre estructurado del elemento de nivel 2
  103.                     let elementLevel2NameSaver = {
  104.                         ['element' + e2 + 'Level2Name']: elementLevel2Name
  105.                     };
  106.                     thisInnerContentLevel2.push(elementLevel2NameSaver);
  107.                                        
  108.                     // Registro de los atributos del elemento de nivel 2
  109.                            
  110.                         // Verificación del elemento de nivel 2 para la presencia de atributos
  111.                         if (elementLevel2.attributes.length > 0) {
  112.                                    
  113.                             // Si se encontraron atributos del elemento de nivel 2
  114.                             let elementLevel2Attributes = elementLevel2.attributes; // Selección de los atributos del elemento de nivel 2
  115.                                    
  116.                             // Declaración de un array para el registro estructurado de los atributos del elemento de nivel 2
  117.                             let saveAttributes2 = new Array();
  118.                                    
  119.                             // Recorrido y registro de los atributos del elemento de nivel 2
  120.                             for (let a2 = 0; a2 < elementLevel2Attributes.length; a2++) {
  121.                                 // Notificación sobre el atributo encontrado del elemento de nivel 2
  122.                                 console.log('               Atributo del elemento de nivel 2 <' + elementLevel2Name + '>: ' + elementLevel2Attributes[a2].name + '=' + elementLevel2Attributes[a2].value);
  123.                                        
  124.                                 let attributeName2 = elementLevel2Attributes[a2].name; // Registro del nombre del atributo del elemento de nivel 2
  125.                                 let attributeValue2 = elementLevel2Attributes[a2].value; // Registro del valor del atributo del elemento de nivel 2
  126.                                        
  127.                                 // Registro del nombre y valor del atributo actual del elemento de nivel 2 en el objeto
  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.                                 // Guardar el atributo estructurado del elemento de nivel 2 en el array
  140.                                 saveAttributes2.push(currentAttribute2);
  141.  
  142.                             };
  143.                                    
  144.                             // Registro de los atributos estructurados del elemento de nivel 2 desde el array de atributos del elemento de nivel 2 (saveAttributes2)
  145.                             // en el array de contenido del elemento de nivel 1 (elemenLevel1Content)
  146.                             // usando un objeto intermedio elementLevel2AttributesSaver
  147.                             let elementLevel2AttributesSaver = {
  148.                                 ['element' + e2 + 'Level2Attributes']: saveAttributes2
  149.                             };
  150.                             thisInnerContentLevel2.push(elementLevel2AttributesSaver);
  151.                                                    
  152.                         } else {
  153.                                    
  154.                             // Si el elemento de nivel 2 no tiene atributos, mostrar notificación en la consola
  155.                             console.log('               El elemento de nivel 2 <' + elementLevel2Name + '> no tiene atributos.');
  156.                                    
  157.                             // Si el elemento de nivel 2 no tiene atributos, el objeto con espacio para ellos se deja con valor vacío
  158.                             let elementLevel2AttributesSaver = {
  159.                                 ['element' + e2 + 'Level2Attributes']: ''
  160.                             };
  161.                             thisInnerContentLevel2.push(elementLevel2AttributesSaver);
  162.  
  163.                         };
  164.                                
  165.                                    
  166.                     // Registro del contenido del elemento de nivel 2 (otros elementos o texto)
  167.                                        
  168.                         // Verificación del elemento de nivel 2 para la presencia de elementos anidados
  169.                         if (elementLevel2.children.length > 0) {
  170.                                            
  171.                             // Notificación en la consola sobre la cantidad de elementos de nivel 3 encontrados dentro del elemento de nivel 2
  172.                             console.log('               El elemento <' + elementLevel2Name + '> tiene ' + elementLevel2.children.length + ' elementos anidados.');
  173.                                            
  174.                             // Declaración de un array para el registro estructurado del contenido del elemento de nivel 2
  175.                             // (elementos de nivel 3)
  176.                             let elementLevel2Content = new Array();
  177.                                            
  178.                             // Recorrido de los elementos de nivel 3, si se encuentran
  179.                             for (let e3 = 0; e3 < elementLevel2.children.length; e3++) {
  180.                                                
  181.                                 let elementLevel3 = elementLevel2.children[e3]; // Selección del elemento de nivel 3
  182.                                                
  183.                                 // Declaración de un array para el registro estructurado del elemento actual de nivel 3
  184.                                 let thisInnerContentLevel3 = new Array();
  185.                                                
  186.                                 // Registro del nombre del elemento de nivel 3
  187.                                 let elementLevel3Name = elementLevel3.tagName; // Selección del nombre del elemento de nivel 3
  188.                                 console.log('                   ENCONTRADO ELEMENTO DE NIVEL 3 <' + elementLevel3Name + '>'); // Notificación sobre el elemento de nivel 3 encontrado
  189.                                                
  190.                                 // Registro del nombre estructurado del elemento de nivel 3
  191.                                 let elementLevel3NameSaver = {
  192.                                     ['element' + e3 + 'Level3Name']: elementLevel3Name
  193.                                 };
  194.                                 thisInnerContentLevel3.push(elementLevel3NameSaver);
  195.                                            
  196.                                 // Registro de los atributos del elemento de nivel 3
  197.                                            
  198.                                     // Verificación del elemento de nivel 3 para la presencia de atributos
  199.                                     if (elementLevel3.attributes.length > 0) {
  200.                                                    
  201.                                         // Si se encontraron atributos del elemento de nivel 3
  202.                                         let elementLevel3Attributes = elementLevel3.attributes; // Selección de los atributos del elemento de nivel 3
  203.                                                        
  204.                                         // Declaración de un array para el registro estructurado de los atributos del elemento de nivel 3
  205.                                         let saveAttributes3 = new Array();
  206.                                                        
  207.                                         // Recorrido y registro de los atributos del elemento de nivel 3
  208.                                         for (let a3 = 0; a3 < elementLevel3Attributes.length; a3++) {
  209.                                            
  210.                                             // Notificación sobre el atributo encontrado del elemento de nivel 3
  211.                                             console.log('                       Atributo del elemento de nivel 3 <' + elementLevel3Name + '>: ' + elementLevel3Attributes[a3].name + '=' + elementLevel3Attributes[a3].value);
  212.                                                            
  213.                                             let attributeName3 = elementLevel3Attributes[a3].name; // Registro del nombre del atributo del elemento de nivel 3
  214.                                             let attributeValue3 = elementLevel3Attributes[a3].value; // Registro del valor del atributo del elemento de nivel 3
  215.                                                            
  216.                                             // Registro del nombre y valor del atributo actual del elemento de nivel 3 en el objeto
  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.                                             // Guardar el atributo estructurado del elemento de nivel 3 en el array
  229.                                             saveAttributes3.push(currentAttribute3);
  230.  
  231.                                         };
  232.                                                    
  233.                                         // Registro de los atributos estructurados del elemento de nivel 3 desde el array de atributos del elemento de nivel 3 (saveAttributes3)
  234.                                         // en el array del elemento de nivel 3 (thisInnerContentLevel3)
  235.                                         // usando un objeto intermedio elementLevel3AttributesSaver
  236.                                         let elementLevel3AttributesSaver = {
  237.                                             ['element' + e3 + 'Level3Attributes']: saveAttributes3
  238.                                         };
  239.                                         thisInnerContentLevel3.push(elementLevel3AttributesSaver);
  240.                                                
  241.                                     }  else {
  242.                                    
  243.                                         // Si el elemento de nivel 3 no tiene atributos, mostrar notificación en la consola
  244.                                         console.log('                       El elemento de nivel 3 <' + elementLevel3Name + '> no tiene atributos.');
  245.                                                
  246.                                         // Si el elemento de nivel 3 no tiene atributos, el objeto con espacio para ellos se deja con valor vacío
  247.                                         let elementLevel3AttributesSaver = {
  248.                                             ['element' + e3 + 'Level3Attributes']: ''
  249.                                         };
  250.                                         thisInnerContentLevel3.push(elementLevel3AttributesSaver);
  251.  
  252.                                     };
  253.                                    
  254.                                 // Registro de cualquier contenido HTML del elemento de nivel 3
  255.                                
  256.                                     // Verificación del elemento de nivel 3 para la presencia de cualquier contenido HTML
  257.                                     if (elementLevel3.innerHTML) {
  258.                                        
  259.                                         let elementLevel3innerHTML = elementLevel3.innerHTML;
  260.                                         console.log('                       El elemento de nivel 3 <' + elementLevel3Name + '> contiene contenido: "' + elementLevel3innerHTML + '"');
  261.                                        
  262.                                         elementLevel3innerHTMLSaver = {
  263.                                             ['element' + e3 + 'Level3Content']: elementLevel3innerHTML
  264.                                         };
  265.                                         thisInnerContentLevel3.push(elementLevel3innerHTMLSaver);
  266.                                        
  267.                                     } else {
  268.                                         console.log('                       El elemento de nivel 3 <' + elementLevel3Name + '> no contiene contenido.');
  269.                                        
  270.                                         // Si el elemento de nivel 3 no tiene contenido, el objeto con espacio para el contenido se deja con valor vacío
  271.                                         let elementLevel3EmptyContentSaver = {
  272.                                             ['element' + e3 + 'Level3Content']: ''
  273.                                         };
  274.                                         thisInnerContentLevel3.push(elementLevel3EmptyContentSaver);
  275.                                        
  276.                                     };
  277.                                    
  278.                                 // Registro del elemento anidado actual de nivel 3 en un objeto intermedio
  279.                                 // (contiene un objeto con número de orden y un valor-array de tres objetos:
  280.                                 // nombre, atributos, contenido del elemento de nivel 3)
  281.                                 let elementLevel3Saver = {
  282.                                     ['element' + e3 + 'Level3']: thisInnerContentLevel3
  283.                                 };
  284.                                                
  285.                                 // Registro del objeto intermedio con el elemento anidado de nivel 3 en el array de contenido del elemento de nivel 2
  286.                                 elementLevel2Content.push(elementLevel3Saver);
  287.                                    
  288.                             }; // Fin del ciclo for para recorrer elementos de nivel 3, si se encontraron
  289.                            
  290.                             // Registro del array de todo el contenido del elemento de nivel 2 (elementos de nivel 3)
  291.                             // en un objeto intermedio (contiene el número de orden del elemento de nivel 2 al que pertenece el contenido,
  292.                             // y un valor-array del contenido actual del elemento de nivel 2 seleccionado
  293.                             let elementLevel2ContentSaver = {
  294.                                 ['element' + e2 + 'Level2Content']: elementLevel2Content
  295.                             };
  296.                             // Registro del objeto intermedio de todo el contenido estructurado del elemento de nivel 2
  297.                             // en el array del elemento de nivel 2
  298.                             thisInnerContentLevel2.push(elementLevel2ContentSaver);
  299.                            
  300.                        
  301.                         // Fin de la verificación de elementos de nivel 2 para la presencia de elementos anidados de nivel 3
  302.                        
  303.                         // Verificación de elementos de nivel 2 para la presencia de texto o ausencia de anidaciones
  304.                         } else if (elementLevel2.children.length == 0) {
  305.                                        
  306.                             // Verificación del elemento de nivel 2 para la presencia de texto, si no hay elementos anidados
  307.                             console.log('               El elemento de nivel 2 <' + elementLevel2Name + '> no tiene elementos anidados. Búsqueda de texto.');
  308.                                            
  309.                             if (elementLevel2.textContent) {
  310.                                 let elementLevel2Text = elementLevel2.textContent; // Selección del contenido de texto dentro del elemento de nivel 2
  311.                                 console.log('               El elemento de nivel 2 <' + elementLevel2Name + '> contiene texto: "' + elementLevel2Text + '"');
  312.                                                
  313.                                 // Registro del texto del elemento de nivel 2
  314.                                 let elementLevel2TextSaver = {
  315.                                     ['element' + e2 + 'Level2Content']: elementLevel2Text
  316.                                 };
  317.                                 thisInnerContentLevel2.push(elementLevel2TextSaver);
  318.                                                
  319.                             } else {
  320.                                                
  321.                                 // Si el elemento de nivel 2 no contiene ni elementos anidados ni texto
  322.                                 console.log('               El elemento de nivel 2 <' + elementLevel2Name + '> no contiene texto.');
  323.                                                
  324.                                 // Si el elemento de nivel 2 no tiene contenido, el objeto con espacio para el contenido se deja con valor vacío
  325.                                 let elementLevel2EmptyContentSaver = {
  326.                                     ['element' + e2 + 'Level2Content']: ''
  327.                                 };
  328.                                 thisInnerContentLevel2.push(elementLevel2EmptyContentSaver);
  329.                                                
  330.                             };
  331.                        
  332.                         };
  333.                        
  334.                         // Registro de todos los elementos anidados de nivel 2 en un objeto intermedio
  335.                         let elementLevel2Saver = {
  336.                             ['element' + e2 + 'Level2']: thisInnerContentLevel2
  337.                         };
  338.                                    
  339.                         // Registro del objeto intermedio con los elementos anidados de nivel 2 en el array de contenido del elemento de nivel 1
  340.                         elementLevel1Content.push(elementLevel2Saver);
  341.                        
  342.                 }; // Fin del ciclo for para recorrer elementos de nivel 2, si se encontraron
  343.                            
  344.                 // Registro del contenido estructurado del elemento de nivel 1 desde el array en el objeto raíz objectToStringify
  345.                 objectToStringify['element' + e + 'Level1'][2] = {
  346.                     ['element' + e + 'Level1Content']: elementLevel1Content
  347.                 };
  348.                    
  349.             } else if (elementLevel1.children.length == 0) {
  350.                    
  351.                 // Verificación del elemento de nivel 1 para la presencia de texto, si no hay elementos anidados
  352.                 console.log('       El elemento de nivel 1 <' + elementLevel1Name + '> no tiene elementos anidados. Búsqueda de texto.');
  353.                    
  354.                 if (elementLevel1.textContent) {
  355.                     let elementLevel1Text = elementLevel1.textContent; // Selección del contenido de texto dentro del elemento de nivel 1
  356.                     console.log('       El elemento de nivel 1 <' + elementLevel1Name + '> contiene texto: "' + elementLevel1Text + '"');
  357.                        
  358.                     // Registro del texto del elemento de nivel 1 en el objeto raíz objectToStringify
  359.                     objectToStringify['element' + e + 'Level1'][2] = {
  360.                         ['element' + e + 'Level1Content']: elementLevel1Text
  361.                     };
  362.                        
  363.                 } else {
  364.                        
  365.                     // Si el elemento de nivel 1 no contiene ni elementos anidados ni texto
  366.                     console.log('       El elemento de nivel 1 <' + elementLevel1Name + '> no contiene texto.');
  367.                            
  368.                     // Si el elemento de nivel 1 no tiene contenido, el objeto con espacio para el contenido se deja con valor vacío
  369.                     objectToStringify['element' + e + 'Level1'][2] = {
  370.                         ['element' + e + 'Level1Content']: ''
  371.                     };
  372.                 };
  373.                
  374.             };
  375.     };
  376.                
  377.     // Mostrar el resultado de la conversión de HTML a JSON
  378.     let result = JSON.stringify(objectToStringify); // Serializamos el objeto
  379.     document.body.innerHTML = result; // Reemplazamos el cuerpo de la página con nuestro JSON
  380.     // Agregar un separador antes de la notificación en la consola sobre la finalización del trabajo del convertidor
  381.     console.log('____________________________________________________________________________________________________');
  382.     // Notificación en la consola sobre la finalización del trabajo del convertidor
  383.     console.log('SERIALIZACIÓN DEL CÓDIGO HTML COMPLETADA.');
  384. };
  385.        
  386. setTimeout(convertHTMLtoJSON, 1000); // Mostramos el resultado un segundo después de cargar la página inicial
Tags: HTMLtoJSON
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!