JSON或者对象转化为格式化（缩进+换⾏）Markdown的json代码块字符串
⼩⽉⼣在业务中遇到⼀个需要，需要把来⾃后端的⼀个对象转化为md格式并进⾏渲染。
⾸先尝试了直接把对象转为json，然后前后分别拼接上```json ```即可.
但是效果如下
{"err_status":0,"principal":null,"_id":"5eaac83927e3e77ecc7e6a68","ip":"::ffff:127.0.0.1","type":"POST","err_type":"TypeError","err_msg":"TypeError: articles .aggregate(...).populate is not a function\n\t ports (C:\\Users\\w\\Desktop\\blog\\blog-api\\router\\routers\\article\\getAllArticle.js:23:12)\n\t at C:\\Users\\w\\Desktop\\blog\\blog-api\\router\\routers\\article\\index.js:30:34\n\t at Layer.handle [as handle_request] (C:\\Users\\w\\Desktop\\blog\\blog-api\ \node_modules\\express\\lib\\router\\layer.js:95:5)\n\t at next (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\route.js:137:13)\n \t at Route.dispatch (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\route.js:112:3)\n\t at Layer.handle [as handle_request] (C :\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\layer.js:95:5)\n\t at C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express \\lib\\router\\index.js:281:22\n\t at Function.process_params (C:\\Users\\w
\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:335:12)\n\ t at next (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:275:10)\n\t at Function.handle (C:\\Users\\w\\Desktop\\blog\\ blog-api\\node_modules\\express\\lib\\router\\index.js:174:3)\n\t at router (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index. js:47:12)\n\t at Layer.handle [as handle_request] (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\layer.js:95:5)\n\t at trim_pref ix (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:317:13)\n\t at C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\ express\\lib\\router\\index.js:284:7\n\t at Function.process_params (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:335 :12)\n\t (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:275:10)","req_data":{"body":{"className":"前端"},"query":{}},"err_file":"C:\\Users\\w\\Desktop\\blog\\blog-api\\router\\routers\\article\\getAllArticle.js","date":"2020-04-30 20:44:41","__v":0}
渲染结果并不会将json跳⾏和格式化（就连CSDN都⽆法⾃动格式化，可想⽽知这是需要⾃⼰实现的）。
然后我尝试直接对逗号后⾯加上换⾏(效果如下)
{"err_status":0,
"principal":null,
"_id":"5eaac83927e3e77ecc7e6a68",
"ip":"::ffff:127.0.0.1",
"type":"POST",
"err_type":"TypeError",
"err_msg":"TypeError: articles.aggregate(...).populate is not a function\n\t ports (C:\\Users\\w\\Desktop\\blog\\blog-api\\router\\routers\\article\ \getAllArticle.js:23:12)\n\t at C:\\Users\\w\\Desktop\\blog\\blog-api\\router\\routers\\article\\index.js:30:34\n\t at Layer.handle [as handle_request] (C:\\User s\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\layer.js:95:5)\n\t at next (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\ lib\\router\\route.js:137:13)\n\t at Route.dispatch (C:\\Users\\w\\Deskto
p\\blog\\blog-api\\node_modules\\express\\lib\\router\\route.js:112:3)\n\t at Layer.h andle [as handle_request] (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\layer.js:95:5)\n\t at C:\\Users\\w\\Desktop\\blog\\blog -api\\node_modules\\express\\lib\\router\\index.js:281:22\n\t at Function.process_params (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\l ib\\router\\index.js:335:12)\n\t at next (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:275:10)\n\t at Function.handle ( C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:174:3)\n\t at router (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modul es\\express\\lib\\router\\index.js:47:12)\n\t at Layer.handle [as handle_request] (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\ layer.js:95:5)\n\t at trim_prefix (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:317:13)\n\t at C:\\Users\\w\\Desktop\\bl og\\blog-api\\node_modules\\express\\lib\\router\\index.js:284:7\n\t at Function.process_params (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\ex press\\lib\\router\\index.js:335:12)\n\t (C:\\Users\\w\\Desktop\\blog\\blog-api\\node_modules\\express\\lib\\router\\index.js:275:10)", "req_data":{"body":{"className":"前端"},
"query":{}},
"err_file":"C:\\Users\\w\\Desktop\\blog\\blog-api\\router\\routers\\article\\getAllArticle.js",
"date":"2020-04-30 20:44:41",
"__v":0}
后⾯尝试了各种replace规则效果都不佳
迫不得已只能⾃⼰封装⼀个⽣成字符串的规则（当时使⽤的是vue开发，所以并没有对⽅法进⾏兼容ie10-的打算），代码如下
function ObjToRetractJsonStr(obj, num){
if(!num){//是否第⼀层
num =1;
}
let t =""
for(let k in obj){
if(obj[k]!==null&&typeof obj[k]==="object"){
t +=`${"\t".repeat(num)}"${k}": ${ObjToRetractJsonStr(obj[k],num+1)},\n`
}else{
t +=`${"\t".repeat(num)}"${k}": ${typeof obj[k]==="string"?"\""+obj[k]+"\"":obj[k]},\n`
}
}
//}或者]结束符缩进
if(Array.isArray(obj)){vuejson转对象
//数组采⽤[]包裹
return`[\n${t}${"\t".repeat(num-1)}]`
}
return`{\n${t}${"\t".repeat(num-1)}}`
}
//⽣成md语法的json代码块
text ="```json\n"+sData)+"\n```"
效果如下
{
"err_status":0,
"principal":null,
"_id":"5eaac83927e3e77ecc7e6a68",
"ip":"::ffff:127.0.0.1",
"type":"POST",
"err_type":"TypeError",
"err_msg": "TypeError: articles.aggregate(...).populate is not a function
ports(C:\Users\w\Desktop\blog\blog-api\router\routers\article\getAllArticle.js:23:12)
at C:\Users\w\Desktop\blog\blog-api\router\routers\article\index.js:30:34
at Layer.handle [as handle_request](C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\layer.js:95:5) at next(C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch(C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request](C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\layer.js:95:5) at C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\index.js:281:22
at Function.process_params(C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\index.js:335:12)
at next(C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\index.js:275:10)
at Function.handle(C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\index.js:174:3)
at router(C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\index.js:47:12)
at Layer.handle [as handle_request](C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\layer.js:95:5) at trim_prefix(C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\index.js:317:13)
at C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\index.js:284:7
at Function.process_params(C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\index.js:335:12)
(C:\Users\w\Desktop\blog\blog-api\node_modules\express\lib\router\index.js:275:10)",
"req_data":{
"body":{
"className":"前端",
},
"query":{
},
},
"err_file":"C:\Users\w\Desktop\blog\blog-api\router\routers\article\getAllArticle.js",
"date":"2020-04-30 20:44:41",
"__v":0,
}
达到要求（内容跳⾏不会json⾼亮，如果想⾼亮不跳⾏即可）
IE兼容⽅案推荐
（⼀个天上飞的理论⽽已，由于⼩⽉⼣当时时间并不是很充裕，就⽆法亮出具体代码了）
可以尝试借鉴栈计算算式的原理，对未格式化的json传进⾏⼀个关键符合拆分后进⾏栈操作，记录⼀下当前数据的深度并在其中加⼊对应数量的缩进和换⾏符即可。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论