Como adicionar quebras de linha a uma área de texto HTML?

Estou editando um <textarea>com JavaScript. O problema é que, quando eu faço quebras de linha, elas não são exibidas. Como posso fazer isso?

Estou recebendo o valor para escrever uma função, mas não dará quebras de linha.

O problema vem do fato de que quebras de linha ( \n\r?) Não são iguais às <br/>tags HTML

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

ATUALIZAR

Como muitos comentários e minha própria experiência me mostraram que esta <br> solução não está funcionando conforme o esperado, aqui está um exemplo de como acrescentar uma nova linha a um textarea\ 'r \ n' usando

function log(text) {
    var txtArea ;

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

Decidi fazer isso como uma edição, e não como uma nova pergunta, porque essa é uma resposta muito popular para estar errada ou incompleta.

se você usar o script java geral e precisar atribuir string ao valor da área de texto,

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

você precisa substituir \nou < br >a\\\n

caso contrário, ele fornece Uncaught SyntaxError: Unexpected token ILLEGALem todos os navegadores.

Talvez alguém ache isso útil:

Eu tive um problema com quebras de linha que foram passadas da variável do servidor para a variável javascript e, em seguida, o javascript as gravou na área de texto (usando as associações de valor knockout.js).

a solução estava escapando duas vezes de novas linhas:

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

no lado do servidor, porque com apenas um caractere de escape o javascript não estava analisando.

Você precisa usar \npara linebreaksdentrotextarea

Se você deseja exibir texto dentro de sua própria página, pode usar a <pre>tag.

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>

Uma nova linha é apenas um espaço em branco no navegador e não será tratada de maneira diferente de um espaço normal (""). Para obter uma nova linha, você deve inserir <BR />elementos.

Outra tentativa de resolver o problema: Digite o texto na área de texto e adicione algum JavaScript atrás de um botão para converter os caracteres invisíveis em algo legível e despejar o resultado em a DIV. Isso informará o que seu navegador deseja.

Eu tenho uma área de texto com id é #infoartist follow:

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

No código javascript, vou obter o valor da área de texto e substituir a nova linha de escape (\ n \ r) pela <br />tag, como:

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

Então, se você estiver usando jquery (como eu):

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

Espero que tenha ajudado. :-)

Se você apenas precisar enviar o valor da testarea para o servidor com quebras de linha, use nl2br

Aqui está o que eu fiz pelo mesmo problema que tive.

quando estou passando o texto para a próxima página no jsp, estou lendo como uma área de texto em vez de ler algo como

então a saída veio como você queria. e para outras propriedades, você pode usar como abaixo.

<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>