antd table 高亮公臺展示格式化的json數據報文

環境說明

環境 node react antd

問題說明

查看log存儲報文信息，log記錄的是JSON格式的數據，用戶希望頁面

• 可以通過關鍵字搜索
• 返回報文需要JSIN格式化後展示
• 報文中 所有 搜索“關鍵字” 高亮顯示
  

思路

編寫JSON格式化的JS方法

通過判斷 [ ] { } ( ) , 等字符，添加空格數和回車，實現html的格式化

function jsonFormat(format){
	let msg='', pos = 0,  prevChar = '', outOfQuotes = true;
         for (let i = 0; i < format.length; i++) { //循環每一個字符
            let char = format.substring(i, i + 1);  //獲取到該字符
            if (char == '"' && prevChar != '\\') {  //如果轉移
                outOfQuotes = !outOfQuotes;         
            } else if ((char == '}' || char == ']') && outOfQuotes) {   //如果是關閉
                msg += "<br/>";
                pos--;
                for (let j = 0; j < pos; j++) msg += '    ';
            }
            msg += char;
            if ((char == ',' || char == '{' || char == '[') && outOfQuotes) {
                msg += "<br/>";
                if (char == '{' || char == '[') pos++;
                for (let k = 0; k < pos; k++) msg += '    ';
            }
            prevChar = char;
         }
	retutn msg;
}

關鍵字加高亮

替換關鍵字加html高亮標籤

function formatter(msg,src) {
    let result = msg;
    if(src !== null && src !==undefined && src !== '' ){
        result =  msg.replace( new RegExp(src,'gm'), "<span style='color: blue; font-weight: bold;'>"+src+"</span>"); //#99ffdd
    }
    return result;
}

以html形式插入到table擴展位置

請查看本人相關博文：antd table中將字符串解析爲html展示 https://lushunde.blog.csdn.net/article/details/104450897