Como preservo as quebras de linha ao obter texto de uma textarea?

Estou recebendo o valor em uma textarea quando o usuário clica em enviar. Em seguida, pego esse valor e o coloco em outro lugar na página. No entanto, quando faço isso, ele perde caracteres de nova linha, tornando a saída bastante feia.

Aqui está a textarea que estou acessando:

<textarea id="post-text" class="form-control" rows="3" placeholder="What's up?" required></textarea>

Aqui está o código JavaScript acessando a postagem e transcrevendo-a.

var post = document.createElement('p');
var postText = document.getElementById('post-text').value;
post.append(postText);
var card = document.createElement('div');
card.append(post);
var cardStack = document.getElementById('#card-stack');
cardStack.prepend(card);

Quando a entrada é algo como:

Programação do grupo:

Prática de terça-feira no 5º andar (20h - 23h)

Prática de quinta-feira no 5º andar (20h - 23h)

Prática de domingo @ (21h - 12h)

O resultado é:

Programação do Grupo: Prática de terça-feira no 5º andar (20h - 23h) Prática de quinta-feira no 5º andar (20h - 23h) Prática de domingo @ (21h - 12h)

Então, há uma maneira de preservar as quebras de linha?

A solução mais fácil é simplesmente estilizar o elemento no qual você está inserindo o texto com a seguinte propriedade CSS:

white-space: pre-wrap;

Esta propriedade faz com que os espaços em branco e as novas linhas nos elementos correspondentes sejam tratados da mesma maneira que dentro de um <textarea>. Ou seja, espaços em branco consecutivos não são recolhidos e as linhas são quebradas em novas linhas explícitas (mas também são quebradas automaticamente se excederem a largura do elemento).

Dado que várias das respostas postadas aqui até agora são vulneráveis ​​à injeção de HTML (por exemplo, porque atribuem entrada de usuário sem escape innerHTML) ou de outra forma com erros, deixe-me dar um exemplo de como fazer isso com segurança e corretamente, com base em seu código original:

document.getElementById('post-button').addEventListener('click', function () {
  var post = document.createElement('p');
  var postText = document.getElementById('post-text').value;
  post.append(postText);
  var card = document.createElement('div');
  card.append(post);
  var cardStack = document.getElementById('card-stack');
  cardStack.prepend(card);
});

#card-stack p {
  background: #ddd;
  white-space: pre-wrap;  /* <-- THIS PRESERVES THE LINE BREAKS */
}
textarea {
  width: 100%;
}

<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:

Tuesday practice @ 5th floor (8pm - 11 pm)

Thursday practice @ 5th floor (8pm - 11 pm)

Sunday practice @ (9pm - 12 am)</textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="card-stack"></div>

Observe que, como seu código original, o snippet acima usa append()e prepend(). No momento em que este livro foi escrito, essas funções ainda são consideradas experimentais e não são totalmente compatíveis com todos os navegadores. Se você deseja estar seguro e permanecer compatível com navegadores mais antigos, pode substituí-los facilmente da seguinte maneira:

• element.append(otherElement)pode ser substituído por element.appendChild(otherElement);
• element.prepend(otherElement)pode ser substituído por element.insertBefore(otherElement, element.firstChild);
• element.append(stringOfText)pode ser substituído por element.appendChild(document.createTextNode(stringOfText));
• element.prepend(stringOfText)pode ser substituído por element.insertBefore(document.createTextNode(stringOfText), element.firstChild);
• como um caso especial, se elementestiver vazio, ambos element.append(stringOfText)e element.prepend(stringOfText)podem ser simplesmente substituídos por element.textContent = stringOfText.

Aqui está o mesmo snippet acima, mas sem usar append()ou prepend():

document.getElementById('post-button').addEventListener('click', function () {
  var post = document.createElement('p');
  var postText = document.getElementById('post-text').value;
  post.textContent = postText;
  var card = document.createElement('div');
  card.appendChild(post);
  var cardStack = document.getElementById('card-stack');
  cardStack.insertBefore(card, cardStack.firstChild);
});

#card-stack p {
  background: #ddd;
  white-space: pre-wrap;  /* <-- THIS PRESERVES THE LINE BREAKS */
}
textarea {
  width: 100%;
}

<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:

Tuesday practice @ 5th floor (8pm - 11 pm)

Thursday practice @ 5th floor (8pm - 11 pm)

Sunday practice @ (9pm - 12 am)</textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="card-stack"></div>

Ps. Se você realmente deseja fazer isso sem usar a white-spacepropriedade CSS , uma solução alternativa seria substituir explicitamente quaisquer caracteres de nova linha no texto por <br>tags HTML. A parte complicada é que, para evitar a introdução de bugs sutis e brechas de segurança em potencial, você deve primeiro escapar de quaisquer metacaracteres HTML (no mínimo, &e <) no texto antes de fazer essa substituição.

Provavelmente, a maneira mais simples e segura de fazer isso é deixar o navegador lidar com o escape de HTML para você, assim:

var post = document.createElement('p');
post.textContent = postText;
post.innerHTML = post.innerHTML.replace(/\n/g, '<br>\n');

document.getElementById('post-button').addEventListener('click', function () {
  var post = document.createElement('p');
  var postText = document.getElementById('post-text').value;
  post.textContent = postText;
  post.innerHTML = post.innerHTML.replace(/\n/g, '<br>\n');  // <-- THIS FIXES THE LINE BREAKS
  var card = document.createElement('div');
  card.appendChild(post);
  var cardStack = document.getElementById('card-stack');
  cardStack.insertBefore(card, cardStack.firstChild);
});

#card-stack p {
  background: #ddd;
}
textarea {
  width: 100%;
}

<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:

Tuesday practice @ 5th floor (8pm - 11 pm)

Thursday practice @ 5th floor (8pm - 11 pm)

Sunday practice @ (9pm - 12 am)</textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="card-stack"></div>

Observe que, embora isso conserte as quebras de linha, não impedirá que espaços em branco consecutivos sejam recolhidos pelo renderizador de HTML. É possível (meio que) emular isso, substituindo alguns dos espaços em branco no texto por espaços não quebráveis, mas, honestamente, isso está ficando bastante complicado para algo que pode ser resolvido trivialmente com uma única linha de CSS.

O contêiner de destino deve ter o white-space:preestilo. Experimente abaixo.

<script>
function copycontent(){
 var content = document.getElementById('ta').value;
 document.getElementById('target').innerText = content;
}
</script>
<textarea id='ta' rows='3'>
  line 1
  line 2
  line 3
</textarea>
<button id='btn' onclick='copycontent();'>
Copy
</button>
<p id='target' style='white-space:pre'>

</p>

function get() {
  var arrayOfRows = document.getElementById("ta").value.split("\n");
  var docfrag = document.createDocumentFragment();
  
  var p = document.getElementById("result");
  while (p.firstChild) {
    p.removeChild(p.firstChild);
  }
  
  arrayOfRows.forEach(function(row, index, array) {
    var span = document.createElement("span");
    span.textContent = row;
    docfrag.appendChild(span);
    if(index < array.length - 1) {
      docfrag.appendChild(document.createElement("br"));
    }
  });

  p.appendChild(docfrag);
}

<textarea id="ta" rows=3></textarea><br>
<button onclick="get()">get</button>
<p id="result"></p>

Você pode dividir as linhas de textarea em uma matriz:

var arrayOfRows = postText.value.split("\n");

Em seguida, use-o para gerar, talvez, mais tags p ...

Aqui está uma ideia, pois você pode ter várias novas linhas em uma caixa de texto:

 var text=document.getElementById('post-text').value.split('\n');
 var html = text.join('<br />');

Este valor HTML preservará a nova linha. Espero que isto ajude.

Você pode definir widthde div usando Javascript e adicione white-space:pre-wrapa p tag, esta pausa o seu conteúdo textarea no final de cada linha.

document.querySelector("button").onclick = function gt(){
var card = document.createElement('div');
card.style.width = "160px";
card.style.background = "#eee";
var post = document.createElement('p');
var postText = document.getElementById('post-text').value;
post.style.whiteSpace = "pre-wrap";
card.append(post);
post.append(postText);
document.body.append(card);
}

<textarea id="post-text" class="form-control" rows="3" placeholder="What's up?" required>
Group Schedule:

Tuesday practice @ 5th floor (8pm - 11 pm)

Thursday practice @ 5th floor (8pm - 11 pm)

Sunday practice @ (9pm - 12 am)</textarea>
<br><br>
<button>Copy!!</button>

Suponho que você não queira que seu conteúdo de textarea seja analisado como HTML. Nesse caso, você pode apenas defini-lo como texto simples para que o navegador não o trate como HTML e não remova novas linhas. Nenhum CSS ou pré-processamento necessário.

<script>
function copycontent(){
 var content = document.getElementById('ta').value;
 document.getElementById('target').innerText = content;
}
</script>
<textarea id='ta' rows='3'>
  line 1
  line 2
  line 3
</textarea>
<button id='btn' onclick='copycontent();'>
Copy
</button>
<p id='target'></p>

Perguntas semelhantes estão aqui

detectar quebras de linha em uma entrada de área de texto

detectar quebra de linha em textarea

Você pode tentar isto:

var submit = document.getElementById('submit');

submit.addEventListener('click', function(){
var textContent = document.querySelector('textarea').value;
  
document.getElementById('output').innerHTML = textContent.replace(/\n/g, '<br/>');
  

});

<textarea cols=30 rows=10 >This is some text
this is another text

Another text again and again</textarea>
<input type='submit' id='submit'>


<p id='output'></p>

document.querySelector('textarea').value;obterá o conteúdo de texto da área de texto e textContent.replace(/\n/g, '<br/>')encontrará todos os caracteres de nova linha no código-fonte /\n/gno conteúdo e os substituirá pela quebra de linha html <br/>.

Outra opção é usar a <pre> tag html . Veja a demonstração abaixo

var submit = document.getElementById('submit');

submit.addEventListener('click', function(){

  var content = '<pre>';
  
  var textContent = document.querySelector('textarea').value;
  
  content += textContent;
  
  content += '</pre>';

  document.getElementById('output').innerHTML = content;

});

<textarea cols=30 rows=10>This is some text
this is another text

Another text again and again </textarea>
<input type='submit' id='submit'>

<div id='output'> </div>