分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

json字符串CSS格式化

发布时间:2023-09-06 01:09责任编辑:沈小雨关键词:jsCSSjson

其实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格式化

原文地址:http://www.cnblogs.com/zoro-zero/p/7491493.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved