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

颖儿♡＾▽＾♡2023-10-22 15:05

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

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

方法一：

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

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:连续的空白符会被保留。在遇到换行符或者 元素，或者需要为了填充「行框盒子(line boxes)」时才会换行。

pre-line连续的空白符会被合并。在遇到换行符或者 元素，或者需要为了填充「行框盒子(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"换成浏览器正常解析的换行标签 即可。(后端传回来的"↵"就是\r\n)，上面同样可以使用正则表达式来将字符串的换行符转换为 ，那么就不用转换为数组了。