摘要：背景有时候我们需要将数据直接显示在页面上比如在做一个接口测试的项目，需要将接口返回的结果直接展示，但是如果直接显示字符串，不方便查看。需要格式化一下。
背景：
有时候我们需要将json数据直接显示在页面上（比如在做一个接口测试的项目，需要将接口返回的结果直接展示），但是如果直接显示字符串，不方便查看。需要格式化一下。
解决方案：其实JSON.stringify本身就可以将JSON格式化，具体的用法是：
javascriptJSON.stringify(res, null, 2); //res是要JSON化的对象，2是spacing
如果想要效果更好看，还要加上格式化的代码和样式：
js代码:
javascriptfunction syntaxHighlight(json) {
if (typeof json != "string") {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, "&").replace(//g, ">");
return json.replace(/("(u[a-zA-Z0-9]{4}|[^u]|[^"])*"(s*:)?|(true|false|null)|-?d+(?:.d*)?(?:[eE][+-]?d+)?)/g, function(match) {
var cls = "number";
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = "key";
} else {
cls = "string";
}
} else if (/true|false/.test(match)) {
cls = "boolean";
} else if (/null/.test(match)) {
cls = "null";
}
return "" + match + "";
});
}
样式代码:
css
html代码:
html
调用代码:
javascript$("#result").html(syntaxHighlight(res));
效果
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85853.html
摘要：本文将继续上篇文章的旅程，给读者介绍如何在图数据库中实现查询结果的可视化。下面，让我们一起来探究的奥秘吧查询结果可视化图数据库的查询语句的参考网址为。我们使用的数据仍来自文章图数据库的简介及使用。 引入 在文章Cayley图数据库的简介及使用中，我们已经了解了Cayley图数据库的安装、数据导入以及进行查询等。 Cayley图数据库是Google开发的开源图数据库，虽然功能还没有...
摘要：本篇讲解转义标签投影定义，这几项与如何分离界面设计有关。找一个替代品如上一篇非正经入门之一所述，要克服浆糊的不利影响，要找一个替代品。本文完本专栏历史文章介绍一项让可以与抗衡的技术可视化开发工具非正经入门之一三宗罪 本系列博文从 Shadow Widget 作者的视角，解释该框架的设计要点。本篇讲解转义标签、json-x、投影定义，这几项与 如何分离界面设计 有关。 1. 找一个 ...
阅读 929·2021-11-22 12:09
阅读 3703·2021-09-27 13:36
阅读 1390·2021-08-20 09:37
阅读 4007·2019-12-27 12:22
阅读 2352·2019-08-30 15:55
阅读 2357·2019-08-30 13:16
阅读 2816·2019-08-26 17:06
阅读 3433·2019-08-23 18:32
