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

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

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

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

特别编辑--windows+python+django实现前端页面上传到指定路径生成个性化二维码
等你点蓝字关注都等出蜘蛛网了坚持梦想就算所有人都不支持你.这条路会很曲折,你也会一度认为是不是自己选错了,但只要坚持,就算最后没有成功,但努力了就不会有遗憾. python-前端页面上传文件到指定 ...
谷歌Chrome浏览器自动翻译导致前端页面数据错乱问题 - 接口返回数据被翻译
背景:Chrome浏览器自带谷歌翻译,这个翻译还是挺实用的,但如果前端代码设置不当,再加上用户操作失误就容易造成很多莫名其妙问题,下面详述问题现象.排查过程及解决方案文章目录一.问题现象二.排查 ...
前端页面生成神器以及后端变量命名神器
1.imgcook前端页面生成具体看官网上的教程 2.后端变量命名codelf 网址访问可能有点慢例如:我输入一个员工,下面就会出面对应的名称鼠标放上去会有复制的选项,非常方便
【图片流转成图片】vue处理后端传来的图片流信息并转换成图片显示在前端页面上【详细解释】
前言:今天遇到的后端传一个二维码图片给我,然后给我的是图片流的形式,看起来跟一堆乱码一样,根本用不了,必须要处理转换后才能使用,然后我看了网上帖子有的说的不是很明白,可能新人看不懂,我就也写一个详细解 ...
后台返回的内容中有两个空格，显示到前端页面上只有一个空格
主要是浏览器默认只认同字符中间的一个空格,其他忽略掉. <pre></pre>标记<xmp></xmp>标记用以上两个标记包裹住你需要浏览器按照你的预 ...
【富文本编辑器功能】vue实现富文本编辑器Tinymce功能，保留编辑器格式文章展示在页面上【前后端代码展示，简单好用】
前言: 这个Tinymce富文本编辑器是vue-element-admin内集成好的,使用过后体验非常不错,很简单易用.这里分享一下,同时又看到了网上帖子都没什么人写前后端同时展示的,很多人想知道编辑 ...
web开发中前端页面是如何跟后端服务器数据交互的
后端服务器一般是指servlet容器,用于执行java源程序常见的网页有html,htm,shtml,asp,aspx,php,jsp等格式前两个常用于静态网页,后面几个常用于动态网页. 这里前端 ...
服务器如何向前端页面推送消息,后端向前端推送消息
SpringBoot+WebSocket集成什么是WebSocket? 为什么需要 WebSocket? 前言 maven依赖 WebSocketConfig WebSocketServer 消息推 ...
前端用 js-file-download组件下载后端返回的Excel文件
后端接口返回的Excel的文件流需要导出让浏览器下载文件一.先安装 js-file-download组件 npm install js-file-download --save 二.在对应使用的页面 ...

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

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

最新文章

热门文章