高亮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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
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>");

最终效果参考:

最新文章

  1. 一鼓作气 博客--第四篇 note4
  2. LeetCode Design Hit Counter
  3. 【BZOJ3211&amp;3038】花神游历各国&amp;上帝造题的七分钟2(CodeVS)
  4. Redis 的Lua Script脚本功能
  5. Spring Batch实践
  6. Window驱动开发
  7. 【转载】Asp.net Mvc 入门视频教程
  8. 初探 ref 和 out
  9. Gentoo本地化设置--Locale系统介绍
  10. git 常用使用及问题记录
  11. dos命令窗口修改编码,CMD编码修改方法
  12. github、gitlab 管理多个ssh key
  13. Angular JS的正确打开姿势——简单实用(下)
  14. 关于Android SDK Manager无法获取更新列表的正确设置
  15. java inputstream to string stack overflow
  16. 高仿腾讯QQ即时通讯IM项目
  17. List排序Collections.sort 重写compare
  18. boost生成json中的put操作
  19. Eleasticsearch启动失败问题解决
  20. BZOJ 1015: [JSOI2008]星球大战starwar(并查集求连通块+离线处理)

热门文章

  1. jdk1.8新特性学习
  2. adb命令 查看运行APP当前页面的Activity名称
  3. Delphi窗体间发送消息或字符串
  4. VS2010-MFC(对话框:一般属性页对话框的创建及显示)
  5. idea for mac 项目打开的情况下import project
  6. Android Support Library 学习入门
  7. C语言进阶学习第一章
  8. PAT甲级——A1139 First Contact【30】
  9. vue之.native修饰符
  10. vue+element的el-menu组件实现路由跳转及当前项的设置