Отобразить в html с помощью jquery переносы строки из textarea

Question

Интересно, как на html-странице отобразить текст с абзацами введенный пользователем в textarea. А ещё интересно, как сделать то же самое с помощью php.

Answer 1

Используйте тег pre. Правда, работать он будет лишь в том случае, если в textarea явно расставлены переносы. Если это просто строка, которая автоматически переносится из-за превышения длины textarea, то фокус не пройдёт.

$('button').click(function(){
    $('div').html('<pre>'+$('textarea').val()+'</pre>');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea></textarea><br>
<button>отобразить текст</button>
<br>
<div></div>

Answer 2

Для JS:

var value = $('.textareaClass').val();
$('.paragraphClass').html(value.replace(/\r?\n/g,'<br/>'));

Для PHP:

echo nl2br($value);

В CSS:

.text-content {
white-space: pre-wrap;
}

В HTML:

<pre></pre>

Answer 3

Есть ещё возможность на чистом JS — если вместо textContent использовать innerText, то переводы строк вставляются автоматически. Правда, я не знаю, поддерживается ли это всеми современными браузерами.

document.querySelector('textarea').addEventListener(
  'input',
  (event) => {
    document.querySelector('div').innerText =
      event.target.value;
  },
);

<textarea></textarea>
<div></div>

БЛОГ НА HUSL

Отобразить в html с помощью jquery переносы строки из textarea

Ответы (3 шт):