【问答系列】如何对后端返回的json格式化输出并且高亮代码

文章目录

一、问题：后端返回的`json`没有格式化，想格式化高亮该`json`并在网页中显示它

最近有同学问我这个问题：

他的问题就是，后端返回的json没有格式化，想格式化高亮该json并在网页中显示它。

下面的是后端返回的json，没有做任何处理：

期望的效果

就像这样，期望的效果：

期望的效果

即左侧是希望看到的效果，右侧是格式化了但是没有代码高亮的效果。

所以以上就需要分2步来解决：1、格式化输出 2、代码高亮

二、json格式化输出的方法

如果你有一个未格式化的 JSON 字符串，并且想使用 JavaScript 来格式化和美化它，你可以使用内置的 JSON 对象的 stringify() 方法。这个方法接受一个JSON对象并将其转换成格式化后的字符串。

以下是使用 JavaScript 格式化美化 JSON 的示例代码：

// 未格式化的 JSON 字符串
var unformattedJson = '{"name":"John","age":30,"city":"New York"}';

// 将 JSON 字符串解析为对象
var jsonObject = JSON.parse(unformattedJson);

// 将对象转换为格式化后的 JSON 字符串
var formattedJson = JSON.stringify(jsonObject, null, 2);

console.log(formattedJson);

打印输出的结果即为：

格式化了但是未高亮的效果

代码解读：

JSON.stringify(jsonObject, null, 2);

第一个参数表示需要格式化的JSON对象（非字符串）
第二个参数是一个可选的替代函数，用于过滤和修改对象属性的值。在这个示例中，我们传递了 null，表示不进行任何替代操作
第三个参数是一个可选的空格参数，用于指定缩进的空格数量或缩进字符串。在示例中，我们传递了 2，表示每级缩进两个空格。

这样就实现了json格式化输出。接着我们来解决第二个问题，即给代码高亮着色。

三、给代码高亮着色

高亮代码其实有很多种第三方库，常用的有highlight.js或Prism.js等。用法大同小异，接下来就以后面的这个库为例看看怎么使用。

直接在网页中使用：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
</head>
<body>
  <pre>
    <code class="language-javascript">
    {
      "name": "John",
      "age": 30,
      "city": "New York"
    }
    </code>
  </pre>

  <script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>
</body>
</html>

你将上面的代码复制到本地html，打开即可看到效果。

最终的效果

上面的js和css引用的是外部的cdn，如果你想让JS文件跟着你的项目走，你也可以直接打开以上链接，然后将其另存为保存到和html同一级目录，记得改下路径为相对路径。

如果你要将高亮使用到前端工程项目中，即通过npm的方式来使用，它也提供了对应的方式。

具体可参考其官网：https://prismjs.com/

如果你在web前端开发、面试、前端学习路线有困难可以加我V：imqdcnn。免费答疑，行业深潜多年的技术牛人帮你解决bug。

祝你能成为一名优秀的WEB前端开发工程师！