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

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

Update:

После успешной формы пост, я обновить вид с помощью буйство-х self.update(); или this.update()

Update2

На самом деле я am sendi ng данные формы в базу данных и извлечение текста из базы данных для его рендеринга. Но в тексте, отправленном в БД, добавлен тег <br> перед сохранением его в БД, поэтому почему он отображает текст как Lorem Ipsum is simply dummy text.<br /> Industry's standard text ever since the 1500s, <br /> ??

Answer 1

Вы можете просто обработать это при обработке формы на стороне сервера. Например, если форма действия устанавливается в «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 2

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


 как \ г и


 как \ п

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

More info:

Answer 3

Вы можете просто заменить новую строку с <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 4

На самом деле я все должен был добавить pre-wrap, как показано ниже.

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

Это сохранил интервал с новыми линиями.