前台页面回车换行展现

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

一、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 ↵;

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