前端答疑-換行如何輸出在頁面上

工做中咱們有下面幾種方式收集用戶輸入的內容

1. input 輸入框，單行，總體樣式，純文本。
2. textarea 輸入框，多行，總體樣式，純文本。
3. contentEditable，多行，獨立樣式，富文本。
4. 其餘富文本編輯器，多行，獨立樣式，富文本。

在不想使用那麼重的富文本編輯器的狀況下，又想能夠換行，那麼 textarea 就是咱們的不二之選。

下面咱們就來講一下，如何在回顯的時候也顯示換行。

測試地址

方案一：textarea 顯示

既然我使用 textarea 輸入的，那麼我使用 textarea 顯示總能夠吧。
測試地址

textarea 方案優勢

1. 無 xss 注入風險
2. 無需特殊處理，內部就認識\n,空格也認識

textarea 方案缺點

1. 須要設置不可編輯

   1. readonly
   2. disabled

2. 須要設置不可縮放

   1. resize:none

3. 沒法自動撐開內容區域

   1. 須要js輔助計算，具體代碼我就不寫了。原理就是構造一個和當前textarea同樣大的div，而後使用div的高度。通常用於能夠輸入的textarea自動變大。

方案二：v-html、innerHTML、.html()

既然咱們不識別\n，那咱們就把他轉換成標籤來顯示。
這個方案最大的問題就是千萬當心xss問題。

測試地址

優勢

1. 能夠自動撐開內容區

缺點

1. xss注入風險，須要轉義爲實體編碼。
2. 空格仍是不識別。

方案三：v-text、innerText、textContent、.text()

這個方案也就 innerText 還能夠。由於 innerText會自動轉換\n爲<br>。

測試地址

優勢

1. 無xss注入問題

缺點

1. 只有innerText會自動轉換換行
2. 不支持空格。

方案四：特殊標籤 <pre>

這個方案就很理想了。

測試地址

優勢

1. 支持空格
2. 支持換行
3. 兼容性極好

缺點

1. 須要使用特定標籤？這也不算bug吧。
2. 不換行。。。

方案五：white-space

基於方案四，其實還有對應的css方案，那就是 white-space。
測試地址

缺點

1. 兼容性問題吧

優勢

1. 屬性值較多，能夠適配各類場景

微信公衆號：前端linong

結語

這麼多操做，你使用哪一種呢？或者你還有什麼方案呢？