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

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

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 записывал их в текстовое поле (используя привязки значений 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>

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

<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 />');

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

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

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

Если вам просто нужно отправить значение 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>