JS格式化JSON,JSON着色

<script>var jsObj = '{$data}';//远程数据json，可替换为自己的json也可以使用下方json测试jsObj = jsObj.replace(/"/,"");jsObj = jsObj.substring(0, jsObj.lastIndexOf('"'));$("#show").html(formatJson(jsObj));//$("#show").html(jsObj);Process();//格式化代码函数,已经用原生方式写好了不需要改动,直接引用就好function formatJson(json, options) {var reg = null,formatted = '',pad = 0,PADDING = '    ';options = options || {};options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;if (typeof json !== 'string') {json = JSON.stringify(json);} else {json = JSON.parse(json);json = JSON.stringify(json);}reg = /([\{\}])/g;json = json.replace(reg, '\r\n$1\r\n');reg = /([\[\]])/g;json = json.replace(reg, '\r\n$1\r\n');reg = /(\,)/g;json = json.replace(reg, '$1\r\n');reg = /(\r\n\r\n)/g;json = json.replace(reg, '\r\n');reg = /\r\n\,/g;json = json.replace(reg, ',');if (!options.newlineAfterColonIfBeforeBraceOrBracket) {reg = /\:\r\n\{/g;json = json.replace(reg, ':{');reg = /\:\r\n\[/g;json = json.replace(reg, ':[');}if (options.spaceAfterColon) {reg = /\:/g;json = json.replace(reg, ':');}(json.split('\r\n')).forEach(function (node, index) {//console.log(node);var i = 0,indent = 0,padding = '';if (node.match(/\{$/) || node.match(/\[$/)) {indent = 1;} else if (node.match(/\}/) || node.match(/\]/)) {if (pad !== 0) {pad -= 1;}} else {indent = 0;}for (i = 0; i < pad; i++) {padding += PADDING;}formatted += padding + node + '\r\n';pad += indent;});return formatted;};//引用示例部分//(1)创建json格式或者从后台拿到对应的json格式//var originalJson = {"name": "binginsist", "sex": "男", "age": "25"};//下面用一个真实的json数据做测试//var originalJson = {//    "_errmsg":"ok",//    "result":[//    ],//    "stat":"wechat",//    "_token":"",//    "weixinId":"900504",//    "_errcode":"0",//    "regionId":"00000000"//}////(2)调用formatJson函数,将json格式进行格式化//var resultJson = formatJson(originalJson);(3)将格式化好后的json写入页面中//document.getElementById("writePlace").innerHTML = '<pre>' +resultJson + '<pre/>';//着色function IsArray(obj) {return obj &&typeof obj === 'object' &&  typeof obj.length === 'number' && !(obj.propertyIsEnumerable('length'));}function Process() {var json = $('#show').text();console.log(json);var html = "";try {if (json == "") {json = '""';}var obj = eval("[" + json + "]");html = ProcessObject(obj[0], 0, false, false, false);$("#show").html(html);} catch(e) {}}function ProcessObject(obj, indent, addComma, isArray, isPropertyContent) {var html = "";var comma = (addComma) ? "<span class='Comma'>,</span> ": "";var type = typeof obj;if (IsArray(obj)) {if (obj.length == 0) {html += GetRow(indent, "<span class='ArrayBrace'>[ ]</span>" + comma, isPropertyContent);} else {html += GetRow(indent, "<span class='ArrayBrace'>[</span>", isPropertyContent);for (var i = 0; i < obj.length; i++) {html += ProcessObject(obj[i], indent + 1, i < (obj.length - 1), true, false);}html += GetRow(indent, "<span class='ArrayBrace'>]</span>" + comma);}} else {if (type == "object" && obj == null) {html += FormatLiteral("null", "", comma, indent, isArray, "Null");} else {if (type == "object") {var numProps = 0;for (var prop in obj) {numProps++;}if (numProps == 0) {html += GetRow(indent, "<span class='ObjectBrace'>{ }</span>" + comma, isPropertyContent)} else {html += GetRow(indent, "<span class='ObjectBrace'>{</span>", isPropertyContent);var j = 0;for (var prop in obj) {html += GetRow(indent + 1, '<span class="PropertyName">"' + prop + '"</span>: ' + ProcessObject(obj[prop], indent + 1, ++j < numProps, false, true))}html += GetRow(indent, "<span class='ObjectBrace'>}</span>" + comma);}} else {if (type == "number") {html += FormatLiteral(obj, "", comma, indent, isArray, "Number");} else {if (type == "boolean") {html += FormatLiteral(obj, "", comma, indent, isArray, "Boolean");} else {if (type == "function") {obj = FormatFunction(indent, obj);html += FormatLiteral(obj, "", comma, indent, isArray, "Function");} else {if (type == "undefined") {html += FormatLiteral("undefined", "", comma, indent, isArray, "Null");} else {html += FormatLiteral(obj, '"', comma, indent, isArray, "String");}}}}}}}return html;};function FormatLiteral(literal, quote, comma, indent, isArray, style) {if (typeof literal == "string") {literal = literal.split("<").join("&lt;").split(">").join("&gt;");}var str = "<span class='" + style + "'>" + quote + literal + quote + comma + "</span>";if (isArray) {str = GetRow(indent, str);}return str;}function FormatFunction(indent, obj) {var tabs = "";for (var i = 0; i < indent; i++) {tabs += "    ";}var funcStrArray = obj.toString().split("\n");var str = "";for (var i = 0; i < funcStrArray.length; i++) {str += ((i == 0) ? "": tabs) + funcStrArray[i] + "\n";}return str;}function GetRow(indent, data, isPropertyContent) {var tabs = "";for (var i = 0; i < indent && !isPropertyContent; i++) {tabs += "    ";}if (data != null && data.length > 0 && data.charAt(data.length - 1) != "\n") {data = data + "\n";}return tabs + data;};
</script><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><style>body {font-size:14px;font-family:consolas;}pre {font-family:'consolas';}.Canvas {font:14px/18px 'consolas';background-color: #ECECEC;color: #000000;border: solid 1px #CECECE;}.ObjectBrace {color: #00AA00;font-weight: bold;}.ArrayBrace {color: #0033FF;font-weight: bold;}.PropertyName {color: #CC0000;font-weight: bold;}.String {color: #007777;}.Number {color: #AA00AA;}.Boolean {color: #0000FF;}.Function {color: #AA6633;text-decoration: italic;}.Null {color: #0000FF;}.Comma {color: #000000;font-weight: bold;}PRE.CodeContainer {margin-top: 0px;margin-bottom: 0px;}</style>
<div class="alert alert-info alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><h3 class="font-w300 push-15">结果</h3><pre id = "show" class="CodeContainer" style=" width: 100%;min-height: 600px;height: 100%;"></pre>
</div>

JS格式化JSON,JSON着色相关推荐

解决vscode格式化代码html属性换行问题； ctrl+s格式化去除分号，格式化自动单引号；解决js格式化换行问题；mac上的settings.json完整配置
右键格式化文档或者ctrl + s保存 html不换行 1.安装两个插件①vetur ②Prettier - Code formatter 2.在vetur的settings.json中设置配置ct ...
JS格式化json并展示
一.格式化json数据展示区域第1种: <div id="showJsonData1" contenteditable="true" style=&qu ...
使用js格式化json
var jsonStr;// json字符串 // 格式化json字符串 var jsonFormat = formatJson(jsonStr); // 工具方法 var formatJson = ...
jq输出文本_如何用 Linux 命令行工具解析和格式化输出 JSON | Linux 中国
我们将使用 Linux 上的命令行工具解析并格式化打印 JSON.它对于在 shell 脚本中处理大型 JSON 数据或在 shell 脚本中处理 JSON 数据非常有用.-- Ostechnix J ...
js遍历json数组给html td赋值,JS实现给json数组动态赋值的方法示例
关注微信公众号 JS实现给json数组动态赋值的方法示例转载更新时间:2017年07月04日 10:19:00 作者:小魏的马仔这篇文章主要介绍了JS实现给json数组动态赋值的方法,结合 ...
实现JSON在线美化(格式化)、JSON转CSV、CSV转XML工具-toolfk程序员工具网
本文要推荐的[ToolFk]是一款程序员经常使用的线上免费测试工具箱,ToolFk 特色是专注于程序员日常的开发工具,不用安装任何软件,只要把内容贴上按一个执行按钮,就能获取到想要的内容结果.Tool ...
c语言中json格式化输出,JSON格式化输出
JSON格式化输出今天有个需求是对输出的JSON进行格式化首先想到的就是jsBeautifier之类的小插件搜索了一番看到有一位朋友回答JSON.stringify可以输出格式化的JSON字符串 ...
nodejs写入json文件，格式化输出json的方法
将 JSON 对象写入文件. 使用 fs.writeFile(),模板字面量和 JSON.stringify() 将 json 对象写入到 .json 文件中. 写入json文件后,都会出现很恶心的 ...
linux服务器返回json,Linux 命令行工具解析和格式化输出 JSON的方法
JSON 是一种轻量级且与语言无关的数据存储格式,易于与大多数编程语言集成,也易于人类理解 -- 当然,如果格式正确的话.JSON 这个词代表 J ava S cript O bject N otat ...
js 中读取JSON的方
js 中读取JSON的方法探讨 2009-03-01 16:08 js读取JSON的方法我接触到的有两种: 方法一:函数构造定义法返回 var strJSON = "{name:'json ...

JS格式化JSON,JSON着色

JS格式化JSON,JSON着色相关推荐

最新文章

热门文章