How to convert selected HTML to Json?

I want to save part of my html code into json as a file then recap back the html codes for editing. Any idea how can i do it?

<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
        <label class="draggable ui-widget-content clickableLabel" id="label1" >New Text</label>
        <input id='textbox1' class="clickedit" type="text" class="draggable" class="ui-widget-content" placeholder="Text Here"/>
        <div class="clearfix"></div>

I am new to json, please simplified if possible.I had look at other questions but their don't seem to address my question



What you want to do is called serializing.

//  This gives you an HTMLElement object
var element = document.getElementById('TextBoxesGroup');
//  This gives you a string representing that element and its content
var html = element.outerHTML;       
//  This gives you a JSON object that you can send with jQuery.ajax's `data`
// option, you can rename the property to whatever you want.
var data = { html: html }; 

//  This gives you a string in JSON syntax of the object above that you can 
// send with XMLHttpRequest.
var json = JSON.stringify(data);
    var html = $('#TextBoxesGroup')[0].outerHTML;
    var temp = {"html":html}; 
    var obj  = JSON.parse(temp);
    console.log(obj); // shows json object  

You can use any server side language to make a json from obj.

function htmlToJson(div,obj){
 var tag = {}
 tag['children'] = []
 for(var i = 0; i< div.children.length;i++){
 for(var i = 0; i< div.attributes.length;i++){
    var attr= div.attributes[i]
    tag['@'] = attr.value
 return tag    

You can use this following snippet to convert HTML into JSON string

var HtmlToJsonString = JSON.stringify($("#TextBoxesGroup").html());

You can stored this JSON string into database and edit time you decode it and put on UI page.


see this link on w3school

mytext = document.getElementById("xx").innerHTML;
var myObj = {innerHTML:"yyy"};
myObj.innerHTML = mytext;
myJSON = JSON.stringify(myObj);

i use recursive function to handle it

from bs4 import BeautifulSoup
dic = dict()

itt = 0

def list_tree_names(node):
global itt
for child in node.contents:
        dic.update({ +"/"+ str(itt): child.attrs})
        itt += 1
        dic.update({"text" +"/"+ str(itt): child})
        itt += 1

soup = BeautifulSoup(data, "html.parser")

data is the html text



you can see json file in


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.