Копировать из textarea в div, сохраняя разрывы строк

У меня есть <textarea> и <div> (с <p> внутри). При вводе текста в область, <p> обновляется с содержимым на keyUp.

Есть ли способ сохранить linebreaks (новую строку) из текстового поля и каким-то образом заставить их работать как linebreaks в div/p?

Замена двойной "новой строки" на </p><p>, возможно ли это? Это близко к тому, что будет обрабатывать wysiwyg, но не хочет этого для этого, это очень маленький проект.

Это то, что у меня есть до сих пор.

$(".box textarea").keyup(function () {
  var value = $(this).val();  
  $('.box p').text(value);
});

Ответы

Ответ 1

Вы можете просто сделать это:

$('.box textarea').keyup(function() {
    var value = $(this).val().replace(/\n/g, '<br/>');
    $(".box p").html(value);
});

Это заменит все разрывы строк \n в вашем элементе textarea и заменит их всем тегом html <br/>, чтобы вы могли сохранить разрывы строк в текстовом поле внутри элемента тега <p>.

Простой демонстрационный пример здесь:

$('.box textarea').keyup(function() {
  $(".box p").html(this.value.replace(/\n/g, '<br/>'));
});
textarea,p {
  width: 90%;
  height: 80px;
}
p {
  border: 1px solid #eee;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <textarea></textarea>
  <br/>
  <p></p>
</div>

Ответ 2

Вероятно, вы хотите добавить правило CSS white-space: pre или white-space: pre-wrap в .box p. Это будет отображать пробелы как есть.

Ответ 3

Здесь самое простое и безопасное решение для jQuery:

$(".box textarea").keyup(function () {
  var value = $(this).val();
  $('.box p').text(value).css('white-space', 'pre-wrap');
});

Конечно, если вы можете добавить .box p { white-space: pre-wrap } в свои статические стили CSS, тогда вам не нужно вводить его с помощью jQuery.

(Также обратите внимание, что white-space: pre-wrap также позволяет сохранить несколько последовательных пробелов и не сворачиваться в одно пространство. вы не хотите этого, но все же хотите сохранить разрывы строк, вместо этого используйте white-space: pre-line.)

Ps. Вы никогда не должны передавать неограниченный пользовательский ввод в .html() (как, например, текущий принятый ответ), так как это приведет к искажению вывода, если вход содержит любые метасимволы HTML, такие как & или <, а также может открыть вам Атаки HTML и межсайтовые скрипты (XSS), если на вход может повлиять злонамеренный злоумышленник.

Если вы абсолютно настаиваете на том, чтобы не использовать свойство CSS white-space в любой форме, вам нужно сначала избежать любых метасимволов HTML во входном файле, прежде чем добавлять в него теги <br>. Вероятно, самый простой и безопасный способ сделать это - позволить браузеру управлять экранированием для вас, например. например:

$(".box textarea").keyup(function () {
  var value = $(this).val();
  $('.box div.output').text(value).html(function (index, html) {
    return '<p>' + html.replace(/[^\S\n]+\n/g, '\n').replace(/\n\n+/g, '</p><p>').replace(/\n/g, '<br>') + '</p>';
  });
});

Сначала будет скопирован текст ввода в целевой элемент с помощью .text() (который автоматически удаляет HTML-код), а затем изменяет полученный HTML-код, чтобы удалить конечные пробелы из строк, чтобы свернуть несколько последовательных строк в перерывах абзаца и наконец, заменить отдельные строки с тегами <br>.

(Обратите внимание, что для того, чтобы разрешить несколько абзацев на выходе, целевой элемент должен действительно быть элементом <div>, а не <p>. Вложение одного элемента <p> внутри другого недействительно HTML и может не дают согласованных результатов в разных браузерах.)

Ответ 4

Используйте string.replace("\n", "<br/>") для замены любых разрывов строк в текстовой области на новую строку на вашей странице.

JavaScript:

<script type="text/javascript">
function ta()
{
taValue = document.getElementById("ta").value;
taValue = taValue.replace("\n", "<br/>");
document.getElementById("tatext").innerHTML = taValue;
}
</script>

HTML:

<textarea id="ta" onkeyup="ta()"></textarea>
<div id="tatext"></div>