JSON高亮格式化页面显示
高亮CSS定义:
<style type="text/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; }
</style>
JS高亮定义:
function syntaxHighlight(json) {
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>';
});
}
后台返回的json字符串,高亮格式化显示到元素内:
$("#id_show").empty();
var jdata = JSON.stringify(JSON.parse(data), null, 4);
$("#id_show").html("<pre>"+syntaxHighlight(jdata)+"</pre>");
最终效果参考:
JSON高亮格式化页面显示的更多相关文章
- jstl格式化页面显示科学计数法问题
<td content="planEnergy"><fmt:formatNumber value="${gg.planEnergy}" pat ...
- 杂记-格式化Date默认格式,日期加一天,jstl判断字符类型,ajax模拟from表单后台跳转页面,jstl访问数据库并在页面显示
1.格式化Date默认格式 String str="Sun Oct 08 22:36:45 CST 2017"; SimpleDateFormat sdf = new Simple ...
- JSon 事件格式化
JS~json日期格式化 起因 对于从C#返回的日期字段,当进行JSON序列化后,在前台JS里显示的并不是真正的日期,需要格式化时间 实现 function ChangeDateFormat(js ...
- PHP json数据格式化方法
php 的json_encode能把数组转换为json格式的字符串.字符串没有缩进,中文会转为unicode编码,例如\u975a\u4ed4.人阅读比较困难.现在这个方法在json_encode的基 ...
- AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9
1.切换目录,启动项目 git checkout step- npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3. ...
- jQuery:实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容
实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容 这个类似于京东或淘宝页面,根绝页面的滚动,显示下面的内容 如下图所示,一开始并不是所有的图片 ...
- gdb 查看变量~p长串末尾省略号, 一个页面显示不完
# MQClientAPIImpl::getTopicRouteInfoFromNameServer () at MQClientAPIImpl.cpp: # # # # # # # # # , ar ...
- 微信小程序开发过程中tabbar页面显示的相关问题及解决办法!
在微信小程序的开发过程中如果有使用过tabbar的同学,我相信一定会遇到一些困扰.为什么有些时候代码中明明已经在app.json里面增加了tabbar,可以页面中就是不显示呢?可不可以有些页面显示ta ...
- table形式的列表页面显示
(该案例在项目中的reserve_bchmc.html,其对应的后台在CountBean中) 先看一下效果图: 该列表页面并不是用easyUI中的datagrid实现的,而是用table实现页面显示的 ...
随机推荐
- Tomcat Geoserver等服务器 端口号修改
端口号修改是我们经常会用到的,这里整理一下我们常见的服务器端口号修改位置,后面在用到的时候会持续更新 注意:端口号修改服务都需要重启才有效. 1.Tomcat 位置:..\tomcat路径\conf\ ...
- pytorch clamp 与clamp_区别
pytorch clamp 与clamp_ ,有下划线的表示修改并付给自身,无下划线的表示需要返回处理后的值,比如: h = k.clamp(min=0) #将结果存入h,k保留原值 k.clamp_ ...
- Vagrant安装步骤
Vagrant安装步骤 下载添加box镜像 vagrant box add base 远端的box地址或者本地的box文件名 建立box镜像关联 vagrant box add centos72 va ...
- 3、docker 容器管理
Docker容器相对于OpenStack的云主机实例,虽然他们本质上不同.我们需要基于镜像来创建容器.容器是独立运行的一个或一组应用,以及它们的运行环境.对应的,虚拟机可以理解为模拟运行的一整套操作系 ...
- Trip
Trip 给出一个长度为n序列\(\{a_i\}\),长度为m的序列\(\{b_i\}\),求它们的不同lcs序列按字典序输出,\(n,m\leq 80\),lcs不超过1000个,字符为26个小写字 ...
- redis笔记_源码_简单动态字符串SDS
参照:https://zcheng.ren/sourcecodeanalysis/theannotatedredissourcesds/#sds%E5%B0%8F%E7%BB%93 这里用char b ...
- 剑指Offer-16:合并两个有序链表
题目描述: 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 例如A链表为1-3-5-7,B链表为2-4-6-8.所以合并后的新链表C为1-2-3-4-5- ...
- luoguP1062 数列 [数学]
题目描述 给定一个正整数k(3≤k≤15),把所有k的方幂及所有有限个互不相等的k的方幂之和构成一个递增的序列,例如,当k=3时,这个序列是: 1,3,4,9,10,12,13,… (该序列实际上就是 ...
- Redis过滤器如何与Envoy代理一起使用
1.克隆源码到机器 [root@cx-- ~]# git clone https://github.com/envoyproxy/envoy Cloning into 'envoy'... remot ...
- duilib教程之duilib入门简明教程18.其他
一.超链接按钮 代码很简单,参见360Demo: <Button text="{u}{a}求助{/a}{/u}" showhtml="true&qu ...