渲染文本区域中输入的换行符答案

【问题标题】：Render line breaks entered in textarea渲染文本区域中输入的换行符
【发布时间】：2021-04-30 10:38:32
【问题描述】：

在我的网站上，我创建了一个页面，用户可以在其中写入文本区域。然后将 textarea 的内容存储到我的 SQL SERVER 数据库中。在另一个页面上，我显示了数据库中的所有新闻。

到目前为止，我还没有考虑到 CRLF 字符。因此，如果用户输入带有换行符的文本，则该文本将显示在一行上。

例如，用户输入

你好

我是鲍勃

结果将是：

你好，我是鲍勃

当我将文本显示到 vue 组件 content.replace(/([^\r]|^)\n/g, "$1\r\n"); 时，我尝试使用 replace() 函数，但它会将文本显示在一行上。

我也尝试将/([^\r]|^)\n/g 替换为CHAR(13) 到数据库中，但我得到了相同的结果。

下面是我的代码示例。

index.html

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="admin.css">
  </head>
  <body>
      <div class="list">
        <info-generale
          v-for="post in posts"
          v-bind:post="post"
        ></info-generale>
      </div>

      <form class="newPost" action="/newPost" method="POST">
        <textarea id="contentInput" name="contentInput" cols="40" rows="5" required></textarea>
        <button type="submit">Submit</button>
      </form>

    <script src="../js/vue.js"></script>
    <script src="../js/vue-resource.min.js"></script>
    <script type="text/javascript" src="admin.js"></script>
  </body>
</html>

admin.js

Vue.component('info-generale', {
  props: ['post'],
  methods: {
    display: function(content) {
      return content.replace(/([^\r]|^)\n/g, "$1\r\n");
    }
  },
  template: '<div id="infoList"><div id="title"><h4>{{ post.title }}</h4></div><div id="actions">&times;</div><p>{{ display(post.content) }}</p></div>'
})

app.js

server.app.post("/newPost", function(req, res) {
    try {
        dao.newPost(req.body.contentInput).then(value => {
                res.redirect('/');
        })
    } catch (e) {
        console.log(e);
    }
})

DAO.js

async newPost(title, content) {
        try {
            await sql.query('INSERT INTO PROFACE.dbo.Posts (title, content) VALUES (\'' + title.replace(/'/gi,"''")+ '\', \''+content.replace(/'/gi,"''")+'\')').then(value => {
                return true;
            });
        } catch (e) {
            console.log(e);
            return false;
        }
    }

【问题讨论】：

标签： javascript html node.js sql-server vue.js

【解决方案1】：

默认情况下，HTML 会忽略几乎所有的空白字符。您需要将您的内容包装在<pre> 标签中或更改包装p 元素样式以包含white-space: pre。

【讨论】：