Добавление переносов в строке в JS

285

20 мая 2018, 12:30

//JQ
var message = $(".chat_textarea").val();
var html = '<div class="chat_mess">'+message+'</div>';
$(".dialog").append(html);

Есть JQ код, читаю содержимое textarea, и вывожу его в определенный DIV. Проблема в том, что в textarea я могу написать тест с переносами строк, и даже в консоль он выводится с переносами, а вот при от рисовки его на экране - все в одну строку

Подскажите, как добавить переносы?

p.s.

//input - ввожу:
строка1
строка2
//div
строка1строка2

Answer 1

$('button').on('click', function() { 
  var message = $("#chat_textarea").val(); 
  var html = '<div class="chat_mess">' + message + '</div>'; 
  $("#dialogue").append(html); 
});

.chat_mess { 
  white-space: pre-line; 
} 
 
button { 
  display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<textarea id="chat_textarea"> 
</textarea> 
<button> Send! </button> 
<div id="dialogue"> 
</div>

Answer 2

Решение с заменой переносов на теги <br>:

var entityMap = { 
  '&': '&amp;', 
  '<': '&lt;', 
  '>': '&gt;', 
  '"': '&quot;', 
  "'": '&#39;', 
  '/': '&#x2F;', 
  '`': '&#x60;', 
  '=': '&#x3D;' 
}; 
 
function escapeHtml(string) { 
  return String(string).replace(/[&<>"'`=\/]/g, function(s) { 
    return entityMap[s]; 
  }); 
} 
 
function nl2br(str) { 
  var breakTag = '<br />'; 
  return String(str).replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2'); 
} 
 
$('.send_btn').click(() => { 
  var message = escapeHtml($(".chat").val()); 
  var html = '<div class="mess">' + nl2br(message) + '</div>'; 
  $(".dialog").append(html); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<textarea class=chat> 
 Line 1 
 Line 2 
 <script>alert('XSS корректно экранирован')</script> 
</textarea> 
<button class=send_btn>Send</button> 
 
<div class=dialog></div>