html 显示json 优化json

最新推荐文章于 2023-03-24 18:00:47 发布

上海菜鸡毛

最新推荐文章于 2023-03-24 18:00:47 发布

阅读量336

点赞数

分类专栏：前端 css

本文链接：https://blog.csdn.net/qq_29755359/article/details/113744901

版权

前端同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

用jq，根据id评接标识获取json字符串。在调用方法格式化json字符串。得到html添加到pre

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
  <style>
    
    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>
 </head>  
 <body> 
  <p id="data214" value="{&quot;id&quot;:&quot;6550E5203DA642A57993228EEF6D4914&quot;,&quot;tag&quot;:null,&quot;publish_time&quot;:&quot;1612688592749&quot;,&quot;first_time&quot;:&quot;1612688594784&quot;,&quot;consumed_time&quot;:&quot;1&quot;,&quot;next_consumed_time&quot;:&quot;1612688654784&quot;,&quot;key&quot;:&quot;0&quot;,&quot;ties&quot;:{&quot;KEYS&quot;:&quot;601FACD0384531A63D23761A&quot;,&quot;__BORNHOST&quot;:&quot;101.80.229.32&quot;,&quot;__SHARDINGKEY&quot;:&quot;0&quot;}}"></p> 
  <a href="#" onclick="showJson(214)" data-toggle="modal" data-target="#myModal" class="btn btn-sm btn-primary"> 消息体</a> 
  <pre id="result"></pre> 
  <script>
    function showJson(id) {
        var json = $('#data'+id).attr('value');
        var res = JSON.parse(json);
        console.log(res)
        $('#result').html(syntaxHighlight(res));
        // $('#myModal').show();
    }

    function syntaxHighlight(json) {
        if (typeof json != 'string') {
            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>';
        });
    }
</script>   
 </body>
</html>

上海菜鸡毛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 显示json 优化json

用jq，根据id评接标识获取json字符串。在调用方法格式化json字符串。得到html添加到pre<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="http://libs.baidu.c.
复制链接

扫一扫

专栏目录