前端页面根据后端返回的文本将换行符(“↵”)进行换行展示

有时我们会遇到这种情况,后端传递了一大段包含了回车符的文本内容,前端展示的时候所有文字堆在一起,没有换行展示。

以下方法中content为后端返回的文本内容

方法一:

"↵"符号在html中会识别别为\r,\n等转义字符,所以我们可以使用\r\n去替换(.replace(/(\r\n|\n|\r)/gm, '< br />')

html 复制代码
<div v-html="content.replace(/(\r\n|\n|\r)/gm, '<br />')"></div>

方法二:

使用<pre>标签, 它会自动识别和处理后台返回的换行符号

html 复制代码
<pre>{{content }}</pre>

方法三:

white-space样式

html 复制代码
<div class="logDetail">{{ content }}</div>

css样式

css 复制代码
.logDetail {
  white-space: pre-wrap;
  /* white-space:pre-line; */
}

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

  • pre-wrap:连续的空白符会被保留。在遇到换行符或者< br >元素,或者需要为了填充「行框盒子(line boxes)」时才会换行。

  • pre-line连续的空白符会被合并。在遇到换行符或者< br >元素,或者需要为了填充「行框盒子(line boxes)」时会换行。

方法四:

(下面是在Vue中实现的,所有框架思想一样)

html 复制代码
<template>
    <div v-html="contentFormat"></div>
</template>
<script>
export default {
    data(){
        return{
            //存储后端返回的,文本
            content:"",
        }
    },
    //计算属性,与data同级
    computed: {
        contentFormat() {
          //this.content存储后端传回来的文本数据,就是要对这个数据进行处理
          let arr = this.content.split("");
          return arr
            .map((item) => {
              return item === "\n" ? "<br>" : item;
            })
            .join("");
        },
    },
    methods:{
        getData(){
            ....
            this.content=xxx;
        }
    }
}
</script>

思想:将文本字符串转化为数组,然后将数组中"\n"换成浏览器正常解析的换行标签<br>即可。(后端传回来的"↵"就是\r\n),上面同样可以使用正则表达式来将字符串的换行符转换为< br >,那么就不用转换为数组了。

相关推荐
用户1456775610371 分钟前
干净的图片批量处理,处理速度飞快
前端
用户14567756103722 分钟前
亲测好用!简单实用的图片尺寸调整工具
前端
索西引擎23 分钟前
npm、yarn、pnpm
前端·npm·node.js
天生我材必有用_吴用1 小时前
Vue3 + VitePress 搭建组件库文档平台(结合 Element Plus 与 Arco Design Vue)—— 超详细图文教程
前端
liu****1 小时前
基于websocket的多用户网页五子棋(八)
服务器·前端·javascript·数据库·c++·websocket·个人开发
San301 小时前
深入理解 JavaScript 函数:从基础到高阶应用
前端·javascript·node.js
ttyyttemo1 小时前
Column,rememberScrollState,记住滚动位置
前端
芒果茶叶2 小时前
并行SSR,SSR并行加载
前端·javascript·架构
vortex52 小时前
解决 Kali 中 Firefox 下载语言包和插件速度慢的问题:配置国内镜像加速
前端·firefox·腾讯云
修仙的人2 小时前
Rust + WebAssembly 实战!别再听说,学会使用!
前端·rust