使用HTML标记解析JSON数组以输出纯HTML

Question

我最近2天一直在谷歌搜索。我无法完美地完成它。

我假设，这属于或可以由一些模板引擎完成，但是......我无法找到所谓的引擎。

我有这个JSON array，我想解析它或将其转换为纯HTML，以将其输出到浏览器。

[
  {
    "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.."
    ]
  }
]

帮助不仅仅是赞赏..

Answer 1

你需要做的就是一个递归解析器，它将从上到下解析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标签但是如果CHILD是另一个标签呢？简单地说，我们再次调用相同的解析器函数，但是在这种情况下，CHILD可以是一个数组（多个标签）或一个基于我们调用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>``