文本中有 \ n (换行符)的换行
// 通过样式white-space: pre-wrap; 实现换行
<p style="white-space: pre-wrap;">随便一段文字\n换行了</p>
vue项目通过v-html指令换行
// 前提只能解析<br>标签
<p v-html="msg1"></p>
<p v-html="changeLine(msg2)"></p>
data(){
return{
msg1: '随便一段文字<br>换行了 ',
msg2: '一段带有换行符的换行\n换行了,需要替换成 <br>'
}
},
methods:{
changeLine(str){
// 注意:通过请求回来的字符串且包含换行符↵,是等同于 r\n\n|\r
// 可以通过以下正则字符串替换
return str.replace(/(\r\n|\n|\r)/gm, "<br />");
}
}