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

最新推荐文章于 2024-05-06 23:26:43 发布

前端三评

最新推荐文章于 2024-05-06 23:26:43 发布

阅读量734

点赞数

分类专栏： JS 工具文章标签： json javascript 前端代码高亮 PrismJS

本文链接：https://blog.csdn.net/imqdcn/article/details/131515375

版权

工具同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

文章目录

一、问题：后端返回的`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>