Verwenden einer neuen Zeile (\ n) in einer Zeichenfolge und Rendern derselben in HTML

86

Ich habe eine Zeichenfolge zu sagen

string display_txt = "1st line text" +"\n" + "2nd line text";

in Jquery versuche ich zu verwenden 

('#somediv').html(display_txt).css("color", "green")

Ganz klar erwarte ich, dass meine Nachricht in 2 Zeilen angezeigt wird, aber stattdessen wird \ n in der Nachricht angezeigt. Irgendwelche schnellen Lösungen dafür?

Vielen Dank,

jquery html string newline KeenUser
quelle
1
Ganz klar, die Antwort ist in Ihrer Frage, Sie versuchen, die Fehlermeldung in div als HTML zu rendern, so dass Sie <br />Tag
Murtaza
Es ist nichts "ganz klares", zwei Zeilen zu erwarten. Im Gegenteil, es ist ziemlich klar, dass die neue Zeile als einfacher Bereich gerendert wird und die Zeile nur bei Bedarf umbrochen wird. So funktioniert HTML, natürlich auch so .html.
2
Ich meinte nur mit dem Kontext, in dem ich meine Zeichenfolge als "Text in der 1. Zeile" und "Text in der 2. Zeile" gespeichert habe, es war klar, dass ich diese in 2 Zeilen haben möchte, nicht in Bezug auf die Funktionsweise von HTML :) Danke.
KeenUser
verwandt: stackoverflow.com/questions/9726970/…
frederj

Antworten:

77

Verwenden Sie <br />für neue Zeile in HTML:

display_txt = display_txt.replace(/\n/g, "<br />");
Samich
quelle
1
Aus irgendeinem Grund muss ich dem "\ n" als "\\ n" entkommen, sonst funktioniert es nicht. (getestet in Chrome 46). Irgendein Grund warum?
Sujay Phadke
2
Bitte beachten Sie, dass dies nur das erste Vorkommen des \nZeichens in der Zeichenfolge ersetzt. Siehe die MDN-Dokumentation
Dominic Boulanger
3
Am besten .replace(/\n/g, "<br />")verhindern Sie mehr Newline.
KingRider
2
Ich denke, die Antwort von @vsync sollte die akzeptierte sein.
Ayush Kumar
Hat perfekt funktioniert. Danke dir.
Joshlsullivan
165

Stellen Sie Ihr CSS in der Tabellenzelle auf ein

white-space:pre-wrap;

document.body.innerHTML = 'First line\nSecond line\nThird line';
body{ white-space:pre-wrap; }
Erweitern Sie das Snippet

vsync
quelle
6
Soll das nicht die akzeptierte Antwort sein? LE: Ich sehe, dass dies nur in IE 8+ Link unterstützt wird
gciochina
4
Diese Antwort ist viel besser als das Festlegen von innerHTML, da es keine XSS-Sicherheitsanfälligkeit verursacht.
LinusK
4
Außerdem können Sie verwenden, white-space:pre-line;wie Sequenzen von Leerzeichen in ein einzelnes Leerzeichen zusammenfallen. Der Text wird bei Bedarf umbrochen und in Zeilenumbrüchen angezeigt. Weitere Informationen unter: https://www.w3schools.com/cssref/pr_text_white-space.asp
HakuteiJ
Diese Antwort konvertiert \ n innerhalb des Textes nicht in eine neue Zeile
irl_irl
2
@ste_irl - was meinst du? Das \nbedeutet, dass eine neue Zeile gedruckt werden sollte und sie auch druckt
vsync
6

Sie können ein Pre-Tag anstelle eines div verwenden. Dies würde Ihre \ n automatisch auf die richtige Weise anzeigen.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
         var display_txt = "1st line text" +"\n" + "2nd line text";
         $('#somediv').html(display_txt).css("color", "green");
});
</script>
</head>
<body>

<pre>
<p id="somediv"></p>
</pre>

</body>
</html>
Frank im Wald
quelle
1

Vielleicht .textstatt .html?


quelle
0

Ich hatte das folgende Problem, als ich Daten aus einer Datenbank abrief und eine Zeichenfolge mit anzeigen wollte \n. Keine der oben genannten Lösungen hat bei mir funktioniert und ich habe endlich eine Lösung gefunden: https://stackoverflow.com/a/61484190/7251208

Kevin H Griffith
quelle