正确显示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>不显示，就解决了问题。