Converting HTML to JSON is important for structured data extraction and integration with JavaScript applications. Here, we will learn different approaches to converting HTML to JSON in JavaScript.

Below are the approaches to convert html to JSON in JavaScript:

Using html-to-json Library

In this approach, we are using the html-to-json library to parse and extract data from HTML. The library’s parse function takes HTML input and a mapping object defining how to extract data based on CSS selectors, converting it into structured JSON output.

Run the below command to install html-to-json Library:

npm install html-to-json

Example: The below example uses html-to-json Library to convert HTML to JSON in JavaScript.

const htmlToJson = require('html-to-json');
const html = `
    <div>
        <p>GFG</p>
        <p>Noida</p>
    </div>
`;
htmlToJson.parse(html, {
    description: function ($doc) {
        return $doc.find('div p:first-child')
                   .text();
    },
    location: function ($doc) {
        return $doc.find('div p:nth-child(2)')
                   .text().split(' ').pop()
                   .replace('(', '').replace(')', '');
    }
}).done(function (json) {
    console.log(JSON.stringify(json, null, 2));
});

Output:

{
  "description": "GFG",
  "location": "Noida"
}

Using DOM Parser

In this approach, we are using the xmldom library’s DOMParser to parse HTML content. We then traverse the parsed DOM structure using getElementsByTagName to extract specific elements and their text content. Finally, we format the extracted data into a JSON object.

Run the below command to install xmldom Library:

npm install xmldom 

Example: The below example uses DOM Parser to convert HTML to JSON in JavaScript.

const {
    DOMParser
} = require('xmldom');
const html = `
      <div>
          <p>GFG</p>
          <p>Noida</p>
      </div>
  `;
const doc = new DOMParser().parseFromString(html,
    'text/html');
const div = doc.getElementsByTagName('div')[0];
const paragraphs = div.getElementsByTagName('p');
const description = paragraphs[0].textContent;
const location = paragraphs[1].textContent.split(' ')
    .pop().replace('(', '')
    .replace(')', '');

const json = {
    description,
    location,
};
console.log(JSON.stringify(json, null, 2));

Output:

{
  "description": "GFG",
  "location": "Noida"
}