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   at module.exports (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_prefix (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   at Immediate.next (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   at module.exports (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_prefix (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   at Immediate.next (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)){
                //数组采用[]包裹
                return `[\n${t}${"\t".repeat(num-1)}]`
              }
              return `{\n${t}${"\t".repeat(num-1)}}`
   }

//生成md语法的json代码块
text = "```json\n"+ObjToRetractJsonStr(this.resData)+"\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
	   at module.exports (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)
	   at Immediate.next (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传进行一个关键符合拆分后进行栈操作,记录一下当前数据的深度并在其中加入对应数量的缩进和换行符即可。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值