Convertir HTML a JSON

Este artículo presenta cómo convertir código HTML a JSON.

Utilice el método JavaScript JSON.stringify() para convertir HTML a JSON

JSON es similar al objeto de JavaScript y la diferencia es que la clave se escribe como una cadena en JSON. JSON no depende del idioma y se usa para intercambiar datos entre aplicaciones o computadoras.

El ejemplo de una cadena JSON se muestra a continuación.

 jsonCopy'{
    "name":"John",
    "age":30,
    "car":null
}'

Podemos convertir el documento HTML en tal representación utilizando el método JSON.stringify(). El método convierte el objeto JavaScript en una cadena JSON.

Por ejemplo, convertiremos el siguiente documento HTML en JSON.

Código - HTML:

 htmlCopy<div id='para'>
  <p>
    Paragraph 1
  </p>
  <p>
    Paragraph 2
  </p>
</div>

Necesitamos convertir el documento a JSON. En HTML, el id del contenedor a convertir es para.

Utilice el método document.getElementById() para devolver el documento con el id para. La variable para almacena todo el documento HTML.

 javascriptCopyvar para = document.getElementById('para');

A continuación, utilice la propiedad outerHTML para devolver el contenido HTML serializado de la variable para. La variable html contiene todo el documento en formato de cadena.

 javascriptCopyvar html = para.outerHTML;

Luego, almacene la cadena html como un objeto JavaScript. Nombra la clave del objeto como html.

 javascriptCopyvar obj = {html: html};

Finalmente, convierta el objeto usando el método JSON.stringify().

 javascriptCopyvar json = JSON.stringify(obj);

Código fuente completo - JavaScript + Node.js:

 javascriptCopyvar para = document.getElementById('para');
var html = para.outerHTML;
var obj = {html: html};
var json = JSON.stringify(obj);
console.log(json)

Producción :

 textCopy"{'html':'<div id=\'para\'>\n  <p>\n    Paragraph 1\n  </p>\n  <p>\n    Paragraph 2\n  </p>\n</div>'}"

De esta forma, podemos convertir cualquier HTML seleccionado a JSON.