web-dev-qa-db-ja.com

選択したHTMLをJsonに変換する方法は？

HTMLコードの一部をファイルとしてjsonに保存してから、編集のためにHTMLコードを要約します。どうすればそれができますか？

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


私はjsonを初めて使用します。可能な限り簡略化してください。他の質問を見たことがありますが、彼らは私の質問に対処していないようです

javascriptjqueryhtmljson
11
yan

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

任意のサーバー側言語を使用して、objからjsonを作成できます。

1
Shijin

次のスニペットを使用して、HTMLをJSON文字列に変換できます

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

このJSON文字列をデータベースに保存し、デコードしてUIページに配置する時間を編集できます。

0
Jatin Patel

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

再帰関数を使用して処理します

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

データはhtmlテキストです

list_tree_names(soup)

print(dic)

jsonファイルは https://github.com/celerometis/html2json で見ることができます

0
ahmad eskandarzadeh