Jade/Mongo输出中的换行符

Question

我已阅读了关于这个问题的所有stackoverflow上的问题，但没有一个能满足我的需求。

我有一个简单的留言板，用户可以通过文本区域发布评论。这些评论被存储在Mongo中，并通过jade显示。但所有的换行都丢失了。它们被存储为\r\n在数据库中，但在渲染时却不会被显示。用<br />替换它们也没有帮助，因为它们只是作为字符串呈现。用<pre>包装评论确实有所帮助...但它会停止文本围绕内嵌图片浮动。没有一种简单的方法可以输出一个完全按照其存储方式的文本吗？

以下是使用和

而不是

的情况：
这就是我希望它浮动的方式，但换行却没有被呈现出来。
jade模板：
  if (user)
    p You are logged in as #{user.username}  
      a(href='/logout') [Log Out]
  else
    a(href='/login') Log In

 .threadWrapper
   each post, i in posts
    .thread.col-md-12
      a(href="/thread/#{post._id}")
        span#postTitle #{post.postTitle}
      |  
      span#commentCount (#{post.comments.length})
      |  created at 
      span#createdAt #{post.createdAt}
      |  by 
      span#op #{post.op}
      if (user)
        button.close.deleteThreadButton(type='submit', aria-label='Close')
          span(aria-hidden='true') ×
      //button.deleteThreadButton(type="submit") X
      .ThreadContent
        if post.postFileLink
          case post.postFileType
            when "image/png"
            when "image/gif"
            when "image/jpeg"
              img(src="/files/#{post.postFileLink}")
            when "video/mp4"
            when "video/webm"
              video(width="200", height="150", controls)
                source(src="/files/#{post.postFileLink}", type="#{post.postFileType}")
                | Sorry, your browser does not support the video tag. No Videos for you!
      span#threadContent #{post.postContent}
      .clearfix

- Paul Schneider

---

请包含您当前的Jade模板。 - vzsg

已更新问题模板。在切换 span#threadContent 到 pre#threadContent 之前。 - Paul Schneider

Answer 1

你的数据库确实包含了存储的文本，但是textarea与“常规”HTML元素（如

、

等）在处理换行符时有所不同，其中连续的空格序列会被折叠成单个空格。

你可以使用CSS来解决这个问题。

例如：

- var text = 'foo\r\nbar\r\nxxx';

p(style = 'white-space: pre-wrap')= text

或者，您可以将换行符替换为<br>，使Jade不对输出进行转义。

- var text = 'foo\r\nbar\r\nxxx'.replace(/\r\n/g, '<br>');

p !{text}

然而，如果您的用户在评论中输入恶意 <script> 块（除非您以某种方式过滤它们），否则这可能会导致潜在的安全问题。

- robertklep

---

哈哈，太好了，原来就在附近！非常感谢。pre-wrap解决了它。 - Paul Schneider