其实JSON.stringify本身就可以将JSON格式化,具体的用法是:

JSON.stringify(res, null, 2); //res是要JSON化的对象,2是spacing

如果想要效果更好看,还要加上格式化的代码和样式:

js代码:

function syntaxHighlight(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\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 '<span class="' + cls + '">' + match + '</span>';
});
}

样式代码:

<style>
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>

html代码:

<pre id="result">

</pre>

调用代码:

$('#result').html(syntaxHighlight(res));

效果:

json字符串CSS格式化的更多相关文章

  1. PHP json字符串,格式化缩进显示

    PHP json字符串,格式化显示 /** * 格式化 */ class JsonFormatHelper { /** * json字符串缩进显示 * @param unknown $json * @ ...

  2. JSON字符串控制台格式化输出 java

    1.正常情况下返回的json数据格式如下: {"header":{"transSn":"e33128bb7622462ebfb2cbfcc46baa1 ...

  3. 对Json字符串进行格式化显示

    很多时候,我们拿Json字符串作为返回结果,但是当数据量多的时候,一堆的Json字符串看起来很不直观,这时候我们可以使用以下办法将Json字符串格式化一下再输出 var JsonUti = { //定 ...

  4. 使用正則表達式的格式化与高亮显示json字符串

    使用正則表達式的格式化与高亮显示json字符串 json字符串非常实用,有时候一些后台接口返回的信息是字符串格式的,可读性非常差,这个时候要是有个能够格式化并高亮显示json串的方法那就好多了,以下看 ...

  5. Java - 格式化输出JSON字符串的两种方式

    目录 1 使用阿里的fastjson 1.1 项目的pom.xml依赖 1.2 Java示例代码 2 使用谷歌的gson 2.1 项目的pom.xml依赖 2.2 Java示例代码 1 使用阿里的fa ...

  6. 看看你的正则行不行——正则优化一般的json字符串

    json字符串很有用,有时候一些后台接口返回的信息是字符串格式的,可读性很差,这个时候要是有个可以格式化并高亮显示json串的方法那就好多了,下面看看一个正则表达式完成的json字符串的格式化与高亮显 ...

  7. 推荐一款JSON字符串查看器

    JSON Viewer是一款方便易用的Json格式查看器.Json格式的数据阅读性很差,如果数据量大的话再阅读方面会十分困难,有了这软件,问题就解决了,能够快速把Json字符串排列规则的树结构,支持对 ...

  8. C#格式化JSON字符串

    很多时候我们需要将json字符串以 {     "status": 1,     "sum": 9 }这种方式显示,而从服务端取回来的时候往往是这样 {&quo ...

  9. C#后台格式化JSON字符串显示

    很多时候我们从服务器上获取的JSON字符串是没有格式化的,如下: {"BusinessId":null,"Code":200,"Data": ...

随机推荐

  1. typescript 学习笔记

    错的写法 枚举 错误写法 方法可选参 类 子类没有找父类

  2. F. Multicolored Markers(数学思维)

    思维:思维就是将大的矩形放在小矩形里面,让大矩形的宽和长尽量靠近. 很容易得到 (a+b)% i = 0 的话, 保证了大矩形的形成,同时里面表示了两种情况:1, a % i =0, b % i=0; ...

  3. 20175310 《Java程序设计》第9周学习总结

    20175310 <Java程序设计>第9周学习总结 本周博客:https://www.cnblogs.com/xicyannn/p/10785915.html 教材学习内容总结 这周学习 ...

  4. 在C#/.NET应用程序开发中创建一个基于Topshelf的应用程序守护进程(服务)

    本文首发于:码友网--一个专注.NET/.NET Core开发的编程爱好者社区. 文章目录 C#/.NET基于Topshelf创建Windows服务的系列文章目录: C#/.NET基于Topshelf ...

  5. mac 版 Pycharm 激活

    mac 版 Pycharm 激活   获取注册码地址: http://idea.lanyus.com 输入注册码之后可能会报 this license XXXXXXXX has been cancel ...

  6. Spring:AOP面向切面编程

    AOP主要实现的目的是针对业务处理过程中的切面进行提取,它所面对的是处理过程中的某个步骤或阶段,以获得逻辑过程中各部分之间低耦合性的隔离效果. AOP是软件开发思想阶段性的产物,我们比较熟悉面向过程O ...

  7. C++ 标准库之 iomanip 、操作符 ios::fixed 以及 setprecision 使用的惨痛教训经验总结

    本菜鸡自从退役之后就再也没怎么敲过 C++ 代码,在 C++ 语言下,求解关于浮点数类型的问题时,之前有碰到类似的情况,但是似乎都没有卡这块的数据,基本上用一个 setprecision 函数保留几位 ...

  8. 企业nginx应用实例(功能拆分记录)

    一.默认访问协议强制跳转(http--->https) server { listen ; server_name dannylinux.top www.dannylinux.top; # re ...

  9. 安装zabbix 遇到的一些问题

    yum install epel-release yum install OpenIPMI-modalias  fping iksemel net-snmp* perl-Data-Dumper 正在解 ...

  10. Python——Flask框架

    Flask框架相关知识构架 程序的基本结构 模板 Web表单 数据库 电子邮件 程序的结构 用户认证