Сохранение новых строк и пробелов в текстовой области не работает

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 />

Обновить:

После успешного заполнения формы я обновляю вид с помощью бунта self.update(); или же this.update()

Update2

На самом деле я отправляю данные формы в базу данных и извлекаю текст из базы данных для его визуализации. Но текст, отправленный в БД, имеет <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

Вы можете просто заменить символы новой строки на <br> используя это .replace(/\n/g,"<br>")

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

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

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

Answer 3

Вы можете просто обработать это, когда обрабатываете форму на стороне сервера. Например, если ваше действие формы установлено в "companyForm.php", то в вашем companyForm.php вы можете использовать такую ​​функцию, как nl2br, например:

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

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

Если по какой-либо причине вам абсолютно необходимо сделать это на стороне клиента, вы можете использовать nl2br в 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 4

Вы хотите использовать


 как и


 как \n

Вставьте эти значения в функцию замены, и она должна работать.

Больше информации: