使用 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>``