在文本区域中保留新行和空格不起作用

Question

我正在使用文本区域输入文本并在提交表单时，视图中显示的文本未保留任何换行符和空格。

文本区域：

<textarea type="text" id="topicDetails"></textarea>

尝试使用以下替换文本：

postTopic(){
    var content = document.getElementById('topicDetails').value;
//            textcontent = content.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ "" +'$2'); 
//            textcontent = content.replace("\r\n", "\\r\\n"); 
//            textcontent = content.replace(/\r?\n/g, '<br />');
//            textcontent = content.replace(/\r?\n/g, '&#13');
//            var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
//            textcontent = (content + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
    textcontent = content.replace(/\n/g,"<br>")

    var topic = {
        "topicId" : new Date().getTime(),
        "title": document.getElementById('title').value,
        "details": textcontent,
        "username": DataMixin.data.username,
        "userImage": "assets/img/Logos Divine Light/6.png",
        "dayPosted": new Date().toLocaleString()
    }

    console.log('posting blog..... ', topic);
    self.data.blogTopicsArr.push(topic);

    $.ajax({
        url: "/new_topic",
        type: "POST",
        data: JSON.stringify(self.data.blogTopicsArr),
        contentType: "application/json",
        success: function (res) {
            console.log('res is ', res);
            if (res == 'Authentication failed'){
                self.data.blogTopicsArr.splice( - 1, 1);
                self.update(self.data.blogTopicsArr);
                riot.route("signup_popup");
            } else if (res == 'saved'){
                console.log('blog posted successfully: ', self.data.blogTopicsArr);
                document.getElementById('title').value = '';
                document.getElementById('topicDetails').value = '';
                self.update();
            } else if (typeof res.redirect == 'string'){
                console.log('res.redirect ', res.redirect);
                riot.route(res.redirect)
            }
        },
        error: function (err) {
        console.log('err>>>>', err);
        }
    });
    $('#myModal').modal('hide');
}

尝试了三种不同的方法，但没有成功。

第三种方法给出带有<br /> 标签的输出。如何保留新行？

输出是：

Lorem Ipsum is simply dummy text.<br /> Industry's standard text ever since the 1500s, <br /><br />Why do we use it?<br />It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. <br /><br />

更新：

表单发布成功后，我正在使用 riot 的 self.update(); 或 this.update() 更新视图

更新2

实际上，我正在将表单数据发送到数据库并从数据库中取回文本以呈现它。但是发送到数据库的文本在保存到数据库之前插入了<br>标签，所以为什么它显示文本为Lorem Ipsum is simply dummy text.<br /> Industry's standard text ever since the 1500s, <br />？？

Answer 1

实际上我只需要添加pre-wrap，如下所示。

<p style="white-space: pre-wrap;">{data.post_details.details}</p>

这也保留了新行的间距。

Answer 2

您可以使用.replace(/\n/g,"<br>") 将换行符替换为<br>

function postTopic() {
  var content = document.getElementById('topicDetails').value;

  var textcontent = content.replace(/\n/g,"<br>");

  var topic = {
    "details": textcontent,
  }
}

Answer 3

你想用


 作为 \r 和


 为 \n

将这些值插入您的替换函数，它应该可以工作。

More info:

Answer 4

当您在服务器端处理表单时，您可以简单地处理这个问题。例如，如果您的表单操作设置为“companyForm.php”，那么在您的 companyForm.php 中，您可以使用类似 nl2br 的函数，例如：

$companyName = nl2br($_POST['companyName']);

http://php.net/manual/en/function.nl2br.php

如果出于某种原因您绝对必须在客户端执行此操作，您可以通过添加以下代码来使用nl2br on php.js：

function nl2br (str, is_xhtml) {

    if (typeof str === 'undefined' || str === null) {
        return ''
    }

    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}

然后使用：

nl2br(textcontent, false)