當我們使用 textarea 在前台編輯文字，並用 js 提交到後台的時候，空格和換行是我們最需要考慮的問題。在textarea 裡面，空格和換行會被儲存為/s和/n，如果我們前台輸入和前台顯示的文字都是在 textarea 裡面，其實並不需要做任何處理，你在 textarea 裡面編寫的樣式會按照你之前編輯時候的樣式，正確的顯示出來。
那麼如果你需要 textarea 編輯提交的文字，從後台返回之後，不是顯示在 textarea 裡面，那麼就需要考慮處理空格和換行啦。
其實之前在接觸的時候，完全沒有考慮過這些問題，也是因為最近做的專案裡面有乙個這樣子的需求，要求使用者在 textarea 輸入文字，提交之後以文章的格式顯示在頁面上。不管使用者輸入的時候打了多少空格，預設每段文字都只縮排2個字元，且要考慮使用者上傳的詩歌形式，也就是每個段落之間可能有兩行空白。總而言之一句話總結呢，就是—去掉使用者的輸入的空格，保留段落之間的換行。
那麼我最終的做法就是，在儲存的時候還是不做任何處理，直接儲存到後台。顯示的時候，從後台獲取到文字之後，去掉文中的所有空格，然後顯示在標籤裡面。
這裡我用乙個小例子來示意一下textarea在各種情況下的儲存和顯示。首先建立乙個簡單的 html 頁面，為了方便獲取資料和顯示，我引入 vue 來處理資料，給提交按鈕繫結乙個點選事件，點選確定之後，顯示在下面。基本的頁面結構和 js 如下：
提交顯示的內容：
// js部分
const vm = new vue(,
methods:
}})這一步就很簡單了，直接點選提交，可以看到效果，如下圖。在未做任何處理的情況下，保留了所有的空格和換行，適合儲存再編輯。
把剛剛第二個 textarea 替換成 div ，效果如下圖。可以看到空格和換行符都沒有被處理出來，直接被忽略掉了。
提交顯示的內容：
將 div 替換成 pre 標籤，將提交的文字顯示在 pre 標籤裡面。pre 元素可定義預格式化的文字。被包圍在 pre 元素中的文字通常會保留空格和換行符，他比較常見的應用就是用來顯示**，在技術**和部落格的頁面裡面，pre 標籤都是用來包裹**塊的。
可以從下圖的效果看出，pre 標籤也可以完全實現保留使用者所輸入的空格和換行，看上去似乎能夠達到我的基本需求了。那麼接下來的問題就是，如何去掉空格，並且實現自動縮排2個字元。
提交顯示的內容：
}那麼我試試直接給 pre 標籤設定 css 屬性
text-index:2em;？這樣能夠實現需求嗎？答案顯然是不行，因為這個屬性規定的是塊級元素首行文字的縮排，而這裡從始至終都只有乙個塊級元素 pre ，顯然是不能實現。而且我們還要考慮到使用者自己輸入的空格。
既然直接顯示行不通，看來還是必須要處理文字，那我們就處理一下。首先嘗試，去掉所有的空格，首先想到的就是trim()方法。思路就是，以換行符為分割，獲取到每一段文字，然後用trim()方法去掉文字前後的空格，用
標籤把每段文字包裹起來，再把每一段用
換行標籤拼接起來。同時，不用pre標籤來顯示文字了，直接將處理過後的的 html 片段插入到 div 標籤裡面，這裡用到的是 vue 的 v-html 屬性。
提交顯示的內容：
// js部分
submittext()
`));
this.text2 = arr.join('
');}
如下圖所示，基本實現自動縮排和保留換行啦。
再輸入一段文章，輸入的時候打亂文章的縮排，可以看到不管我們如何縮排，顯示效果始終都是縮排兩個字元，那麼就實現需求啦！
textarea 換行處理
textarea 中的換行格式，在其它地方顯示時，需要保持其原有的換行格式。textarea 元素支援多行純文字編輯。由於歷史原因，元素的值有三種不同的形式 關於換行符，見回車和換行。要按照輸入時格式顯示，方法有 元素表示預定義格式文字。在該元素中的文字通常按照原樣的編排，以等寬字型的形式展現出來，...
textarea和mysql中的換行符問題
今天碰到乙個問題，一直無法解決，後來讓stan幫我搞定了，老手解決問題就是快。問題 我手動在phpmyadmin中輸入了一段帶有換行符的字串，取出來放到中，在通過form表單提交的到乙個頁面。我把 post中的字串 即textarea中的字串 跟資料庫中的原字串對比，怎麼都不相等，最後，找到問題的根...
textarea標籤中的換行符和空格
問題 獲取到textarea標籤內的格式 換行符 空格 存入資料庫，展示的時候能夠保留基本格式。解決思路 ie9以上 ff chrome的換行為 n，ie7 8的時候換行為 r n，空格都為 s 所以需要利用replace把不同瀏覽器的 n和 r n都替換為html 的，把 s空格替換為html的 ...