前端處理文本換行展示4種處理方法
更新時(shí)間：2024年10月12日 10:14:59 作者：MoXinXueWEB
在處理前端顯示后端傳遞的包含換行符的文本時(shí),可以通過多種方法實(shí)現(xiàn)換行顯示,這篇文章主要介紹了前端處理文本換行展示4種處理方法,這些方法幫助前端正確展示格式化文本,解決了文本堆疊的問題,需要的朋友可以參考下
前言：
后端傳遞了一大段包含了回車符的文本內(nèi)容，前端展示的時(shí)候所有文字堆在一起，沒有換行展示。以下方法中content為后端返回的文本內(nèi)容
方法一：
“↵”符號在html中會識別別為\r,\n等轉(zhuǎn)義字符，所以我們可以使用\r\n去替換（.replace(/(\r\n|\n|\r)/gm, ’< br />')）
存在英文**<>**不顯示
<div v-html="content.replace(/(\r\n|\n|\r)/gm, '<br />')"></div>
方法二：
使用
標(biāo)簽， 它會自動識別和處理后臺返回的換行符號
<pre>{{content }}</pre>
方法三：
white-space樣式
<div class="logDetail">{{ content }}</div>
.logDetail {
white-space: pre-wrap;
/* white-space:pre-line; */
}
white-space CSS 屬性是用來設(shè)置如何處理元素中的 空白。
- pre-wrap:連續(xù)的空白符會被保留。在遇到換行符或者< br >元素，或者需要為了填充「行框盒子(line boxes)」時(shí)才會換行。
- pre-line連續(xù)的空白符會被合并。在遇到換行符或者< br >元素，或者需要為了填充「行框盒子(line boxes)」時(shí)會換行。
方法四：
(下面是在Vue中實(shí)現(xiàn)的，所有框架思想一樣)
<template>
<div v-html="contentFormat"></div>
</template>
<script>
export default {
data(){
return{
//存儲后端返回的，文本
content:"",
}
},
//計(jì)算屬性，與data同級
computed: {
contentFormat() {
//this.content存儲后端傳回來的文本數(shù)據(jù)，就是要對這個(gè)數(shù)據(jù)進(jìn)行處理
let arr = this.content.split("");
return arr
.map((item) => {
return item === "\n" ? "<br>" : item;
})
.join("");
},
},
methods:{
getData(){
....
this.content=xxx;
}
}
}
</script>
思路：將文本字符串轉(zhuǎn)化為數(shù)組，然后將數(shù)組中“\n”換成瀏覽器正常解析的換行標(biāo)簽
即可。(后端傳回來的“↵”就是\r\n)，上面同樣可以使用正則表達(dá)式來將字符串的換行符轉(zhuǎn)換為< br >，那么就不用轉(zhuǎn)換為數(shù)組了。
總結(jié)
到此這篇關(guān)于前端處理文本換行展示4種處理方法的文章就介紹到這了,更多相關(guān)前端處理文本換行內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
詳解JavaScript正則表達(dá)式之RegExp對象
這篇文章主要介紹了JavaScript正則表達(dá)式之RegExp對象，對RegExp對象的基本使用方法，以及各種方法進(jìn)行整理，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了javascript cookie的基本操作的相關(guān)資料,這里對Cookie的操作進(jìn)行了詳細(xì)介紹包括獲取，新建，設(shè)置有效期，添加和刪除等，需要的朋友可以參考下2017-07-07
這篇文章主要給大家介紹了ES6中Class和Module的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-05-05
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)圖片切換效果
，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11 
很多網(wǎng)站、博客把網(wǎng)頁生成html靜態(tài)頁面了，以利于搜索引擎的索引排名，減輕服務(wù)器負(fù)擔(dān)。靜態(tài)頁面由于其穩(wěn)定快速更快，給用戶及站長帶來了方便。但評論后如何記住用戶的信息呢
2012-01-01 
本篇文章小編為大家介紹，用js實(shí)現(xiàn)小球的自由移動代碼。需要的朋友參考下
2013-04-04 
這篇文章主要介紹了詳解webpack分離css單獨(dú)打包，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06 
JavaScript學(xué)習(xí)筆記之取數(shù)組中最大值和最小值
在實(shí)際業(yè)務(wù)中有的時(shí)候要取出數(shù)組中的最大值或最小值。但在數(shù)組中并沒有提供arr.max()和arr.min()這樣的方法。那么是不是可以通過別的方式實(shí)現(xiàn)類似這樣的方法呢？那么今天我們就來整理取出數(shù)組中最大值和最小值的一些方法，需要的朋友一起學(xué)習(xí)吧
2016-03-03 
iframe自適應(yīng)寬度、高度 ie6 7 8，firefox 3.86下測試通過
近期需要一個(gè)iframe自適應(yīng)高度的東西，在網(wǎng)上找了很多，都不能用……一看大體的日期都是大概 2008年前后的其他近期的基本都是以前的轉(zhuǎn)載，所以只好自己動手了。
2010-07-07