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, '&')
                .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”:[“看電影”,“王者榮耀”]}]’;