Как добавить разрывы строк в текстовую область HTML?

Я редактирую с <textarea>помощью JavaScript. Проблема в том, что когда я делаю разрывы строк, они не отображаются. Как я могу это сделать?

Я получаю значение, чтобы написать функцию, но она не даст разрывов строк.

Проблема заключается в том, что разрывы строк ( \n\r?) Не совпадают с <br/>тегами HTML

var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '<br />');

ОБНОВИТЬ

Так как многие комментарии и мой собственный опыт показали, что это <br> решение не работает должным образом, здесь приведен пример добавления новой строки к textareaиспользованию '\ r \ n'

function log(text) {
    var txtArea ;

    txtArea = document.getElementById("txtDebug") ;
    txtArea.value +=  text + '\r\n';
}

Я решил сделать это редактированием, а не новым вопросом, потому что это слишком популярный ответ, чтобы быть неправильным или неполным.

если вы используете общий сценарий Java и вам нужно присвоить строку для значения текстовой области, то

 document.getElementById("textareaid").value='texthere\\\ntexttext'.

вам нужно заменить \nили < br >на\\\n

в противном случае это дает Uncaught SyntaxError: Unexpected token ILLEGALво всех браузерах.

Может быть, кто-то найдет это полезным:

У меня была проблема с разрывами строк, которые передавались из серверной переменной в переменную javascript, а затем javascript записывал их в textarea (используя привязки значений knockout.js).

решение было двойным, избегая новых линий:

orginal.Replace("\r\n", "\\r\\n")

на стороне сервера, потому что только с одним escape-символом javascript не разбирался.

Вы должны использовать \nдля linebreaksвнутриtextarea

Если вы хотите отображать текст на своей странице, вы можете использовать <pre>тег.

document.querySelector('textarea').addEventListener('keyup', function() {
  document.querySelector('pre').innerText = this.value;
});

<textarea placeholder="type text here"></textarea>
<pre style="font-family: inherits">
The
new lines will
be respected
      and spaces too
</pre>

Новая строка является просто пробелом для браузера и не будет обрабатываться иначе, чем обычный пробел (""). Чтобы получить новую строку, вы должны вставить <BR />элементы.

Еще одна попытка решить проблему: введите текст в текстовое поле, а затем добавьте JavaScript за кнопкой, чтобы преобразовать невидимые символы во что-то читаемое и вывести результат в a DIV. Это скажет вам, что хочет ваш браузер.

У меня есть текстовое поле с идентификатором #infoartist follow:

<textarea id="infoartist" ng-show="dForm" style="width: 100%;" placeholder="Tell your contacts and collectors about yourself."></textarea>

В коде javascript я получу значение textarea и заменю экранированную новую строку (\ n \ r) <br />тегом, например:

var text = document.getElementById("infoartist").value;
text = text.replace(/\r?\n/g, '<br />');

Так что, если вы используете jquery (как я):

var text = $("#infoartist").val();
text = text.replace(/\r?\n/g, '<br />');

Надеюсь, это помогло вам. :-)

Если вам просто нужно отправить значение testarea на сервер с переносом строки, используйте nl2br

вот что я сделал для той же проблемы, что и у меня.

когда я передаю текст на следующую страницу в jsp, я читаю его как текстовое поле вместо того, чтобы читать что-то вроде

так что выход пришел как ты хотел. а для других свойств вы можете использовать, как показано ниже.

<textarea style="background-color: white; border: none; width:660px;font-family: Arial, Helvetica, sans-serif; font-size:1.0em; resize:none;" name="text" cols="75" rows="15" readonly="readonly" ><s:property value="%{text}"/></textarea>