web-dev-qa-db-fra.com

Comment convertir le HTML sélectionné en Json?

Je veux enregistrer une partie de mon code html dans json en tant que fichier, puis récapituler les codes html pour les modifier. Une idée comment puis-je le faire?

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


Je suis nouveau chez json, s'il vous plaît simplifié si possible.J'ai regardé d'autres questions mais elles ne semblent pas répondre à ma question

javascriptjqueryhtmljson
11
yan

Ce que vous voulez faire s'appelle sérialisation.

//  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);
15
lleaff
    var html = $('#TextBoxesGroup')[0].outerHTML;
    var temp = {"html":html}; 
    var obj  = JSON.parse(temp);
    console.log(obj); // shows json object

Vous pouvez utiliser n'importe quel langage côté serveur pour créer un json à partir de obj.

1
Shijin

Vous pouvez utiliser cet extrait de code suivant pour convertir HTML en chaîne JSON

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

Vous pouvez stocker cette chaîne JSON dans la base de données et modifier l'heure à laquelle vous la décodez et la mettez sur la page de l'interface utilisateur.

0
Jatin Patel

voir ce lien sur w3school https://www.w3schools.com/code/tryit.asp?filename=FR0BHTAPG78A

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

j'utilise la fonction récursive pour le gérer

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

les données sont le texte html

list_tree_names(soup)

print(dic)

vous pouvez voir le fichier json dans https://github.com/celerometis/html2json

0
ahmad eskandarzadeh