¿Cómo conservo los saltos de línea cuando obtengo texto de un área de texto?

Si encuentras algún detalle que no entiendes puedes dejarlo en la sección de comentarios y te responderemos lo más rápido posible.

Solución:

La solución más fácil es simplemente diseñar el elemento en el que está insertando el texto con la siguiente propiedad CSS:

white-space: pre-wrap;

Esta propiedad hace que los espacios en blanco y las nuevas líneas dentro de los elementos coincidentes se traten de la misma manera que dentro de un </code>. Es decir, los espacios en blanco consecutivos no se contraen y las líneas se rompen en nuevas líneas explícitas (pero también se ajustan automáticamente si exceden el ancho del elemento).</p><div class="banner mobile"><div class=" "> </div> </div><div class="banner desktop"><div class=" "> </div> </div> <p>Dado que varias de las respuestas publicadas aquí hasta ahora han sido vulnerables a la inyección de HTML (por ejemplo, porque asignan entrada de usuario sin escape a <code>innerHTML</code>) o con errores, permítanme dar un ejemplo de cómo hacer esto de manera segura y correcta, según su código original:</p><div class="1156288aeb31a138c38144f0e15ac7e5" data-index="2" style="float: none; margin:5px 0 5px 0; text-align:center;"> <!-- rectangle-h-v --> <center><ins class="adsbygoogle rectangle_ads" data-ad-client="ca-pub-9156923925267699" data-ad-slot="6189735064"></ins></center><script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> </p> <pre><code>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); );</code></pre> <pre><code>#card-stack p background: #ddd; white-space: pre-wrap; /* <-- THIS PRESERVES THE LINE BREAKS */ textarea width: 100%; </code></pre> <pre><code><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)


---

Tenga en cuenta que, al igual que su código original, el fragmento anterior usa append() y prepend(). En el momento de redactar este documento, esas funciones todavía se consideran experimentales y no son totalmente compatibles con todos los navegadores. Si desea estar seguro y seguir siendo compatible con navegadores más antiguos, puede sustituirlos con bastante facilidad de la siguiente manera:

• element.append(otherElement) puede ser reemplazado con element.appendChild(otherElement);
• element.prepend(otherElement) puede ser reemplazado con element.insertBefore(otherElement, element.firstChild);
• element.append(stringOfText) puede ser reemplazado con element.appendChild(document.createTextNode(stringOfText));
• element.prepend(stringOfText) puede ser reemplazado con element.insertBefore(document.createTextNode(stringOfText), element.firstChild);
• como caso especial, si element está vacío, ambos element.append(stringOfText) y element.prepend(stringOfText) simplemente se puede reemplazar con element.textContent = stringOfText.

Este es el mismo fragmento que el anterior, pero sin usar append() o 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%;

Group Schedule:

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

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

Sunday practice @ (9pm - 12 am)

---

PD. Si realmente quieres hacer esto sin usando el CSS white-space propiedad, una solución alternativa sería reemplazar explícitamente cualquier carácter de nueva línea en el texto con
Etiquetas HTML. La parte complicada es que, para evitar la introducción de errores sutiles y posibles agujeros de seguridad, primero debe escapar de los metacaracteres HTML (como mínimo, & y <) en el texto antes de haces este reemplazo.

Probablemente, la forma más sencilla y segura de hacerlo es dejar que el navegador maneje el escape HTML por usted, así:

var post = document.createElement('p');
post.textContent = postText;
post.innerHTML = post.innerHTML.replace(/n/g, '
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, '
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%;

Group Schedule:

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

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

Sunday practice @ (9pm - 12 am)

Tenga en cuenta que, si bien esto solucionará los saltos de línea, no evitará que el renderizador HTML colapse espacios en blanco consecutivos. Es posible (más o menos) emular eso reemplazando algunos de los espacios en blanco en el texto con espacios que no se rompan, pero honestamente, eso se está volviendo bastante complicado para algo que se puede resolver trivialmente con una sola línea de CSS.

El contenedor de destino debe tener el white-space:pre estilo. Pruébelo a continuación.

  line 1
  line 2
  line 3


Copy

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

get

Puede dividir filas de área de texto en array:

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

Luego utilícelo para generar, tal vez, más etiquetas p ...

Si haces scroll puedes encontrar los comentarios de otros programadores, tú asimismo tienes la libertad de insertar el tuyo si dominas el tema.

---

---

Utiliza Nuestro Buscador