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 += "
";
                pos--;
                for (let j = 0; j < pos; j++) msg += '    ';
            }
            msg += char;
            if ((char == ',' || char == '{' || char == '[') && outOfQuotes) {
                msg += "
";
                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'), ""+src+""); //#99ffdd
    }
    return result;
}

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

请查看本人相关博文：antd table中将字符串解析为html展示 https://lushunde.blog.csdn.net/article/details/104450897