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

  • 方法一: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>

结果如下(pre-line与pre-wrap):
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐