正確顯示textarea中輸入的回車和空格

轉  

正確顯示textarea中輸入的回車和空格

 

 

在textarea中輸入的文本。如果含有回車或空格。在界面上顯示的時候則不哪么正常。回車消失了，空格變短了。
如何解決這個問題呢。有2種方法。
1.使用<pre>標簽
   w3c對pre元素是這樣定義的：pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。
   更詳細的內容請參考 http://www.w3school.com.cn/tags/tag_pre.asp

   也就是說包含在pre標簽中的回車和空格會正常的顯示出來。包括你在頁面代碼中輸入的。所以如果使用pre元素你需要這樣寫：

   

 

< pre >要輸出的文本 </ pre >

   ，而不是這樣：

   

 

   < pre >
      要輸出的文本
   </ pre >

   后一種寫法 文本前的空白也會被顯示的。除非你真的希望這樣:)

2.對文本內容進行替換。

  回車和空格不能正確顯示，究其原因是他們各自的表示方式不同。在textarea里面輸入的回車是字符"\r"，html中的回車(換行)是"<br/>"。

  textarea中輸入的空格是空白" "，而html中的一個空格是"&nbsp;"。理所當然不能正確顯示。好了現在知道了原因就有了第二種解決方案了。

  只要我們將輸入的文本中相應的"元素"替換成html認識的就ok了。因此下面一行代碼即可解決問題：

  

 

"要輸出的文本".replaceAll(" ","&nbsp;").replaceAll("\r","<br/>");

  等等。這里還有一點小問題。把一個空格替換成一個"&nbsp;"空格看上去仍然要少些。如果你喜歡可以替換成2個。
  
  最后，除了回車和空格以外還有很多空白字符如tab等，如果你喜歡可以一並處理了^_^
  
  最后的最后，如果本來的文本是很長的一行，使用pre標簽后就不會自動換行。結果頁面出現橫向滾動條。不知道有沒有好的解決方法？

  而將第二種方法處理過的文本放在<p>標簽中顯示，就可以顯示正常。

 

 

第一次發現JavaScript中replace() 方法如果直接用str.replace("-","!") 只會替換第一個匹配的字符. 
而str.replace(/\-/g,"!")則可以全部替換掉匹配的字符(g為全局標志)。

 

 

今天遇到的問題是系統中大量的地方需要修改，具體操作不再贅述，已經確定第二種方法可以實現，而對於replace只處理第一個匹配的字符的問題，在另一篇文章中已提供解決辦法。還想分享給大家的是實現大量修改時的一個小思想。我們需要將\r替換成<br/>存入數據庫中，但是對於修改的功能時，又會把這些存有br標簽的數據讀取顯示在textarea中，這時就會毀壞我們原本的顯示結構。最后解決的方法是，存入數據庫的時候，不單單替換，而是在\r后添加<br/>標簽，即存入數據庫的是\r<br/>，之后在每個需要顯示的textarea中都讓<br>不顯示，就解決了問題。