因工作需要,将部分过程的日志存储至数据库,实现过程数据的回溯,但是在存放到数据库中再取回前端展示时无法正常换行,所以这里整理一下处理方式
网上看到的有如下两种方法:
方法1:直接在外层容器设置css属性,white-space:pre-wrap
方法2:换行符在js中用\r\n表示,拿到文字内容,使用字符串的replace方法全局替换即可,string.replace(/\r\n/g,'</br>')
但是经过测试,可能我的使用方式有问题,方法1并未生效,方法2也是之前用过的,是可以正常使用的,只不过方式稍有不同而已,下面会详细说明。
前期发过一篇笔记,说明js中的replaceAll方法的问题 关于JavaScript .replaceAll() is not a function type error问题 - 沙漠渔溏 https://www.sammery.com/archives/32.html 这里面详细说明了replace和replaceAll的问题,需要的可以看看,之所以再发一次,主要是我对正则表达式不太会用,正好看到这里有一个方法挺好用,就再说一次。
再者,还有一个原因,是因为现在使用的vue,在使用的时候,并不需要在js中操作了,直接
<div v-html="string.replace(/\n/g,'</br>')"></div>
一切就搞定了,简直太舒服了。
记录只是为了记住
评论区