存储到数据库的文章如何保留原有格式

最新推荐文章于 2024-05-30 16:36:44 发布

原创最新推荐文章于 2024-05-30 16:36:44 发布 · 7.9k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#html #pre #数据库 #tag

其他专栏收录该内容

8 篇文章

订阅专栏

本文介绍了解决在网页上从textarea中获取的文本显示异常的方法，包括使用<pre>标签保留原始格式和通过替换字符确保正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在taxtarea中输入的文本。如果含有回车或空格。在界面上显示的时候则不哪么正常。回车消失了，空格变短了。

如何解决这个问题呢。有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中的一个空格是" "。理所当然不能正确显示。好了现在知道了原因就有了第二种解决方案了。
只要我们将输入的文本中相应的"元素"替换成html认识的就ok了。因此下面一行代码即可解决问题：

"要输出的文本".replaceAll(" "," ").replaceAll("\r","<br/>"); 等等。这里还有一点小问题。把一个空格替换成一个" "空格看上去仍然要少些。如果你喜欢可以替换成2个。

最后，除了回车和空格以外还有很多空白字符如tab等，如果你喜欢可以一并处理了^_^

最后的最后，如果本来的文本是很长的一行，使用pre标签后就不会自动换行。结果页面出现横向滚动条。..