文档章节

HTML显示json字符串并且进行格式化

writeademo
 writeademo
发布于 08/17 18:15
字数 165
阅读 44
收藏 0

通过pre标签进行格式化展示,使用JSON.stringify()方法转换。

代码如下:

 

 
  1. <html>

  2.  
  3. <head>

  4. <title>HTML显示json字符串并且进行格式化</title>

  5. </head>

  6.  
  7. <body>

  8. <p id="show_p">{ "name": "Brett", "address":"北京路23号", "email": "123456@qq.com" }</p>

  9. <pre id="out_pre"></pre>

  10.  
  11. </body>

  12. <script type="text/javascript">

  13.  
  14.   var text = document.getElementById('show_p').innerText; //获取json格式内容

  15.  
  16. var result = JSON.stringify(JSON.parse(text), null, 2);//将字符串转换成json对象

  17.  
  18. document.getElementById('out_pre').innerText= result ;

  19.   

  20.  
  21. </script>

  22.  
  23. </html>

© 著作权归作者所有

共有 人打赏支持
writeademo
粉丝 24
博文 537
码字总数 191837
作品 0
东城
私信 提问
Navi.Soft31.开发工具(含下载地址)

1系统简介 1.1功能简述 在软件开发过程中,我们需要经常对字符串、文件、数据库操作。有时需要浏览Json格式串,有时需要浏览Xml格式串,有时需要读取txt或excel文件,有时需要对数据库访问。本...

小特工作室
2017/11/02
0
0
ajax与spring mvc请求的总结

https://www.cnblogs.com/love540376/p/6912637.html dataType分类 dataType预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如XML MIME类型就被识...

废柴
10/16
0
0
PHP中String字符串处理函数完整版

文章来源:PHP开发学习门户 我的原创地址:http://www.phpthinking.com/archives/602 开发习惯常用字符串处理函数梳理: strtr() 转换字符串中特定的字符。 substr() 返回字符串的一部分。 ...

PHP开发学习门户
2014/10/16
0
0
leo108/jsonFormater

JsonFormater 基于jQuery的json格式化、高亮库 核心代码参考天马行空工作室,本人只做了模块化和一些代码优化。 demo http://leo108.github.io/jsonFormater/ 使用方式 引入jQuery 注意:jQu...

leo108
2014/06/24
0
0
Elasticsearch Date类型,时间存储相关说明

从昨晚开始,到今天中午之前,一直在纠结时间存储问题,昨晚是纠结时间取出来的问题。 其实我的想法很简单,我就想 存储到 Elasticsearch ,然后从 Elasticsearch 中再取出来的时候,它是个 ...

8446666
2016/07/04
2.3K
0

没有更多内容

加载失败,请刷新页面

加载更多

可自定义扩展底部列表对话框ListBottomSheetDialogFragment

因为需要,为了方便,构建了一个可以自定义扩展的底部列表对话框,可以应付大部分场景。 效果图如下: 1.默认实现: 2.自定义列表实现 3.自定义头部和列表实现 一.可实现功能 1.默认可实现通...

明月春秋
29分钟前
1
0
数据库---增删改查

增:insert into 表名(列名1,列名2) values(‘列值1’,‘列值2’) 多行数据处理:insert into 表名(列名1,列名2) select ‘列值1’,‘列值2’ union select ‘列值1.1’,‘列值2.2...

森林之下
30分钟前
2
0
分布式/集群下session共享方案汇总

除去那些对容器依赖特别高的方案(如: 基于Tomcat的memcached-session-manager / tomcat-redis-session-manager,基于Jetty的jetty-nosql-memcache / jetty-session-redis ),自己整理了下...

哥本哈根的小哥
56分钟前
2
0
Vue中的缩写:v-bind、v-on

v-bind 缩写:: 预期:any (with argument) | Object (without argument) 参数:attrOrProp (optional) 修饰符: .prop - 被用于绑定 DOM 属性。 .camel - (2.1.0+) 将 kebab-case 特性名转换......

文文1
今天
2
0
epoll中使用

1、一个线程epoll_wait时,另一个线程调用epoll_ctl是安全的。 2、使用edge触发,在socket有数据到来后,不收取数据,再次调用epoll_ctl将socket加入,仍会触发下一次动作。 asio用该方法来发...

gelare
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部