前端页面回车换行展示

最近频繁遇到回车换行显示，特记录下，方便查找。

一、html 中以标签 <br />展示

这种比较简单

• 直接写在页面里就好
• 字符串拼接，vue中以v-html显示，需要处理的话用正则匹配就可以:

str = str.replace(/\r\n/g,"<br/>");

不过这种方式有个缺点，其他字符（如制表符等）需要做特殊处理，有可能展示不了。

二、pre标签+回车换行符

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre>标签的一个常见应用就是用来表示计算机的源代码。

后端返回的数据格式类似这样：

[root@demo scc_demo]#↵
1\tOP instruction is :   JAL    PC=0x1008c   inst=0xff5ff0ef ↵
2\tOP instruction is :   JAL    PC=0x1008c   inst=0xff5ff0ef ↵
3\tOP instruction is :   JAL    PC=0x1008c   inst=0xff5ff0ef ↵
4\tOP instruction is :   JAL    PC=0x1008c   inst=0xff5ff0ef ↵
5\tOP instruction is :   JAL    PC=0x1008c   inst=0xff5ff0ef ↵
6\tOP instruction is :   JAL    PC=0x1008c   inst=0xff5ff0ef ↵;

回车换行符等其他源代码符号都可以正常展示。