js代码:

 function syntaxHighlight(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
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>';
});
}

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>

html:

<pre id="response_json"></pre>

jQuery将json字符串显示在页面上的更多相关文章

  1. 数据量大的数据转换成jason并显示在页面上

    代码列子: public ActionResult FindUserByUserId(SysMessageDTO model) { CustomResultMsg customResult = new ...

  2. jquery的JSON字符串处理、单引号双引号的转换

    1.jquery的JSON字符串处理 var pwdlevel_val = "{"minLength":1,"maxLength":20," ...

  3. 【WPF学习笔记】之如何把数据库里的值读取出来然后显示在页面上:动画系列之(六)(评论处有学习资料及源码)

    (应博友们的需要,在文章评论处有源码链接地址,以及WPF学习资料.工具等,希望对大家有所帮助) ...... 承接系列五 上一节讲了,已经把数据保存到数据库并且删除数据,本讲是把已经存在的数据从数据库 ...

  4. echarts如何显示在页面上

    echarts如何显示在页面上 1.引入echarts的相关.js文件 <script src="js/echarts.min.js"></script> ...

  5. C#后台格式化JSON字符串显示

    很多时候我们从服务器上获取的JSON字符串是没有格式化的,如下: {"BusinessId":null,"Code":200,"Data": ...

  6. jQuery 中json字符串与对象互转

    json字符串转json对象:jQuery.parseJSON(jsonStr); json对象转json字符串:JSON.stringify(jsonObj);

  7. 把Employees显示在页面上

    项目代码下载:https://files.cnblogs.com/files/xiandedanteng/gatling20200429-1.zip 需求:从后台DB取出雇员数据,显示在前台页面上: ...

  8. Jquery解析Json字符串,并且动态生成数据表格Table

    //ajax获得后台传来的json字符串 $.post("UserInfo.ashx", function (data) { //假设data="{T1:[{User_I ...

  9. struts中用kindeditor实现的图片上传并且显示在页面上

    做公司网站的时候由于需要在内容属性中加入图片,所以就有了这个问题,本来一开始找几篇文章看都是讲修改kindeditor/jsp/file_manager_json.jsp和upload_json.js ...

随机推荐

  1. Axure Base 10 动态面板滑动效果

    示例原型:http://pan.baidu.com/s/1mgjYahi 实现目标: 1.  点击登录滑出登录面板 2.  点击确定滑出动态面板 最终效果如下: 这种效果可以通过两种方法实现: 首先准 ...

  2. JAVA反射改动常量,以及其局限

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/barryhappy/article/details/24442953 问题,以及一个解决方式 今天公 ...

  3. iOS中UIPickerView常见属性和方法的总结

    UIPickerView是iOS中的原生选择器控件,使用方便,用法简单,效果漂亮. @property(nonatomic,assign) id<UIPickerViewDataSource&g ...

  4. Codeforces Beta Round #25 (Div. 2 Only)D. Roads not only in Berland

    D. Roads not only in Berland time limit per test 2 seconds memory limit per test 256 megabytes input ...

  5. Linux 内核源码中likely()和unlikely()【转】

    本文转载自:http://blog.csdn.net/tigerjibo/article/details/8279183 ikely()与unlikely()在2.6内核中,随处可见,那为什么要用它们 ...

  6. HDU1693 Eat the Trees —— 插头DP

    题目链接:https://vjudge.net/problem/HDU-1693 Eat the Trees Time Limit: 4000/2000 MS (Java/Others)    Mem ...

  7. Navicat——如何导出所有的查询数据

    前言 很简单就是通过Navicat的查询来查询~ 步骤 真的不要太简单了~ 打开Navicat并点击查询 新建查询 选择对应的连接和库 写入SQL并运行 导出结果 1.选择导出当前的结果 2.选择保存 ...

  8. html5--3.2 input元素(2)

    html5--3.2 input元素(2) 学习要点 input元素及其属性 input元素 用来设置表单中的内容项,比如输入内容的文本框,按钮等 不仅可以布置在表单中,也可以在表单之外的元素使用 i ...

  9. BDB c++例子,从源码编译到运行

    第一步先下载源码,解压后 ./dist/configure --enable-cxx编译,然后make, make install --enable-cxx To build the Berkeley ...

  10. web 基本概念辨异 —— URI 与 URL

    两者的相同点: 都是唯一的,对资源(R:Resource)起到唯一的标识作用: 两者的不同点: URL 是 URI 的子集(URI 是父类,URL 是子类),是一种特定的实现形式: URI 可以是身份 ...