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

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

以下方法中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 >,那么就不用转换为数组了。

相关推荐
雪碧聊技术19 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了20 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子2 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00002 小时前
Vue组件通信方式详解
前端·面试
呆呆的心2 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再2 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down