.val() текстового поля не учитывает новые строки

Это проблема CSS, а не проблема JavaScript. HTML сворачивает пробелы по умолчанию, включая игнорирование новых строк.

Добавьте white-space: pre-wrap в выходной div. http://jsfiddle.net/mattball/5wdzH/

Это поддерживается во всех современных браузерах: https://caniuse.com/#feat=css3-tabsize

Принудительные новые строки в текстовых областях - \ns, другие теги HTML, кроме текстового поля, будут игнорировать их. Вы должны использовать <br /> для создания новых строк в этих элементах.

Я предлагаю вам использовать JavaScript, чтобы исправить это, а не CSS, поскольку вы уже полагаетесь на JavaScript.

$( "#watched_textarea" ).keyup( function() {
   $( "#output_div" ).html( $( this ).val().replace(/\n/g, '<br />') );
}); 

Вы можете найти обновленную версию здесь: http://jsfiddle.net/GbjTy/2/.

Попробуйте что-то вроде этого:

$( "#watched_textarea" ).keyup( function() {
   $( "#output_div" ).html( $( this ).val().replace('\n', '<br/>') );
}); 

В HTML пробелы по умолчанию игнорируются.

Вы также можете изменить свой тег <div> на тег <pre>:

<pre id="output_div"></pre>

И это тоже сработает.

В случае, если

• вы НЕ отображаете .val() текстовой области на другой странице (например, отправляете форму в сервлет и перенаправляете на другой JSP).

• используя .val() текстовой области как часть кодировки URL (например, mailto: с телом в качестве содержимого текстовой области) в Javascript/JQuery

затем вам нужно URLEncode описание текстовой области следующим образом:

var mailText = $('#mailbody').val().replace(/(\r\n|\n|\r)/gm, '%0D%0A');

$( "#watched_textarea" ).keyup( function() {
   $( "#output_div" ).html( $( this ).val().replace(/[\r\n]/g, "<br />") );
});

Вам нужно заменить символы новой строки тегами <br> для вывода HTML.

Вот демонстрация: http://jsfiddle.net/GbjTy/3/

Ваши новые строки выводятся отлично, но HTML игнорирует новые строки: ему нужно <br>.

Используйте простую функцию перевода строки на br, например:

function nl2br_js(myString) {
var regX = /\n/gi ;

s = new String(myString);
s = s.replace(regX, "<br /> \n");
return s;
}

$( "#watched_textarea" ).keyup( function() {
       $( "#output_div" ).html( nl2br_js($( this ).val()) );
    }); 

jsfiddle здесь: http://jsfiddle.net/r5KPe/

Код отсюда: http://bytes.com/topic/javascript/answers/150396-replace-all-newlines-br-tags

Есть простое решение: сделать контейнер с тегом pre.

        <textarea id="watched_textarea" rows="10" cols="45">test </textarea>
        <pre class="default prettyprint prettyprinted"><code ><span class="pln" id="output_div">fdfdf</span></code></pre>
        <script>
        $("#watched_textarea").keyup(function() {
            $("#output_div").html($(this).val());
        });
        </script>

Я нашел более удобный способ, используя jquery.

пример кода

HTML

    <textarea></textarea>
    <div></div>
    <button>Encode</button>

JS

$('button').click(function() {

    var encoded = $('<label>').text($('textarea').val()).html();//the label element can be replaced by any element like div, span or else

    $('div').html(encoded.replace(/\n/g,'<br/>'))
});

<?php 

//$rsquery[0] is array result from my database query
//$rsquery[0] = 1.1st Procedure \n2.2nd Procedure
//txtRisks is a textarea

//sample1
function nl2br2($string) {
$string = str_replace(array("\r\n", "\r", "\n"), "<br />", $string);
return $string;
}

//sample2
function nl2br2($string) {
$string = str_replace(array("\r\n", "\r", "\n"), "\\n", $string);
return $string;
}

echo "$('#txtRisks').val('".nl2br2($rsquery[0])."')";

?> 

Ссылка на руководство по PHP

Я пытался установить значение textarea с помощью jquery в шаблоне laravel blade, но код ломался, потому что в переменной были новые строки.

мой фрагмент кода был

$("#textarea_id").val("{{ $php_variable }}");

Я решил свою проблему, изменив фрагмент кода, как показано ниже.

$("#textarea_id").val("{{ str_replace(array('\r', '\n', '\n\n'), '\n', $php_variable }}");

если кто-то из вас сталкивается с этой проблемой, может извлечь из этого пользу.