前言：
最近做的项目中遇到个需要在前端页面中将某个设备需要的数据格式展示出来，方便用户配置。一开始单纯的将数据格式写入到pre标签中， 但是通过pre标签写入的数据格式在代码可视化上不是很优雅。由于上述原因，所以就创建了一个全局的数据格式配置文件，通过es6 中的模板字符串来实现，这样就解决了代码可视化不优雅的问题。但是后面又增加了一个动态数据格式的需求，这样一来就不能通过模板字符串来 解决了，所以就有了这篇文章中讲述的通过js格式画JSON数据的方案，这篇文章旨在记录方案实现的方法，方便自己 以后遇到同样的需求直接粘贴复制，同时也希望能够帮助到遇到和我一样需求的码农。
示例效果图如下：
预览地址：js实现格式化JSON数据
js格式化JSON数据的方法如下，其中各块代码具体表示的什么意思及完成的功能都通过注释的方式进行了详细说明。
1 // 格式方法 2 // 公共方法 3 function transitionJsonToString (jsonObj, callback) { 4 // 转换后的jsonObj受体对象 5 var _jsonObj = null; 6 // 判断传入的jsonObj对象是不是字符串，如果是字符串需要先转换为对象，再转换为字符串，这样做是为了保证转换后的字符串为双引号 7 if (Object.prototype.toString.call(jsonObj) !== "[object String]") { 8 try { 9 _jsonObj = JSON.stringify(jsonObj); 10 } catch (error) { 11 // 转换失败错误信息 12 console.error('您传递的json数据格式有误，请核对...'); 13 console.error(error); 14 callback(error); 15 } 16 } else { 17 try { 18 jsonObj = jsonObj.replace(/(\')/g, '\"'); 19 _jsonObj = JSON.stringify(JSON.parse(jsonObj)); 20 } catch (error) { 21 // 转换失败错误信息 22 console.error('您传递的json数据格式有误，请核对...'); 23 console.error(error); 24 callback(error); 25 } 26 } 27 return _jsonObj; 28 } 29 // callback为数据格式化错误的时候处理函数 30 function formatJson (jsonObj, callback) { 31 // 正则表达式匹配规则变量 32 var reg = null; 33 // 转换后的字符串变量 34 var formatted = ''; 35 // 换行缩进位数 36 var pad = 0; 37 // 一个tab对应空格位数 38 var PADDING = ' '; 39 // json对象转换为字符串变量 40 var jsonString = transitionJsonToString(jsonObj, callback); 41 if (!jsonString) { 42 return jsonString; 43 } 44 // 存储需要特殊处理的字符串段 45 var _index = []; 46 // 存储需要特殊处理的“再数组中的开始位置变量索引 47 var _indexStart = null; 48 // 存储需要特殊处理的“再数组中的结束位置变量索引 49 var _indexEnd = null; 50 // 将jsonString字符串内容通过\r\n符分割成数组 51 var jsonArray = []; 52 // 正则匹配到{,}符号则在两边添加回车换行 53 jsonString = jsonString.replace(/([\{\}])/g, '\r\n$1\r\n'); 54 // 正则匹配到[,]符号则在两边添加回车换行 55 jsonString = jsonString.replace(/([\[\]])/g, '\r\n$1\r\n'); 56 // 正则匹配到,符号则在两边添加回车换行 57 jsonString = jsonString.replace(/(\,)/g, '$1\r\n'); 58 // 正则匹配到要超过一行的换行需要改为一行 59 jsonString = jsonString.replace(/(\r\n\r\n)/g, '\r\n'); 60 // 正则匹配到单独处于一行的,符号时需要去掉换行，将,置于同行 61 jsonString = jsonString.replace(/\r\n\,/g, ','); 62 // 特殊处理双引号中的内容 63 jsonArray = jsonString.split('\r\n'); 64 jsonArray.forEach(function (node, index) { 65 // 获取当前字符串段中"的数量 66 var num = node.match(/\"/g) ? node.match(/\"/g).length : 0; 67 // 判断num是否为奇数来确定是否需要特殊处理 68 if (num % 2 && !_indexStart) { 69 _indexStart = index 70 } 71 if (num % 2 && _indexStart && _indexStart != index) { 72 _indexEnd = index 73 } 74 // 将需要特殊处理的字符串段的其实位置和结束位置信息存入，并对应重置开始时和结束变量 75 if (_indexStart && _indexEnd) { 76 _index.push({ 77 start: _indexStart, 78 end: _indexEnd 79 }) 80 _indexStart = null 81 _indexEnd = null 82 } 83 }) 84 // 开始处理双引号中的内容，将多余的"去除 85 _index.reverse().forEach(function (item, index) { 86 var newArray = jsonArray.slice(item.start, item.end + 1) 87 jsonArray.splice(item.start, item.end + 1 - item.start, newArray.join('')) 88 }) 89 // 奖处理后的数组通过\r\n连接符重组为字符串 90 jsonString = jsonArray.join('\r\n'); 91 // 将匹配到:后为回车换行加大括号替换为冒号加大括号 92 jsonString = jsonString.replace(/\:\r\n\{/g, ':{'); 93 // 将匹配到:后为回车换行加中括号替换为冒号加中括号 94 jsonString = jsonString.replace(/\:\r\n\[/g, ':['); 95 // 将上述转换后的字符串再次以\r\n分割成数组 96 jsonArray = jsonString.split('\r\n'); 97 // 将转换完成的字符串根据PADDING值来组合成最终的形态 98 jsonArray.forEach(function (item, index) { 99 console.log(item) 100 var i = 0; 101 // 表示缩进的位数，以tab作为计数单位 102 var indent = 0; 103 // 表示缩进的位数，以空格作为计数单位 104 var padding = ''; 105 if (item.match(/\{$/) || item.match(/\[$/)) { 106 // 匹配到以{和[结尾的时候indent加1 107 indent += 1 108 } else if (item.match(/\}$/) || item.match(/\]$/) || item.match(/\},$/) || item.match(/\],$/)) { 109 // 匹配到以}和]结尾的时候indent减1 110 if (pad !== 0) { 111 pad -= 1 112 } 113 } else { 114 indent = 0 115 } 116 for (i = 0; i < pad; i++) { 117 padding += PADDING 118 } 119 formatted += padding + item + '\r\n' 120 pad += indent 121 }) 122 // 返回的数据需要去除两边的空格 123 return formatted.trim(); 124 }