1
//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
1
  • Вставляйте в присваиваемый HTML тег <br>, или устанавливайте элементу CSS-свойство white-space с наиболее подходящим значением.
    – yar85
    15 мая 2018 в 7:22

2 ответа 2

3

$('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>

1
  • Помогло! white-space: pre-line; в этом стиле было дело
    – gforce
    15 мая 2018 в 8:01
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>

1
  • Жаль что 2 решения за Акцептить нельзя, но если решать без CSS, решение отличное
    – gforce
    15 мая 2018 в 8:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.