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));

效果:

时间: 2024-11-17 14:14:58

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

HTML代码,CSS代码,JSON字符串在线格式化,美化工具

HTML代码,CSS代码,JSON字符串在线格式化,美化工具 http://www.phpthinking.com/format.htm

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

很多时候,我们拿Json字符串作为返回结果,但是当数据量多的时候,一堆的Json字符串看起来很不直观,这时候我们可以使用以下办法将Json字符串格式化一下再输出 var JsonUti = { //定义换行符 n: "\n", //定义制表符 t: "\t", //转换String convertToString: function (obj) { return JsonUti.__writeObj(obj, 1); }, //写对象 __writeObj: fun

用Java对JSON字符串进行格式化输出

工作中进行http相关接口测试时经常会收到返回的json数据,因为没有格式化输入到控制台后看起来很不直观. 早上写了一个小工具类,对这JSON串进行格式化输出,代替System.out.print package MyTest; /** * 格式化输入工具类 * @author lizhgb * @date 2015-10-14 * */ public final class FormatUtil { /** * 打印输入到控制台 * @param jsonStr * @author lizhg

正则表达式的格式化与高亮显示json字符串

使用正则表达式的格式化与高亮显示json字符串 json字符串很有用,有时候一些后台接口返回的信息是字符串格式的,可读性很差,这个时候要是有个可以格式化并高亮显示json串的方法那就好多了,下面看看一个正则表达式完成的json字符串的格式化与高亮显示 首先是对输入进行转换,如果是对象则转化为规范的json字符串,不是对象时,先将字符串转化为对象(防止不规范的字符串),然后再次转化为json串.其中json为输入. [js] view plaincopy if (typeof json !== '

使用正则表达式的格式化与高亮显示json字符串

使用正则表达式的格式化与高亮显示json字符串 json字符串很有用,有时候一些后台接口返回的信息是字符串格式的,可读性很差,这个时候要是有个可以格式化并高亮显示json串的方法那就好多了,下面看看一个正则表达式完成的json字符串的格式化与高亮显示 首先是对输入进行转换,如果是对象则转化为规范的json字符串,不是对象时,先将字符串转化为对象(防止不规范的字符串),然后再次转化为json串.其中json为输入. if (typeof json !== 'string') { json = JS

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

目录 1 使用阿里的fastjson 1.1 项目的pom.xml依赖 1.2 Java示例代码 2 使用谷歌的gson 2.1 项目的pom.xml依赖 2.2 Java示例代码 1 使用阿里的fastjson 1.1 项目的pom.xml依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.58&l

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

json字符串很有用,有时候一些后台接口返回的信息是字符串格式的,可读性很差,这个时候要是有个可以格式化并高亮显示json串的方法那就好多了,下面看看一个正则表达式完成的json字符串的格式化与高亮显示 首先是对输入进行转换,如果是对象则转化为规范的json字符串,不是对象时,先将字符串转化为对象(防止不规范的字符串),然后再次转化为json串.其中json为输入. if (typeof json !== 'string') { json = JSON.stringify(json); } el

MAC上安装并破解最新SublimeText3103版本,安装PrettyJSON离线格式化json字符串

开发中少不了将JSON字符串格式化,方便查看.之前都是在线转,最近知道ST安装个插件就可以离线格式化JSON就又倒腾起来了.还真遇到点麻烦,故此记录. 1,官网下载 Sublime Text Build 3103.dmg,双击安装: 2,输入注册码: -– BEGIN LICENSE -–Ryan ClarkSingle User LicenseEA7E-8124792158A7DE B690A7A3 8EC04710 006A5EEB34E77CA3 9C82C81F 0DB6371B 797

C# String.Format格式化json字符串中包含"{" "}"报错问题

json.Append(String.Format("{\"total\":{0},\"row\":{1}}", lineCount, strJSON));直接会报错 字符串中包含{或者},则需要用{{ 来代替字符 {,用}} 代替 }如:json.Append(String.Format("{{\"total\":{0},\"row\":{1}}}", lineCount, strJS