json字符串CSS格式化
其实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格式化的更多相关文章
- PHP json字符串,格式化缩进显示
PHP json字符串,格式化显示 /** * 格式化 */ class JsonFormatHelper { /** * json字符串缩进显示 * @param unknown $json * @ ...
- JSON字符串控制台格式化输出 java
1.正常情况下返回的json数据格式如下: {"header":{"transSn":"e33128bb7622462ebfb2cbfcc46baa1 ...
- 对Json字符串进行格式化显示
很多时候,我们拿Json字符串作为返回结果,但是当数据量多的时候,一堆的Json字符串看起来很不直观,这时候我们可以使用以下办法将Json字符串格式化一下再输出 var JsonUti = { //定 ...
- 使用正則表達式的格式化与高亮显示json字符串
使用正則表達式的格式化与高亮显示json字符串 json字符串非常实用,有时候一些后台接口返回的信息是字符串格式的,可读性非常差,这个时候要是有个能够格式化并高亮显示json串的方法那就好多了,以下看 ...
- Java - 格式化输出JSON字符串的两种方式
目录 1 使用阿里的fastjson 1.1 项目的pom.xml依赖 1.2 Java示例代码 2 使用谷歌的gson 2.1 项目的pom.xml依赖 2.2 Java示例代码 1 使用阿里的fa ...
- 看看你的正则行不行——正则优化一般的json字符串
json字符串很有用,有时候一些后台接口返回的信息是字符串格式的,可读性很差,这个时候要是有个可以格式化并高亮显示json串的方法那就好多了,下面看看一个正则表达式完成的json字符串的格式化与高亮显 ...
- 推荐一款JSON字符串查看器
JSON Viewer是一款方便易用的Json格式查看器.Json格式的数据阅读性很差,如果数据量大的话再阅读方面会十分困难,有了这软件,问题就解决了,能够快速把Json字符串排列规则的树结构,支持对 ...
- C#格式化JSON字符串
很多时候我们需要将json字符串以 { "status": 1, "sum": 9 }这种方式显示,而从服务端取回来的时候往往是这样 {&quo ...
- C#后台格式化JSON字符串显示
很多时候我们从服务器上获取的JSON字符串是没有格式化的,如下: {"BusinessId":null,"Code":200,"Data": ...
随机推荐
- 新数据革命: 开源C#图形化爬虫引擎Hawk5发布
https://ferventdesert.github.io/Hawk/ Hawk是一款由沙漠之鹰历时五年个人业余时间开发的,开源图形化爬虫和数据清洗工具,GitHub Star超过2k+,前几代版 ...
- flink window的early计算
Tumbing Windows:滚动窗口,窗口之间时间点不重叠.它是按照固定的时间,或固定的事件个数划分的,分别可以叫做滚动时间窗口和滚动事件窗口.Sliding Windows:滑动窗口,窗口之间时 ...
- 转://诊断 Grid Infrastructure 启动问题 (文档 ID 1623340.1) .
文档内容 用途 适用范围 详细信息 启动顺序: 集群状态 问题 1: OHASD 无法启动 问题 2: OHASD Agents 未启动 问题 3: OCSSD.BI ...
- python3 time模块
import time '''查看系统时间拿到的是一个数字(时间戳)从1970-01-01 00:00:00开始计算,以秒为单位'''print(time.time()) 执行结果:155650817 ...
- 迷茫<第二篇:回到老家湖南长沙>
2014年8月初,我买了回老家的火车票,当时没有买到坐票,卧铺贵了买不起,所以我就选择了站票,准备站回老家.我现在还记得我当时买的是T1列火车,北京西站到长沙火车站,全程16个小时.当时我就在火车上站 ...
- Top Page
Top Page 由于个人的博客中涉及了几个不同的领域.今后准备设置Index页进行一番整理 : 所有其他页面都可以从这个页面遍历 Top Page
- Ansible第一章:基础认识--小白博客
ansible Ansible:Ansible的核心程序Host Lnventory:记录了每一个由Ansible管理的主机信息,信息包括ssh端口,root帐号密码,ip地址等等.可以通过file来 ...
- pyspider爬虫框架
特点: 去重处理,结果监控,多进程处理,pyquery提取,错误重试,webUI管理,代码简洁,JS渲染 安装: anaconda里边没搜到pyspider,所以手动安装 查看pyspider的命令: ...
- java 实现递归实现tree
package app.util; import java.util.ArrayList; import java.util.List; import com.alibaba.fastjson.JSO ...
- git 忽略部分文件类型的同步
场景 利用 pycharm 进行代码操作的时候会自动创建 .idea/ 文件夹 特么我每次随便做点操作.这里面的东西也会随着自动改一些 一开始开始无视 如果是多人协同开发会导致代码合并相关的问题 因此 ...