前端页面上换行、根据后端返回的换行符（“↵”）进行换行展示（vue、v-html）

拼搏现实的明天。 2023-01-19 12:59 3阅读 0赞

> 有时候我们会遇到这样的需求：后端返回一个换行符（“↵”），前端拿到后需求根据该符号进行换行展示

*  **方法一：textarea赋值**
    
    当我们拿到后端返回的数据时，直接通过v-model绑定给textarea，就会有默认的换行，但是它不能随内容高度增加textarea高度实现自适应，如果用JS来实现的话，相对麻烦一点。
 *  **方法二：使用v-html输出文本**
    
    “↵”符号在html中会识别别为\\r,\\n等转义字符，所以我们可以使用\\r\\n去替换（`.replace(/(\r\n|\n|\r)/gm, ' < br /> ')`）

示例代码如下：

// 部分代码
    <p>相关说明：<p>
    <span v-html="detail.replace(/(\r\n|\n|\r)/gm, '<br />')"></span>

结果如下：  
![在这里插入图片描述][20210510180000251.png]

*  **方法三：在vue中实现（计算属性）**
    
    将文本字符串转化为数组（split() 方法用于把一个字符串分割成字符串数组），然后将数组中“\\n”换成浏览器正常解析的换行标签< br >即可。  
    然后使用正则表达式来将字符串的换行符转换为< br >，最后使用join() 方法用于把数组中的所有元素放入一个字符串用以展示。

示例代码如下：

//部分代码：
    <div v-html="content"></div>
    //计算属性
    computed: { 
        content () { 
          //this.res.data是后端传回来的文本数据，就是要对这个数据进行处理
          let arr = this.res.data.split("");
          return arr.map((item) => { 
            return item === "\n" ? "<br>" : item
          }).join("")
        }
      },

*  **方法四：给展示内容的容器div加上下面这句CSS代码即可：**

white-space:pre-line;
    或
    white-space:pre-wrap;

`white-space`：该CSS属性是用来设置如何处理元素中的空白。

① `pre-wrap`: 保留空白符序列，但是正常地进行换行。

② `pre-line`: 合并空白符序列，但是保留换行符。

示例代码如下：

<html>
    <head>
     <style type="text/css">
      p{ 
      	// white-space:pre-line;
        white-space:pre-wrap;
      }
     </style>
    </head>
     <body>
      <p>
        这是一些文本。
        这是一些文本。
        这是一些文本。
        这是一些文本。
      </p>
     </body>
    </html>

结果如下（pre-line与pre-wrap）：  
![在这里插入图片描述][20210510182926315.png]

[20210510180000251.png]: /images/20221021/8648bf17a8b246d9b43831924a8b0a66.png
[20210510182926315.png]: /images/20221021/52a63929b7484dd4ac07a6db39a36cde.png