解析带有HTML标记的JSON数组以输出纯HTML
解析带有HTML标记的JSON数组以输出纯HTML
提问于 2019-04-22 23:14:28
我已经在谷歌上搜索了两天了。我不能把它做得很完美。
我假设这属于或者可以由一些模板引擎来完成，但是..我找不到那个所谓的引擎。
我有这个JSON array，我想把它解析回来，或者转换成普通的超文本标记语言，把它输出到浏览器上。
[
{
"tag": "figure",
"children": [
{
"tag": "div",
"attrs": {
"class": "fiwrapper"
},
"children": [
{
"tag": "img",
"attrs": {
"src": "/media/images/5cbd41bd7c566057f5e6a875.jpeg"
}
}
]
},
{
"tag": "figcaption",
"children": [
""
]
}
]
},
{
"tag": "p",
"children": [
{
"tag": "br"
}
]
},
{
"tag": "figure",
"children": [
{
"tag": "div",
"attrs": {
"class": "fiwrapper"
},
"children": [
{
"tag": "img",
"attrs": {
"src": "/media/images/5cbd45286c7210581c5563ba.jpeg"
}
}
]
},
{
"tag": "figcaption",
"children": [
""
]
}
]
},
{
"tag": "p",
"children": [
{
"tag": "br"
}
]
},
{
"tag": "p",
"children": [
"Cool Stuff.."
]
}
]感谢你的帮助..
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-23 01:37:24
您所需要做的就是一个递归解析器，它将从上到下解析json。
这里是用javascript实现的解析器，同样的逻辑也可以翻译成任何其他语言。
const getAttrMap = (attr) => attr ? Object.keys(attr).reduce((acc, curr) => `${acc} ${curr}="${attr[curr]}"`, '') : '';
function parseArr(arr) {
return arr.map(curr => parser(curr)).join('\n');
}
function parser(obj) {
if (typeof obj === 'object') {
if (!obj.children) {
return `<${obj.tag} ${getAttrMap(obj.attrs)}/>`
}
return `<${obj.tag} ${getAttrMap(obj.attrs)}>${
obj.children instanceof Array ? parseArr(obj.children) : parser(obj.children)}</${obj.tag}>`;
}
if (!obj) {
return '';
}
return obj;
}
// usage
parseArr(inputJson);说明
如果我们知道如何翻译一个块，我们就可以递归地翻译每个块。要解析一个块，逻辑很简单。
<${obj.tag} ${getAttrMap(obj.attrs)}>CHILD</${obj.tag}>
这将把一个对象转换成一个HTML标签，但是如果孩子本身是另一个标签呢？简单地说，我们再次调用相同的解析器函数，但是在本例中，子对象可以是一个数组(多个标记)，也可以是基于我们调用parseArr或parser的单个数组。在没有提供子级的情况下，我们只返回空字符串。
输出
<figure ><div class="fiwrapper"><img src="/media/images/5cbd41bd7c566057f5e6a875.jpeg"></img></div>
<figcaption ></figcaption></figure>
<p ><br ></br></p>
<figure ><div class="fiwrapper"><img src="/media/images/5cbd45286c7210581c5563ba.jpeg"></img></div>
<figcaption ></figcaption></figure>
<p ><br ></p>
<p >Cool Stuff..</p>``页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55796655
复制相关文章
相似问题