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

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

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

相关推荐
Mintopia8 分钟前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙8 分钟前
JS设计模式指南
前端·javascript
拳打南山敬老院11 分钟前
漫谈 MCP 构建之Resources篇
前端·后端·ai编程
golang学习记13 分钟前
从0死磕全栈第九天:Trae AI IDE一把梭,使用react-query快速打通前后端接口调试
前端
超人92114 分钟前
我用纯前端技术打造了一个开发者工具箱,10+实用工具助力提效!
前端
bug_kada14 分钟前
详解 React useCallback & useMemo
前端·react.js
Mintopia15 分钟前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
AAA_Tj15 分钟前
前端动画技术全景指南:四大动画技术介绍
前端
断竿散人21 分钟前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
进阶的鱼22 分钟前
(4种场景)单行、多行文本超出省略号隐藏
前端·css·面试