如何从类似 json 的字符串中渲染 html？

Question

这是来自服务器的响应的一部分

{\"attributes\":{\"size\":\"18px\",\"color\":\"#3ba0dc\"},\"insert\":\"Vocabulary:\"}

我正在研究的页面呈现这样

那是什么类型的标签/语言？

如何解析和呈现该源？

Answer 1

您可以使用JSON.parse来解析您的数据并删除所有不需要的斜杠。 您的回复目前是字符串格式。

您还可以访问需要使用的 object . 你得到那个键的值。 在你的情况下，它的Vocabulary

1. 要显示文本Vocabulary我们可以使用textContent()
2. 要将您的响应的字体大小应用于单词，我们可以使用element.style.fontSize
3. 要将您的回复颜色应用于单词，我们可以使用element.style.color

运行下面的代码段。

 //Your response in string format let response = '{\"attributes\":{\"size\":\"18px\",\"color\":\"#3ba0dc\"},\"insert\":\"Vocabulary:\"}' //Parse data let parsedData = JSON.parse(response) //Show text on div using querySelector let element = document.querySelector('#data') //Apply response data to your Vocabulary: element.textContent = parsedData.insert; element.style.fontSize = parsedData.attributes.size; element.style.color = parsedData.attributes.color; //Console log console.log(parsedData)

 <div id="data"></div>

Answer 2

这是JSON数据的字符串化格式。 所以你需要解析它。

 console.log( JSON.parse( '{\"attributes\":{\"size\":\"18px\",\"color\":\"#3ba0dc\"},\"insert\":\"Vocabulary:\"}' ) );