Hoe de geselecteerde HTML naar JSON converteren?

Ik wil een deel van mijn HTML-code in JSON opslaan als een bestand en vervolgens de HTML-codes voor bewerken terugvinden. Enig idee hoe kan ik het doen?

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

Ik ben nieuw voor JSON, alsjeblieft vereenvoudigd indien mogelijk. Ik heb naar andere vragen gekeken, maar hun lijken mijn vraag

niet aan te pakken

Antwoord 1, Autoriteit 100%

Wat u wilt doen, wordt gesynchroniseerd .

//  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);

Antwoord 2, Autoriteit 18%

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

Antwoord 3, autoriteit 5%

   var html = $('#TextBoxesGroup')[0].outerHTML;
    var temp = {"html":html}; 
    var obj  = JSON.parse(temp);
    console.log(obj); // shows json object  

Je kunt elke server-side taal gebruiken om een json van obj te maken.

Antwoord 4

U kunt dit volgende fragment gebruiken om HTML om te zetten in JSON-tekenreeks

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

U kunt deze JSON-reeks in de database opslaan en de tijd bewerken waarop u deze decodeert en op de UI-pagina plaatst.

Antwoord 5

ik gebruik de recursieve functie om het af te handelen

from bs4 import BeautifulSoup
dic = dict()
itt = 0
def list_tree_names(node):
global itt
for child in node.contents:
    try:
        dic.update({child.name +"/"+ str(itt): child.attrs})
        itt += 1
        list_tree_names(node=child)
    except:
        dic.update({"text" +"/"+ str(itt): child})
        itt += 1
soup = BeautifulSoup(data, "html.parser")

data is de html-tekst

list_tree_names(soup)
print(dic)

u kunt het json-bestand zien in https://github.com/celerometis/html2json

Antwoord 6

zie deze link op w3school
https://www.w3schools.com/code/tryit.asp?filename= FR0BHTAPG78A

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