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

Question

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

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

示例，用户输入

你好

我是鲍勃

结果将是：

你好我是鲍勃

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

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

下面是我的代码示例。

索引.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>

管理员.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>'
})

应用程序.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;
        }
    }

Answer 1

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-01-26 16:10:28

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-01-26 16:10:28

解决方案1
1 已采纳 2021-01-26 16:10:28