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

一、问题:后端返回的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);

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

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

三、给代码高亮着色

高亮代码其实有很多种第三方库,常用的有highlight.jsPrism.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,打开即可看到效果。

最终的效果

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

另存为保存外链文件

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

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

除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 1,343
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top