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": ...
随机推荐
- 爬虫系列二(数据清洗--->bs4解析数据)
一 BeautifulSoup解析 1 环境安装 - 需要将pip源设置为国内源,阿里源.豆瓣源.网易源等 - windows (1)打开文件资源管理器(文件夹地址栏中) (2)地址栏上面输入 %ap ...
- Linux查看mysql 安装路径和运行路径
一.查看文件安装路径 由于软件安装的地方不止一个地方,所有先说查看文件安装的所有路径(地址). 这里以mysql为例.比如说我安装了mysql,但是不知道文件都安装在哪些地方.放在哪些文件夹里,可以用 ...
- Oracle 执行计划(一)-------基本介绍
本文参照自:https://www.cnblogs.com/Dreamer-1/p/6076440.html 打开SQL执行计划: 1.选中一句正在执行的SQL 2.F5快捷键,就会出现下图,这就是执 ...
- zookeeper的分布式锁
实现分布式锁目前有三种流行方案,分别为基于数据库.Redis.Zookeeper的方案,其中前两种方案网络上有很多资料可以参考,本文不做展开.我们来看下使用Zookeeper如何实现分布式锁. 什么是 ...
- InetAddress类和InetSocketAddress类
InetAddress 类 封装计算机的 IP 地址,不包含端口号 InetAddress 类常用的方法 1 String getHostAddress() 获得 IP 地址 2 String get ...
- xgboost 参数调优指南
一.XGBoost的优势 XGBoost算法可以给预测模型带来能力的提升.当我对它的表现有更多了解的时候,当我对它的高准确率背后的原理有更多了解的时候,我发现它具有很多优势: 1 正则化 标准GBDT ...
- 使用 xUnit 编写 ASP.NET Core 单元测试
还记得 .NET Framework 的 ASP.NET WebForm 吗?那个年代如果要在 Web 层做单元测试简直就是灾难啊..NET Core 吸取教训,在设计上考虑到了可测试性,就连 ASP ...
- vue router mode模式在webpack 打包上线问题
vue-router mode模式有两种 hash和history. 1.hash —— 即地址栏 URL 中的 # 符号.比如这个 URL:http://www.abc.com/#/hello,ha ...
- OSGI target环境配置过程
新建一个通用工程 新建target环境 新建存放依赖包的目录 新建server目录,用于存放server.target对应的依赖包. 在server目录下,新建plugins目录 新建目录之后的, ...
- 关于mysql中的count()函数
1.count()函数是用来统计表中记录的一个函数,返回匹配条件的行数. 2.count()语法: (1)count(*)---包括所有列,返回表中的记录数,相当于统计表的行数,在统计结果的时候,不会 ...