Wie behalte ich Zeilenumbrüche bei, wenn Text aus einem Textbereich abgerufen wird?

Ich erhalte den Wert in einem Textbereich, wenn der Benutzer auf "Senden" klickt. Ich nehme dann diesen Wert und platziere ihn an einer anderen Stelle auf der Seite. Wenn ich dies tue, verliert es jedoch Zeilenumbrüche, was die Ausgabe ziemlich hässlich macht.

Hier ist der Textbereich, auf den ich zugreife:

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

Hier ist der JavaScript-Code, der auf den Beitrag zugreift und ihn transkribiert.

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

Wenn die Eingabe so etwas wie:

Gruppenplan:

Dienstag Training im 5. Stock (20 - 23 Uhr)

Donnerstag Training im 5. Stock (20 - 23 Uhr)

Sonntagsübung @ (21 - 12 Uhr)

Die Ausgabe ist:

Gruppenplan: Dienstag Training im 5. Stock (20 - 23 Uhr) Donnerstag Training im 5. Stock (20 - 23 Uhr) Sonntag Training im (21 - 12 Uhr)

Gibt es also eine Möglichkeit, Zeilenumbrüche beizubehalten?

Die einfachste Lösung besteht darin, das Element, in das Sie den Text einfügen, einfach mit der folgenden CSS-Eigenschaft zu formatieren:

white-space: pre-wrap;

Diese Eigenschaft bewirkt, dass Leerzeichen und Zeilenumbrüche in den übereinstimmenden Elementen genauso behandelt werden wie in a <textarea>. Das heißt, aufeinanderfolgende Leerzeichen werden nicht reduziert, und Zeilen werden bei expliziten Zeilenumbrüchen unterbrochen (aber auch automatisch umbrochen, wenn sie die Breite des Elements überschreiten).

Angesichts der Tatsache, dass einige der hier veröffentlichten Antworten bisher anfällig für HTML-Injection waren (z. B. weil sie uneingeschränkte Benutzereingaben zuweisen innerHTML) oder auf andere Weise fehlerhaft sind, möchte ich anhand Ihres Originalcodes ein Beispiel dafür geben, wie dies sicher und korrekt durchgeführt werden kann:

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>

Beachten Sie, dass das obige Snippet wie Ihr Originalcode append()und verwendet prepend(). Zum jetzigen Zeitpunkt gelten diese Funktionen noch als experimentell und werden nicht von allen Browsern vollständig unterstützt. Wenn Sie sicher sein und mit älteren Browsern kompatibel bleiben möchten, können Sie diese ganz einfach wie folgt ersetzen:

• element.append(otherElement)kann ersetzt werden durch element.appendChild(otherElement);
• element.prepend(otherElement)kann ersetzt werden durch element.insertBefore(otherElement, element.firstChild);
• element.append(stringOfText)kann ersetzt werden durch element.appendChild(document.createTextNode(stringOfText));
• element.prepend(stringOfText)kann ersetzt werden durch element.insertBefore(document.createTextNode(stringOfText), element.firstChild);
• als Sonderfall, wenn elementleer ist, beides element.append(stringOfText)und element.prepend(stringOfText)kann einfach durch ersetzt werden element.textContent = stringOfText.

Hier ist das gleiche Snippet wie oben, jedoch ohne Verwendung von append()oder 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. Wenn Sie dies wirklich ohne Verwendung der CSS- white-spaceEigenschaft tun möchten , besteht eine alternative Lösung darin, alle Zeilenumbrüche im Text explizit durch <br>HTML-Tags zu ersetzen . Der schwierige Teil ist, dass Sie, um subtile Fehler und potenzielle Sicherheitslücken zu vermeiden, zuerst alle HTML-Metazeichen (mindestens &und <) im Text umgehen müssen, bevor Sie diese Ersetzung durchführen.

Der wahrscheinlich einfachste und sicherste Weg, dies zu tun, besteht darin, den Browser das HTML-Escape für Sie wie folgt handhaben zu lassen:

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>

Beachten Sie, dass dies zwar die Zeilenumbrüche behebt, jedoch nicht verhindert, dass aufeinanderfolgende Leerzeichen vom HTML-Renderer reduziert werden. Es ist möglich, dies zu emulieren, indem ein Teil des Leerzeichens im Text durch nicht unterbrechende Leerzeichen ersetzt wird. Ehrlich gesagt wird dies jedoch für etwas, das mit einer einzigen CSS-Zeile trivial gelöst werden kann, ziemlich kompliziert.

Der Zielcontainer sollte den white-space:preStil haben. Versuchen Sie es unten.

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

Sie können Textbereichszeilen in Arrays aufteilen:

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

Verwenden Sie es dann, um möglicherweise mehr p-Tags zu generieren ...

Hier ist eine Idee, da Sie möglicherweise mehrere Zeilenumbrüche in einem Textfeld haben:

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

Dieser HTML-Wert behält den Zeilenumbruch bei. Hoffe das hilft.

Sie könnten Set widthvon div mit Javascript und fügen Sie white-space:pre-wrapzu p tag, diese Pause Ihren TextArea- Inhalt am Ende jeder Zeile.

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>

Ich nehme an, Sie möchten nicht, dass Ihr Textbereich-Inhalt als HTML analysiert wird. In diesem Fall können Sie es einfach als Klartext festlegen, damit der Browser es nicht als HTML behandelt und keine Zeilenumbrüche entfernt. Kein CSS oder Vorverarbeitung erforderlich.

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

Ähnliche Fragen gibt es hier

Erkennen von Zeilenumbrüchen in einer Textbereichseingabe

Zeilenumbruch im Textbereich erkennen

Sie können dies versuchen:

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;textContent.replace(/\n/g, '<br/>')Ruft den Textinhalt des Textbereichs ab und findet das gesamte Zeilenumbruchzeichen im Quellcode /\n/gim Inhalt und ersetzt es durch den HTML-Zeilenumbruch <br/>.

Eine andere Option ist die Verwendung des HTML- <pre> Tags. Siehe die Demo unten

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>