JS实现json格式美化【工具包系列】

 <!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>json格式美化</title></head><body><form id="form1" name="form1"><textarea name="sourcejson" id="sourcejson" cols="80" rows="30"></textarea>     <input type="button" onclick="formatJson();" value="美化"/><textarea name="targetjson" id="targetjson" cols="80" rows="30">  </textarea></form></body><script type="text/javascript">function repeat(s, count) {return new Array(count + 1).join(s);}function formatJson() {var json=  document.form1.sourcejson.value;var i           = 0,len          = 0,tab         = "    ",targetJson     = "",indentLevel = 0,inString    = false,currentChar = null;for (i = 0, len = json.length; i < len; i += 1) { currentChar = json.charAt(i);switch (currentChar) {case '{': case '[': if (!inString) { targetJson += currentChar + "\n" + repeat(tab, indentLevel + 1);indentLevel += 1; } else { targetJson += currentChar; }break; case '}': case ']': if (!inString) { indentLevel -= 1; targetJson += "\n" + repeat(tab, indentLevel) + currentChar; } else { targetJson += currentChar; } break; case ',': if (!inString) { targetJson += ",\n" + repeat(tab, indentLevel); } else { targetJson += currentChar; } break; case ':': if (!inString) { targetJson += ": "; } else { targetJson += currentChar; } break; case ' ':case "\n":case "\t":if (inString) {targetJson += currentChar;}break;case '"': if (i > 0 && json.charAt(i - 1) !== '\\') {inString = !inString; }targetJson += currentChar; break;default: targetJson += currentChar; break;                    } } document.form1.targetjson.value=targetJson;return;}</script></html>

注意：不要使用div作为输出容器，因为标签不会被执行。
运行结果

JS实现json格式美化【工具包系列】相关推荐

html js发送http请求数据格式,JS获取url参数,JS发送json格式的POST请求方法
一.获取url所有参数值 function US() { var name, value; var str = location.href; var num = str.indexOf("? ...
细微之处见真章之JSON格式美化
一.背景今天 @段段在技术群里提出一个问题:"如何实现JSON的格式美化". 具体含义是,通过后端代码实现将紧凑的JSON字符串变为更美观的形式. 如下面的JSON字符串 {\ ...
Node.js操作Json格式文件
json格式文件也是很常用的数据存储传输格式.本篇将介绍Node.js如何添加.修改和解析Json格式数据. /*** Json文件操作:添加.修改.删除以及读取*/ const fs = requi ...
js导出JSON格式文件
在src目录下新建tools文件价,在tools文件中新建index.js(文件内名字随意) 在index.js文件中 const Tools = {// 导出文件exportJson(name, d ...
ajax调取mysql数据显示在html_jQuery+Ajax+js请求json格式数据并渲染到html页面
json格式的数据文件有两种方式一种是xxx.json文件一种是xxx.php文件前者是json格式的文件后者是输出json格式的文件前者是本地的文件后者是获取数据库的数据再输出成json ...
java实现Json格式美化【工具包系列】
package com.json;/*** 该类提供格式化JSON字符串的方法.* 该类的方法formatJson将JSON字符串格式化,方便查看JSON数据.* <p>例如:* < ...
java实现json_java实现Json格式美化【工具包系列】
package com.json; /** * 该类提供格式化JSON字符串的方法. * 该类的方法formatJson将JSON字符串格式化,方便查看JSON数据. * 例如: * JSON字符串: ...
hive 导出json格式文件_Hive 系列之基本操作合集
下面是本课程概览: (1)hive系列之简介,安装,beeline和hiveserver2 (2)hive系列之基本操作 (3)hive系列之udf (4)hive系列之二级分区和动态分区 (5)hi ...
js 接收 json格式的字符串
方法一:函数构造定义法返回 var strJSON = "{name:'json name'}";//得到的JSON var obj = new Function("re ...

JS实现json格式美化【工具包系列】

JS实现json格式美化【工具包系列】相关推荐

最新文章

热门文章