How to Convert HTML to JSON in JavaScript ? Last Updated : 18 Apr, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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: Table of Content Using html-to-json LibraryUsing DOM ParserUsing html-to-json LibraryIn 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-jsonExample: The below example uses html-to-json Library to convert HTML to JSON in JavaScript. 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 ParserIn 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. 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"} Comment More infoAdvertise with us Next Article How to Convert CSV to JSON in JavaScript ? G gpancomputer Follow Improve Article Tags : JavaScript Web Technologies JSON Similar Reads How to Convert HTML Table to JSON in JavaScript? HTML tables are commonly used to present structured data on websites. In many scenarios, this tabular data needs to be converted to JSON format for processing, storage, or server communication. We will discuss different approaches to converting HTML tables to JSON using JavaScript.These are the foll 3 min read How to Convert XML to JSON in JavaScript? To convert XML to JSON in JavaScript, various methods and libraries and be used. Here, we use xml-js library that provides xml2json function to convert XML to JSON data. It takes XML data as input and gives the JSON objects as output. We can also use the DOMParser from the xmldom package to convert 2 min read How to Convert Map to JSON in JavaScript ? In JavaScript, when working with data, you might encounter situations where you need to convert a Map object into a JSON format. This can be useful for sending data over the network, storing data in local storage, or interfacing with APIs that expect JSON data. Converting a Map to JSON means convert 3 min read How to Convert CSV to JSON in JavaScript ? In this article, we will explain different ways to change Comma-Separated Values (CSV) data into JavaScript Object Notation (JSON) format, step-by-step. We'll break down each method with clear explanations and examples. There are several approaches available in JavaScript to convert CSV to JSON in J 3 min read How to Convert JSON to Blob in JavaScript ? This article explores how to convert a JavaScript Object Notation (JSON) object into a Blob object in JavaScript. Blobs represent raw data, similar to files, and can be useful for various tasks like downloading or processing JSON data. What is JSON and Blob?JSON (JavaScript Object Notation): A light 2 min read How to Convert Excel to JSON in JavaScript ? Converting Excel spreadsheets to JSON format is a common requirement in various applications. JavaScript code utilizes the read-excel-file library to parse the Excel data, convert it to JSON format, and display it. Additionally, it provides functionality to download the generated JSON file. Approach 3 min read Like