json在线解析功能代码实现

 当在查看一些原始报文数据时，需要美化展示原始报文json，这时需要使用css进行相应排版。下面的<pre>标签不能换成其他标签(例如div、a等)，否则不能换行显示，暂时没有发现问题所在。这里用到了bootstrap tab插件需要引入css及js相关文件<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

jsp部分

<div class="modal fade popup" id="message" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static"><div class="modal-dialog" style="width:1000px;"><div class="modal-content"><div class="panel panel-info"><div class="panel-heading">报文明细<span class="pull-right"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></span></div><div class="panel-body" style="overflow-y: auto; max-height:600px;"><ul id="myTab" class="nav nav-tabs"><li class="active"><a href="#first" data-toggle="tab">信贷报文</a></li><li><a href="#second" data-toggle="tab">三方报文</a></li></ul><div id="myTabContent" class="tab-content"><div class="tab-pane fade in active high-night-show" id="first"><pre class="creditInfo">信贷报文</pre></div><div class="tab-pane fade high-night-show" id="second"><pre class="loadInfo">三方报文</pre></div></div></div></div></div></div></div>

js部分

function syntaxHighlight(json) {if (typeof json == 'string') {json = JSON.parse(json);}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>';});
};$(".creditInfo").html(syntaxHighlight(creditInfo));
$(".loadInfo").html(syntaxHighlight(loadInfo));
$("#message").modal();

css部分

pre {outline: 1px solid #ccc;padding: 5px;margin: 5px;
}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }

最终效果

学习Java的同学注意了！！！
学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入Java学习交流群，群号码：543120397 我们一起学Java！

json在线解析功能代码实现相关推荐

json在线解析工具大集合
** json在线解析工具大集合 ** http://json.jsrun.net JSRUN推出的JSON视图工具,简洁易用,清晰明了. 可能是国内最好用的JSON工具了. http://jsonv ...
json在线解析工具json formatter and json parser online
json在线解析工具json formatter and json parser online, 推荐工具http://www.bestjson.com
Json Parser Online - Json 在线解析工具 1
Json Parser Online - Json 在线解析工具 1 http://json.parser.online.fr/ References https://yongqiang.blog.c ...
json 在线解析正则在线解析
在线解析你的JSON文档是否符合标准.部署到web应用前,先用这个来查查错,事半功倍. 地址: http://json.parser.online.fr/ 在线正则验证器http://regexpal ...
HTML在线解析UBB代码小工具:DISCUZ UBB互相转换为HTML
分享一个非常易于使用的UBB和HTML代码互相转换的在线工具. 方便在Discuz建立的论坛使用. 经过测试,没有问题. HTML源代码转换UBB代码工具 https://www.chenweilia ...
esp8266如何玩转arduionjson新版v6 json在线解析序列化与反序列化（太极创客学习者）
问题源于太极创客视频所教程里面的json网站版本是之前的,现在版本已经更新有所改变. 太极创客学习网址:https://www.bilibili.com/video/BV1L7411c7jw?spm_ ...
json在线解析与格式化
这种操作,可以通过https://www.json.cn的方式进行格式化,但是目前使用的网站内容是有故障的,如果直接使用其中的下载按钮可以下载出相应的json文件,但是该文件是错误的,需要通过按钮 ...
Ace教你一步一步做Android新闻客户端（三） JSON数据解析
对于服务器端来说,返回给客户端的数据格式一般分为html.xml和json这三种格式,现在给大家讲解一下json这个知识点, 1 如何通过json-lib和gson这两个json解析库来对解析我们的j ...
java转json在线工具,[工具]JSON校验、转换在线工具
1. 在线JSON代码检验.检验.美化.格式化工具[简单易用的格式化工具]: http://tools.jb51.net/code/json 2. JSON在线格式化工具[代码高亮及可控缩进大小的格式 ...

json在线解析功能代码实现

文章目录

json在线解析功能代码实现

jsp部分

js部分

css部分

最终效果

json在线解析功能代码实现相关推荐

最新文章

热门文章