Visit Original Non-AMP Page

How to Give HTML Tags in JSON File - HTML in JSON Objects

I wanted to store HTML tags inside my JSON File, but while doing that I was facing some issues and after fixing them now I can share all the solutions that will save you time.
This tutorial is about How to give tags in JSON files and after this tutorial, you will be able to Give any HTML Tags inside JSON Objects.

{
  "html": "<img src="my.jpg"/>"
}

{
  "html": "<img src=\"my.jpg\"/>"
}

What causes this Issue?

While using HTML Tags inside JSON Objects, mainly single quote or double quotes cause the issue.
Because we use the same Quotes for wrapping our Object values ("html": "the data") and for HTML Attributes (<img src="my.jpg"/>).
So this mostly causes the Conflict between HTML Tags and JSON Objects. So fixing this Conflict can resolve most people's problems.
Other than Quotes Data Encoding and Special Characters can also cause issues. So let's fix them all.

How to Properly Put HTML tags in JSON Objects?

Step 1 [Important]: Escape all the Quotes,
so the conflict between HTML Attributes and JSON Objects can be resolved.
Step 2: Escape Special Characters,
so it won't cause issues with JSON Encoding
Step 3: Can't do it manually?
Create HTML to JSON Converter / Parser in JavaScript or PHP.

Step 1 [Important]: Escape all the Quotes.

As you already know HTML Tag's Quotes conflicts with JSON Objects.
So to fix this conflict, we need to Escape it.
To escape all the Quotes from HTML Tags, we can use BackSlash "\" and it will escape all the quotes one by one.
To escape Quotes from HTML Tags we need to add Backslash "\" before every HTML Tag's Quotes.

{
  "html": "<img src=\"my.jpg\"/>"
}

Step 2: Escape Special Characters

It's not that important to escape Special characters but if any Special character in HTML Tags is breaking your JSON Object then you can Remove them or replace them with their Entity Codes (Shown in the Image Below).

{
  "html": "&lt;img src=\"my.jpg\"/&gt;"
}

Step 3: Create HTML to JSON Converter

If you can't do it manually, then you can create a JSON Parser using JavaScript and PHP that will help you to parse HTML Tags inside JSON files easily.
For Converting HTML tags to JSON Data, in JavaScript and PHP Languages, we need to use functions like JSON.parse() for JavaScript and json_encode() for PHP.

<body>
    <form>
        <label for="email">HTML Text</label>
        <textarea type="text" name="HTMLTags"></textarea>
        <button type="submit">Submit</button>
        <p id="results"></p>
      </form>
      <script>        
        const form = document.querySelector('form');
        form.addEventListener('submit', function(e){

            e.preventDefault();
            
            const data = new FormData(e.target);
            const value = data.get('HTMLTags');
            console.log({ value });
            
            document.getElementById("results").innerText = JSON.stringify(value)
            
            
        });
      </script>
</body>

<?php
  $html = '<div id="myDiv"><p>My HTML Paragraph</p></div>';
  $dom = new DOMDocument();
  $dom->loadHTML($html);
  $element = $dom->getElementsByTagName('div')->item(0);
  $output = json_encode($element);
  echo $output;
?>

Frequently Asked Question

How to convert HTML tags to JSON?

To convert HTML tags to JSON Objects, we need to JSON.stringify() Method in JavaScript.
This will Convert our HTML Data to JSON String and we will be able to use our HTML tags inside JSON Objects without any Issues.

<body>
    <form>
        <label for="email">HTML Text</label>
        <textarea type="text" name="HTML tags"></textarea>
        <button type="submit">Submit</button>
        <p id="results"></p>
      </form>
      <script>        
        const form = document.querySelector('form');
        form.addEventListener('submit', function(e){

            e.preventDefault();
            
            const data = new FormData(e.target);
            const value = data.get('HTMLTags');
            console.log({ value });
            
            document.getElementById("results").innerText = JSON.stringify(value)
            
            
        });
      </script>
</body>

How to convert HTML to JSON in Java?

In Java, we can use Asposa.Cells class Library to convert HTML Data to JSON Data.
1: Install and import Aspose.Cells in your Java Project.
2: Create a WorkBook Instance and Pass HTML inside it as a Parameter.
3: Call workbook.save() function to save your HTML Data as JSON.
4: You will have your JSON file converted from HTML.

import  com.aspose.cells.Workbook;     
Workbook workbook = new Workbook("my.html");
workbook.save("htmltojson.json");