Jade/Mongo 输出中的换行符

Question

我已经在 Whosebug 上阅读了所有关于此事的问题，但是 none 满足了我的需求。

我有一个简单的留言板，用户可以在其中通过文本区域 post 发表评论。这些存储在 Mongo 中并通过 jade

显示

但是所有换行符都丢失了。

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

用 <br />s 替换它们也无济于事，因为它们只是呈现为字符串。

用 <pre> 包裹评论确实有帮助...但它会阻止文本在嵌入的图片周围浮动。

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

这是 <span> 和 <div> 而不是 <pre>：这就是我希望它浮动的方式，但没有呈现换行符

翡翠模板：

  if (user)
    p You are logged in as #{user.username} &nbsp;
      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}
      | &nbsp;
      span#commentCount (#{post.comments.length})
      | &nbsp;created at&nbsp;
      span#createdAt #{post.createdAt}
      | &nbsp;by&nbsp;
      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 处理换行符的方式不同于 "regular" 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> 块（除非您以某种方式将其过滤掉，否则最终不会在您的页面上转义），这可能会给您带来潜在的安全问题。

Jade/Mongo 输出中的换行符

Line breaks in Jade/Mongo output

javascript

mongodb

node.js

pug