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');
}

尝试了三种不同的方式，没有运气。

第三种方法为输出提供 标记。如何保留新线？

输出是：

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()

更新视图

UPDATE2

实际上我将表单数据发送到数据库并从数据库中取回文本来呈现它。但是发送到DB的文本在将其保存到DB之前插入了 标记，那么为什么它将文本显示为Lorem Ipsum is simply dummy text. Industry's standard text ever since the 1500s,  ??

Answer 1

实际上我必须添加pre-wrap，如下所示。

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

这也保留了新线条的间距。

Answer 2

您可以在服务器端处理表单时处理此问题。例如，如果您的表单操作设置为“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)

Answer 3

您想要使用


为\ r和

为\ n

将这些值插入到替换功能中，它应该可以正常工作。

More info:

Answer 4

您只需使用此 

替换.replace(/\n/g," ")的换行符即可

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

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

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

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

4 个答案: