在html上展示格式化后的json数据

向右看齐 2023-02-12 15:20 1阅读 0赞

效果图

![20200526153501863.png][]

函数代码

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>';
        });
    }

样式代码

<style>
        pre {
            outline: 1px solid #ccc; padding: 5px; margin: 5px; 
            text-align: left;
        }
        .string { color: green; }
        .number { color: darkorange; }
        .boolean { color: blue; }
        .null { color: magenta; }
        .key { color: red; }
    </style>

html代码

<pre id="result">
    
    </pre>

调用代码

$('#result').html(syntaxHighlight(res));

[20200526153501863.png]: https://img-blog.csdnimg.cn/20200526153501863.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关如何在html中展示html语法的字符串

要在 HTML 中展示 HTML 语法的字符串，可以使用 HTML 实体的形式来转义这些字符。例如，要在 HTML 中展示尖括号 "<" 和 ">"，可以使用下列代码：

川长思鸟来/ 2024年03月26日 09:43/ 0 赞/ 81 阅读

相关 JSON 数据格式化神器之 JSON Crack

JSON Crack 官网：[https://jsoncrack.com/][https_jsoncrack.com] 项目地址：[https://github.co

电玩女神/ 2024年03月24日 16:53/ 0 赞/ 81 阅读

相关在html上展示格式化后的json数据

效果图 ![20200526153501863.png][] 函数代码 function syntaxHighlight(json) { if

向右看齐/ 2023年02月12日 15:20/ 0 赞/ 2 阅读

相关 vue项目将json转化为格式化的json,展示在界面中，可展开

一、安装插件 npm install vue-json-viewer --save 二、组件中引入 <script> import JsonVie

ゝ一纸荒年。/ 2022年11月02日 11:39/ 0 赞/ 132 阅读

相关 html字符串转换成json对象,json对象格式化成html字符串显示

function jsonStrFormat(jsonData, tableSpaceNum) \{ //缩进字符 var spaceStr = " "; var

阳光穿透心脏的1/2处/ 2022年10月05日 12:46/ 0 赞/ 385 阅读

相关 json格式化后的日期转换为DateTime

private DateTime getDateTimeByStr(String str) { SimpleDateFormat sdf = n

- 日理万妓/ 2022年06月08日 04:28/ 0 赞/ 178 阅读

相关格式化json数据展示可折叠样式

有很多时候我们需要展示json数据，并不仅仅是数据展示，如让json中的数据像树形一样展示实现可折叠，废话不多说直接上步骤： 1.项目中引入外部插件（可以百度或者加入下方交流

叁歲伎倆/ 2022年06月02日 00:38/ 0 赞/ 471 阅读

相关 jquery JSON-Viewer格式化json数据

1.json格式化后的效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

以你之姓@/ 2022年04月15日 00:53/ 0 赞/ 541 阅读

相关 Django,后端传的html代码在前端展示

前端使用富文本编辑器 ckeditor 生成的代码存储在数据库中，当从后台取出要展示到前端时，需要加上 \{% autoescape off %\} \{% endautoes

阳光穿透心脏的1/2处/ 2022年01月11日 00:03/ 0 赞/ 323 阅读

相关 jQuery格式化显示json数据

一、概述 JSONView 在gitlab上面，有一个jQuery JSONView插件，地址为：[https://github.com/yesmeck/jquer

- 日理万妓/ 2021年10月23日 19:16/ 0 赞/ 670 阅读