Convert HTML to JSON

This article introduces how to convert HTML code to JSON.

Use JavaScript JSON.stringify() Method to Convert HTML to JSON

JSON is similar to the JavaScript object, and the difference is that the key is written as a string in JSON. JSON is not language-dependent and is used to exchange data between applications or computers.

HTML Rendering with Django and AJAX...
HTML Rendering with Django and AJAX | Like Codepen

The example of a JSON string is shown below.

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

We can convert the HTML document in such representation using the JSON.stringify() method. The method converts the JavaScript object into a JSON string.

For example, we will convert the following HTML document into JSON.

Code - HTML:

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

We need to get the document to be converted to JSON. In HTML, the id of the container to be converted is para.

Use the document.getElementById() method to return the document with para id. The para variable stores the whole HTML document.

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

Next, use the outerHTML property to return the serialized HTML content of the para variable. The html variable contains the whole document in a string format.

var html = para.outerHTML;

Then, store the html string as a JavaScript object. Name the key of the object as html.

var obj = { html: html };

Finally, convert the object using the JSON.stringify() method.

var json = JSON.stringify(obj);

Complete Source Code - JavaScript + Node.js:

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

Output:

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

This way, we can convert any selected HTML to JSON.