JS 解决json字符串转换成json树形输出

问题： 后台获取一个字符串，格式为  string +jsonList+string+.....

就是传过来一堆数据，然后其中包含了一个json格式的list, 我们希望能将它输出成树形结构显示，能够直观点。

另外包含一些增加颜色，字符串截取的方法，可以自行调试。

典型案例：  接口返回值

转换前：

 转换后：

上代码：

/*
* 根据Value格式化为带有换行、空格格式的HTML代码
* @param strValue {String} 需要转换的值
* @return {String}转换后的HTML代码
* @example
* getFormatCode("测\r\n\s试") => “测<br/>&nbsp试”
*/
function getFormatCode(strValue){
return strValue.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;');
}
function convertJson(data){
var fistSign = data.indexOf('{');
var lastSign = data.lastIndexOf('}')
var dataStr = data.substring(fistSign,lastSign+1);
var dataJson = {
fistSign:fistSign,
lastSign:lastSign,
dataStr:dataStr
}
return dataJson;
}
//增加json颜色效果
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>';
});
}
//替换函数 alldata为原本字符串
//拼接字符串和Json组
function joinJson(alldata){
var fistSign = alldata.indexOf('----------');
if(fistSign==-1)
return alldata;
var n=alldata.charAt(alldata.length-1);
var lastSign = alldata.lastIndexOf(n);
var source = alldata.substring(fistSign,lastSign+1);

source = getFormatCode(source);
var fistS = source.indexOf('{');
if(fistS==-1)
return source;
var dataShow = convertJson(source);
var dataJson = eval('(' + dataShow.dataStr + ')');
//console.log(dataJson);
var dataFormat = formatJson(dataJson);
//增加一行换行
dataFormat = '<br>'+dataFormat;
dataFormat=syntaxHighlight(dataFormat);
alldataStr = source.replace(dataShow.dataStr,dataFormat);
return alldataStr;
}