quasar显示带换行的字符串

问题描述

提示：这里描述具体问题：在使用quasar框架时，有需求展示一个文件，内容是一篇文章，里面就会有换行符，但是在页面显示就是一行，没有换行符。

代码如下：

效果：

原因分析：

提示：这里填写问题的分析：字符串的换行在HTML中不能被识别，用{{}}也是不能被识别的。所以就没有显示换行。

---

解决方案：

提示：这里填写该问题的具体解决方案：用
来替换\n

先定义一个字符串变量，保存字符串数据。
如果拿到的是对象，先将对象转换成字符串，用JSON.stringify(obj)，然后做替换处理，再将字符串转换成json对象，用JSON.parse(str)
1、拿到数据先对字符串数据进行处理，使用replace()函数处理，将\n用
替换：
str.replace(/\n/g, ‘
’)
注意：正则全局检索‘\n’字符，用‘br’标签替换（用br标签替换是有原因的下面解释）

Vue代码：

<div v-html="item1"></div>

js代码：

	 item.value = { abc: 'asdasdasdasd\nrwerwerwer\naddadasda\n' }
     const result = JSON.stringify(item.value.abc)
     const result1 = result.replace(/\\n/g, '<br/>')
     item1.value = JSON.parse(result1)     

踩坑记录：（转载如果侵权，请告知，马上删除）
1、关于正则判断的踩坑：
用正则判定时踩了几个坑，用replace()函数处理时，一种写法是str.replace(/\r\n/g, ‘
’)，这种写法在Google浏览器控制台中编译的时候是生效的，但是在quasar项目中运行时无效。

因此，需要用比较严谨的正则方式，字符串中的\是特殊字符，检索是需要转义，在正则中需要转义的字段要在前面加上斜杠
所以最后需要写成**/\n/g**的格式，/g是正则全局判断的意思。

2、使用br标签替换的原因：
后端返回的字符串数据，换行符是**\n**，在前端渲染时，会发现，直接将字符串渲染时是无法识别的，有些道友会发现，\n也是可以换行的，比如在标签中直接渲染字符串。但是在quasar项目中，在标签中使用 {{}} 渲染变量数据时是无法识别换行的。
同样的，用br标签替换之后使用 {{}} 渲染变量数据也是无法识别的，因此要用v-html方法替换 {{}} 方法渲染。

---

欢迎评论：

提示：欢迎大家在评论区讨论相关问题。
可以关注博主，我会持续更新工作中遇到的技术小砖头，供大家使用。
也可以在评论区告知好的小砖头或技术，我会收录。
还可以指出本博文错误，希望大家不吝赐教。