由一個項目需求引起的 - textarea中的換行和空格

當咱們使用 textarea 在前臺編輯文字，並用 js 提交到後臺的時候，空格和換行是咱們最須要考慮的問題。在textarea 裏面，空格和換行會被保存爲/s和/n，若是咱們前臺輸入和前臺顯示的文字都是在 textarea 裏面，其實並不須要作任何處理，你在 textarea 裏面編寫的樣式會按照你以前編輯時候的樣式，正確的顯示出來。

那麼若是你須要 textarea 編輯提交的文字，從後臺返回以後，不是顯示在 textarea 裏面，那麼就須要考慮處理空格和換行啦。

其實以前在接觸的時候，徹底沒有考慮過這些問題，也是由於最近作的項目裏面有一個這樣子的需求，要求用戶在 textarea 輸入文字，提交以後以文章的格式顯示在頁面上。無論用戶輸入的時候打了多少空格，默認每段文字都只縮進2個字符，且要考慮用戶上傳的詩歌形式，也就是每一個段落之間可能有兩行空白。總而言之一句話總結呢，就是—去掉用戶的輸入的空格，保留段落之間的換行。

那麼我最終的作法就是，在保存的時候仍是不作任何處理，直接保存到後臺。顯示的時候，從後臺獲取到文本以後，去掉文中的全部空格，而後顯示在<pre>標籤裏面。

這裏我用一個小例子來示意一下textarea在各類狀況下的保存和顯示。首先建立一個簡單的 html 頁面，爲了方便獲取數據和顯示，我引入 vue 來處理數據，給提交按鈕綁定一個點擊事件，點擊肯定以後，顯示在下面。基本的頁面結構和 js 以下：

<div class="app">
    <p>請輸入內容：</p>
    <textarea name="t1" rows="8" cols="80" v-model="text1"></textarea>
    <button>提交</button>
    <p>顯示的內容：</p>
    <textarea name="t2" id="" cols="80" rows="8" v-model="text2"></textarea>
</div>

// js部分
const vm = new Vue({
    el:'#app',
    data:{
        text1:'',
        text2:''
    },
    methods:{
        submitText(){
            this.text2 = this.text1;
        }
    }
})

不處理空格和換行 顯示在 textarea 裏面

這一步就很簡單了，直接點擊提交，能夠看到效果，以下圖。在未作任何處理的狀況下，保留了全部的空格和換行，適合保存再編輯。

不處理空格和換行 顯示在 div 裏面

把剛剛第二個 textarea 替換成 div ，效果以下圖。能夠看到空格和換行符都沒有被處理出來，直接被忽略掉了。

<div id="app">
    <p>請輸入內容：</p>
    <textarea name="t1" rows="8" cols="80" v-model="text1" ></textarea>
    <button @click="submitText">提交</button>
    <p>顯示的內容：</p>
    <p>{{text2}}</p>
</div>

不處理空格和換行 顯示在 pre 標籤裏面

將 div 替換成 pre 標籤，將提交的文本顯示在 pre 標籤裏面。pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本一般會保留空格和換行符，他比較常見的應用就是用來顯示代碼，在技術網站和博客的頁面裏面，pre 標籤都是用來包裹代碼塊的。

能夠從下圖的效果看出，pre 標籤也能夠徹底實現保留用戶所輸入的空格和換行，看上去彷佛可以達到個人基本需求了。那麼接下來的問題就是，如何去掉空格，而且實現自動縮進2個字符。

<div id="app">
    <p>請輸入內容：</p>
    <textarea name="t1" rows="8" cols="80" v-model="text1" ></textarea>
    <button @click="submitText">提交</button>
    <p>顯示的內容：</p>
    <pre>{{text2}}</pre>
</div>

那麼我試試直接給 pre 標籤設置 css 屬性text-index:2em;？這樣可以實現需求嗎？答案顯然是不行，由於這個屬性規定的是塊級元素首行文本的縮進，而這裏從始至終都只有一個塊級元素 pre ，顯然是不能實現。並且咱們還要考慮到用戶本身輸入的空格。

替換空格保留換行

既然直接顯示行不通，看來仍是必需要處理文本，那咱們就處理一下。首先嚐試，去掉全部的空格，首先想到的就是trim()方法。思路就是，以換行符爲分割，獲取到每一段文本，而後用trim()方法去掉文本先後的空格，用 <p> 標籤把每段文字包裹起來，再把每一段用<br>換行標籤拼接起來。同時，不用pre標籤來顯示文本了，直接將處理事後的的 html 片斷插入到 div 標籤裏面，這裏用到的是 vue 的 v-html 屬性。

<div id="app">
    <p>請輸入內容：</p>
    <textarea name="t1" rows="8" cols="80" v-model="text1" ></textarea>
    <button @click="submitText">提交</button>
    <p>顯示的內容：</p>
    <div v-html="text2" style="text-indent:2em;"></div>
</div>

// js部分
submitText(){
    let arr = [];
    this.text1.split('\n').forEach(item=>arr.push(`<p>${item.trim()}</p>`));
    this.text2 = arr.join('<br>');
}

以下圖所示，基本實現自動縮進和保留換行啦。

下面咱們輸入一段詩歌，加上一些樣式，看看最終效果如何：

再輸入一段文章，輸入的時候打亂文章的縮進，能夠看到無論咱們如何縮進，顯示效果始終都是縮進兩個字符，那麼就實現需求啦！