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

Posted

技术标签:

【中文标题】如何将选定的 HTML 转换为 Json?【英文标题】:How to convert selected HTML to Json? 【发布时间】:2016-04-02 22:11:03 【问题描述】:

我想将部分 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 新手,请尽可能简化。我看过其他问题,但他们似乎没有解决我的问题

【问题讨论】:

"html代码转json为文件",你的意思是创建一个包含代码的对象,将其转换为JSON,然后放入一个文件中即可下载到客户端计算机,还是上传到您的服务器? @PatrickEvans 类似的东西。但与其让其他人下载,我需要回顾一下文件以便进一步编辑 Map HTML to JSON的可能重复 【参考方案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);

【讨论】:

var json = JSON.stringify(html:html),即 JSON。你所拥有的只是一个 javascript 对象,没有“JSON 对象”之类的东西。 确实如此,我将其保留为对象形式的原因是因为问题中的jquery 标记。更改了变量名称以避免混淆。不过,我将保留“JSON 对象”的措辞,它捕获了序列化为 JSON 而不会丢失信息的对象的含义。 @lleaff 我收到此错误 --> 无法读取 null 的属性“outerHTML” @yan 这意味着没有与id 对应的元素与您赋予函数document.getElementById() @PatrickEvans 的元素相对应关心 是否只是一个 POJSO。 我认为 OP 的意思是他们想要 DOM HTMLElement 对象的 JSON 表示,例如 JXON 或类似的:developer.mozilla.org/en-US/docs/Web/Guide/…【参考方案2】:

您可以使用以下 sn-p 将 HTML 转换为 JSON 字符串

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

您可以将此 JSON 字符串存储到数据库中,并编辑您解码它并放在 UI 页面上的时间。

【讨论】:

【参考方案3】:
    var html = $('#TextBoxesGroup')[0].outerHTML;
    var temp = "html":html; 
    var obj  = JSON.parse(temp);
    console.log(obj); // shows json object  

您可以使用任何服务器端语言从 obj 生成 json。

【讨论】:

【参考方案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);

【讨论】:

【参考方案5】:

我使用递归函数来处理它

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

【讨论】:

【参考方案6】:
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    

【讨论】:

请添加使用示例以使用此功能。 输入: 演示测试 输出:" "tagName":"DIV","children":["tagName":"DIV","children":["tagName":"DIV","children":[],"@class":" col-md-12"],"@class":"row"]"

以上是关于如何将选定的 HTML 转换为 Json?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 PHP 将 HTML 转换为 JSON?

如何将 HTML 代码转换为 JSON 对象?

如何将JSON转换为HTML格式并显示

如何将选定的时间戳转换为firebase服务器时间戳android

如何将 JSON 对象转换为 HTML 表格? [关闭]

如何将随机森林中的选定特征转换为新列表