Javascript 如何将选定的HTML转换为Json?

Javascript 如何将选定的HTML转换为Json?,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我想将部分html代码保存为json文件,然后重述html代码进行编辑。知道我该怎么做吗 新文本 我是json新手,请尽可能简化。我已经看了其他问题,但他们似乎没有解决我的问题你想做的就是序列化 您可以使用以下代码段将HTML转换为JSON字符串 var HtmlToJsonString = JSON.stringify($("#TextBoxesGroup").html()); 您可以将这个JSON字符串存储到数据库中,并编辑解码它并放在UI页面上的时间 var htm

我想将部分html代码保存为json文件,然后重述html代码进行编辑。知道我该怎么做吗


新文本



我是json新手,请尽可能简化。我已经看了其他问题,但他们似乎没有解决我的问题

你想做的就是序列化


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

var HtmlToJsonString = JSON.stringify($("#TextBoxesGroup").html());
您可以将这个JSON字符串存储到数据库中,并编辑解码它并放在UI页面上的时间

    var html = $('#TextBoxesGroup')[0].outerHTML;
    var temp = {"html":html}; 
    var obj  = JSON.parse(temp);
    console.log(obj); // shows json object  
您可以使用任何服务器端语言从obj生成json

查看w3school上的此链接


我使用递归函数来处理它

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)
您可以在函数htmlToJson(div,obj)中看到json文件{ 如果(!obj){obj=[]} var标记={} 标记['tagName']=div.tagName 标记['children']=[] for(变量i=0;i
var json=json.stringify({html:html})
,即json。您所拥有的只是一个javascript对象,没有“JSON对象”这样的东西。没错,我之所以将其保持为对象形式,是因为问题中的
jquery
标记。更改了变量名以避免混淆。不过,我将保留“JSON对象”的措辞,它捕获序列化为JSON而不丢失信息的对象的含义。@lleaff我收到此错误-->无法读取的属性“outerHTML”null@yan这意味着没有与函数
document.getElementById()对应的
id
元素
@PatrickEvans明白我试图读懂作者的想法是什么意思了,我怀疑他们是否关心{}是否只是一个POJSO。我认为OP的意思是他们想要DOM HtmleElement对象的JSON表示,例如JXON或类似的:“将html代码转换为JSON作为文件”,你的意思是创建一个包含代码的对象,将其转换为JSON,然后放入一个文件,然后可以下载到客户端计算机,或上传到您的服务器?@PatrickEvans类似的东西。但是,我不需要让其他人下载,我需要重述该文件以便进一步编辑。可能重复的请添加使用该函数的使用示例。输入:演示测试输出:“{”标记名“:“DIV”,“children”:[{”标记名“:“DIV”,“children”:[],“@class”:“col-md-12”}],“@class”:“row”}”
var myObj, myJSON, myText, obj;
myText = document.getElementById("xx").innerHTML;
myObj = {innerHTML:"yyy"};
myObj.innerHTML = myText;
myJSON = JSON.stringify(myObj);
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")
list_tree_names(soup)

print(dic)
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    
}