Wie füge ich einem HTML-Textbereich Zeilenumbrüche hinzu?

Ich bearbeite ein <textarea>mit JavaScript. Das Problem ist, dass wenn ich Zeilenumbrüche mache, diese nicht angezeigt werden. Wie kann ich das machen?

Ich erhalte den Wert zum Schreiben einer Funktion, aber es werden keine Zeilenumbrüche ausgegeben.

Das Problem ergibt sich aus der Tatsache, dass Zeilenumbrüche ( \n\r?) Nicht mit HTML- <br/>Tags identisch sind

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

AKTUALISIEREN

Da viele der Kommentare und meine eigenen Erfahrungen gezeigt haben, dass diese <br> Lösung nicht wie erwartet funktioniert, ist hier ein Beispiel dafür, wie eine neue Zeile an eine textareaVerwendung von '\ r \ n' angehängt wird.

function log(text) {
    var txtArea ;

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

Ich habe beschlossen, dies zu bearbeiten und nicht als neue Frage, da dies eine viel zu beliebte Antwort ist, um falsch oder unvollständig zu sein.

Wenn Sie ein allgemeines Java-Skript verwenden und dem Textbereichswert dann eine Zeichenfolge zuweisen müssen

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

Sie müssen ersetzen \noder < br >zu\\\n

Ansonsten gibt es Uncaught SyntaxError: Unexpected token ILLEGALauf allen Browsern.

Vielleicht findet jemand dies nützlich:

Ich hatte ein Problem mit Zeilenumbrüchen, die von der Servervariablen an die Javascript-Variable übergeben wurden, und dann schrieb Javascript sie in den Textbereich (unter Verwendung der Wertebindungen von knockout.js).

Die Lösung bestand darin, neuen Zeilen doppelt zu entkommen:

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

auf der Serverseite, weil mit nur einzelnen Escape-Zeichen Javascript nicht analysiert wurde.

Sie müssen \nfür linebreaksinnen verwendentextarea

Wenn Sie Text auf Ihrer eigenen Seite anzeigen möchten, können Sie das <pre>Tag verwenden.

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>

Eine neue Zeile ist nur ein Leerzeichen für den Browser und wird nicht anders behandelt als ein normales Leerzeichen (""). Um eine neue Zeile zu erhalten, müssen Sie <BR />Elemente einfügen .

Ein weiterer Versuch, das Problem zu lösen: Geben Sie den Text in das Textfeld ein und fügen Sie dann JavaScript hinter einer Schaltfläche hinzu, um die unsichtbaren Zeichen in etwas Lesbares umzuwandeln und das Ergebnis in a zu speichern DIV. Das sagt Ihnen, was Ihr Browser will.

Ich habe einen Textbereich mit der ID #infoartist folgen:

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

Im Javascript-Code erhalte ich den Wert des Textbereichs und ersetze die neue Zeile (\ n \ r) durch ein <br />Tag, wie z.

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

Wenn Sie also jquery verwenden (wie ich):

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

Hoffe es hat dir geholfen. :-)

Wenn Sie nur den Wert des Testbereichs mit Zeilenumbrüchen an den Server senden müssen, verwenden Sie nl2br

Hier ist das, was ich für die gleichen Probleme getan habe, die ich hatte.

Wenn ich den Text in jsp an die nächste Seite weitergebe, lese ich ihn als Textbereich, anstatt so etwas zu lesen

Die Ausgabe kam also so, wie Sie es wollten. und für andere Eigenschaften können Sie wie folgt verwenden.

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