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

有时候我们会遇到这样的需求：后端返回一个换行符（“↵”），前端拿到后需求根据该符号进行换行展示方法一：textarea赋值当我们拿到后端返回的数据时，直接通过v-model绑定给textarea，就会有默认的换行，但是它不能随内容高度增加textarea高度实现自适应，如果用JS来实现的话，相对麻烦一点。方法二：使用v-html输出文本“↵”符号在html中会识别别为\r,\n等转义字符，所以我们

huangfuyk

13307人浏览 · 2021-05-17 13:23:39

huangfuyk · 2021-05-17 13:23:39 发布

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

方法一：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>

结果如下：
在这里插入图片描述

方法三：在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>