[JavaScript知识库] html格式化JSON数据并显示小驼峰首字母大写分隔显示

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> html格式化JSON数据并显示小驼峰首字母大写分隔显示 -> 正文阅读

[JavaScript知识库]html格式化JSON数据并显示小驼峰首字母大写分隔显示

/*css*/
.string {
	color: green;
}

.number {
    color: darkorange;
}

.boolean {
    color: blue;
}

.null {
    color: magenta;
}

.key {
    color: red;
}

// 去除JSON字符串中key的双引号和冒号
function removeQuotesAndColon(str){
    let reg = new RegExp('\"|:',"g");
    let result = str.replace(reg, "");
    return result;
}

/**
 * 小驼峰分隔,首字母大写
 * name => Name:
 * testName => Test Name:
 * Name => Name:
 * @param val
 * @returns {string}
 */
function humpToStr(val){
    let newStr = removeQuotesAndColon(val);
    // 匹配到大写字母,替换为空格+该大写字母
    let str = newStr.replace(/([A-Z])/g," $1")
    // 首字母大写,去除首尾空格
    let result = str.substr(0,1).toUpperCase() + str.substr(1);
    return result.trim() + ":";
}


/**
* 格式化JSON数据
* @param str
* @returns {string}
*/
function parseJsonData(jsonData) {
            if (null == jsonData){
                return "";
            }
            let reg = new RegExp(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,"g");
            // 设置缩进为2个空格
            jsonData = JSON.stringify(JSON.parse(jsonData), null, 2);
            jsonData = jsonData
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;');

            return jsonData.replace(reg, function(match) {
                let cls = 'number';
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'key';
                        match = humpToStr(match)
                    } else {
                        cls = 'string';
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                } else if (/null/.test(match)) {
                    cls = 'null';
                }
                return '<span class="' + cls + '">' + match + '</span>';
            });
        }

效果图

测试数据:var data = ‘[{“date”: “2022/04/08”, “Text”: “text”, “number”: 22, “flag”: true,“HobbyList”:[“看电影”,“王者荣耀”]}, {“date”: “2022/04/08”, “Text”: “text”, “number”: 22, “flag”: true,“HobbyList”:[“看电影”,“王者荣耀”]}]’;