Logo - ProgrammingHead

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.

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

my.json [This won't work]

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

my.json [works]

{
  "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.

my.json

{
  "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).

character entities in HTML

my.json

{
  "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.

index.html [HTML Example]

<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>

index.php [PHP Example]

<?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;
?>