Jade / Mongo输出中的换行符

Question

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

我有一个简单的留言板，用户可以通过textarea发布评论。 那些存储在Mongo中并通过jade显示

但所有的换行都丢失了。

它们在数据库中存储为\r\n，但在渲染时不会显示。

用<br />替换它们也没有任何帮助，因为它们只是呈现为字符串。

用<pre>包装评论确实有帮助......但它会阻止文字浮动嵌入的图片。

有没有简单的方法来输出存储的文本？

这是<span>和<div>而不是<pre>： 这就是我希望它浮动的方式，但不会渲染换行符

玉模板：

  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

Answer 1

您的数据库 包含存储的文本，但textarea的处理换行符与“常规”HTML元素（如<div>，<p>等）不同，其中连续的空白序列被折叠成一个空格。

您可以使用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>块（最终会在您的网页上无效，除非您以某种方式过滤掉它们），这可能会给您带来潜在的安全问题。