如何将选定的HTML转换为Json？

Question

我想把我的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的新手，请尽可能地简化说明。我已经查看了其他问题，但它们好像没有回答我的问题。

- yan

---

将HTML代码转换为JSON文件，您是指创建一个包含代码的对象，将其转换为JSON，然后将其放入可以下载到客户端计算机或上传到服务器的文件中吗？ - Patrick Evans

@PatrickEvans 大概是这样的。但是我不想让别人下载，我需要重新编辑文件。 - yan

可能是将HTML映射到JSON的重复问题。 - repzero

Answer 1

你想做的这件事叫做序列化。

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

- lleaff

---

var json = JSON.stringify({html:html})，这是JSON。你所拥有的只是一个JavaScript对象，没有所谓的“JSON对象”。 - Patrick Evans

@yan 这意味着没有与您在document.getElementById()函数中提供的id相对应的元素。@PatrickEvans 你看我所说的，试图读取作者的思维，我怀疑他们是否关心{}只是一个POJSO或不是。 - lleaff

我理解为该用户希望将DOM HTMLElement对象转化为JSON格式的表示，比如JXON或类似的工具：https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML - Anthony

@lleaff，这里有一个名为TextBoxesGroup的ID。我复制并粘贴了该ID，所以不应该有任何问题。 - yan

@yan - 你错了。如果你得到那个错误，说明getElementById这一部分返回了 NULL。不要依赖于你是否能看到它，相反退回并确认脚本仅获取代码的那部分的值，例如 console.log(document.getElementById('TextBoxesGroup')); - Anthony

Answer 2

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    
}

- Nilesh Chavan

---

请添加使用示例以使用此功能。 - Richie Bendall

输入：<div> <div class="row"> <div class="col-md-12"> Demo Test </div> </div> </div> 输出： "{"tagName":"DIV","children":[{"tagName":"DIV","children":[{"tagName":"DIV","children":[],"@class":"col-md-12"}],"@class":"row"}]}" - Nilesh Chavan

Answer 3

我使用递归函数来处理它。

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)

你可以在https://github.com/celerometis/html2json中查看JSON文件。

- ahmad eskandarzadeh

Answer 4

请查看此链接在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);

- john Anstaett

Answer 5

您可以使用以下代码段将HTML转换为JSON字符串。

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

您可以将此JSON字符串存储到数据库中，解码时进行编辑并放置在UI页面上。

- Jatin Patel

Answer 6

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

您可以使用任何服务器端语言将 obj 转换为 json 格式。

- Shijin TR