Wie fügt man Zeilenumbrüche in einen HTML-Textbereich ein?

Question

Ich bearbeite gerade ein <textarea> mit JavaScript. Das Problem ist, dass die Zeilenumbrüche nicht angezeigt werden, wenn ich sie eingefügt habe. Wie kann ich das machen?

Ich erhalte den Wert, um eine Funktion zu schreiben, aber es gibt keine Zeilenumbrüche.

Answer 1

Das Problem ergibt sich aus der Tatsache, dass Zeilenumbrüche ( \n\r ?) sind nicht dasselbe wie HTML <br/> tags

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

UPDATE

Da viele der Kommentare und meine eigene Erfahrung mir gezeigt haben, dass diese <br> Lösung nicht wie erwartet funktioniert, hier ein Beispiel für das Anhängen einer neuen Zeile an eine textarea mit ' \r\n '

function log(text) {
    var txtArea ;

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

Ich habe beschlossen, diese Frage zu bearbeiten und nicht neu zu stellen, weil diese Antwort viel zu populär ist, um falsch oder unvollständig zu sein.

Answer 2

Wenn Sie ein allgemeines Java-Skript verwenden und dem Wert des Textbereichs eine Zeichenkette zuweisen müssen, dann

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

müssen Sie ersetzen \n o < br > a \\\n

sonst gibt es Uncaught SyntaxError: Unexpected token ILLEGAL auf allen Browsern.

Answer 3

Sie müssen Folgendes verwenden \n para linebreaks innerhalb textarea

Answer 4

Vielleicht findet das jemand nützlich:

Ich hatte ein Problem mit Zeilenumbrüchen, die von einer Server-Variablen an eine Javascript-Variable übergeben wurden, und dann schrieb Javascript sie in die Textarea (mit knockout.js-Wert-Bindungen).

Die Lösung bestand darin, neue Zeilen doppelt zu escapen:

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

auf der Serverseite, denn mit nur einzelnen Escape-Zeichen wurde Javascript nicht geparst.

Answer 5

Wenn Sie Text innerhalb Ihrer eigenen Seite anzeigen möchten, können Sie die <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>