Wie ersetze ich alle Zeilenumbrüche in einer Zeichenfolge durch <br /> Elemente?

536

Wie kann ich den Zeilenumbruch aus einem Wert mit JavaScript lesen und alle Zeilenumbrüche durch <br />Elemente ersetzen ?

Beispiel:

Eine von PHP wie folgt übergebene Variable:

  "This is man.

     Man like dog.
     Man like to drink.

     Man is the king."

Ich möchte, dass mein Ergebnis nach der Konvertierung durch JavaScript ungefähr so ​​aussieht:

  "This is man<br /><br />Man like dog.<br />Man like to drink.<br /><br />Man is the king."
Jin Yong
quelle
1
Stimmt etwas mit Ihrer ursprünglichen Frage nicht? stackoverflow.com/questions/784313/…
harto
1
Sie können auch nl2br ($ string) in PHP ausführen, bevor Sie es an JavaScript senden.
alex
1
Ich werde abstimmen, um die frühere Frage zu schließen, da dies ein besseres Beispiel ist.
Augenlidlosigkeit
2
Er sollte dann die erste Frage bearbeiten
nickf
Ich kam hierher von einem fehlgeleiteten Verständnis zu dem, was mit .text () los war. Siehe stackoverflow.com/q/35238362/1467396, wenn Sie das auch tun
David

Antworten:

1202

Dadurch werden alle Rückgaben in HTML umgewandelt

str = str.replace(/(?:\r\n|\r|\n)/g, '<br>');

Falls Sie sich fragen, was ?: Bedeutet. Es wird als nicht erfassende Gruppe bezeichnet. Dies bedeutet, dass eine Gruppe von Regex in Klammern nicht im Speicher gespeichert wird, auf den später verwiesen wird. Weitere Informationen finden Sie in diesen Threads:
https://stackoverflow.com/a/11530881/5042169 https://stackoverflow.com/a/36524555/5042169

Augenlidlosigkeit
quelle
77
Nur ein zusätzlicher Hinweis: str.replace("\n", '<br />')(erstes Argument ist eine reguläre Zeichenfolge) ersetzt nur das erste Vorkommen.
Serge S.
19
Eine andere Version (um mehrere Zeilenumbrüche zu ersetzen): str.replace (/ (\ n) + / g, '<br />');
Ritesh
4
@ SergeS. Danke für diesen zusätzlichen Kommentar. Ich habe mir gerade eine Menge Zeit gespart! jsfiddle
EleventyOne
4
@SergeS. String#replaceErzwingt das erste Argument von Stringeiner Escape- RegExpInstanz ohne Flags. str.replace('\n', '<br />');ist gleichbedeutend mitstr.replace(new RegExp('\n'), '<br />');
Augenlidlosigkeit
2
Hier ist ein Testfall im Vergleich zu str.split("\n").join("<br />") jsperf.com/split-join-vs-replace-regex RegEx scheint etwas schneller
Aley
390

Wenn in Ihrem Unternehmen nur Zeilenumbrüche angezeigt werden, können Sie dies mit CSS tun.

<div style="white-space: pre-line">Some test
with linebreaks</div>

Jsfiddle: https://jsfiddle.net/5bvtL6do/2/

Hinweis : Achten Sie auf die Code-Formatierung und das Einrücken, da dies white-space: pre-lineangezeigt wird alle Zeilenumbrüche ( mit Ausnahme des letzten Newline nach dem Text finden Geige).

Bersling
quelle
59
Tolle Antwort ... braucht mehr Boote!
Ian Quigley
11
Ich kam hierher, um nach dem regulären Ausdruck zu suchen, und ging damit. In vielen Fällen ist dies das, wonach Menschen suchen. Wir verwenden Zeilenumbrüche für E-Mails und müssen manchmal anzeigen, wie die E-Mail in HTML aussah. Perfecto. Vielen Dank, dass Sie die Frage in einem anderen Licht betrachtet haben
Mutmatt
1
Dies könnte für tatsächliche Zeilenumbrüche funktionieren, aber was ist, wenn ich "\ n" wie in der Frage habe? Kann ich das auch per CSS lösen?
Froxx
18
Anstelle von white-space: pre-wrap;ich bevorzuge die Verwendung white-space: pre-line;(um doch keine letzte Unterbrechungslinie hinzuzufügen)
jpmottin
5
sieht gut aus, aber was ist mit einem riesigen Raum vor der ersten Zeile? seltsam
Toolkit
71

Ohne Regex:

str = str.split("\n").join("<br />");
paulslater19
quelle
2
Wenn Sie "\\ n" ausführen, vermeiden Sie Probleme beim Aufteilen nur auf das "n".
CrowderSoup
10
@ CrowderSoup hmm? Ich habe es gerade versucht und \\nstimme nicht mit einer neuen Zeile überein, weil es nach backslash+ sucht n.
Paulslater19
1
Ich habe einen Testfall gemacht. RegEx ist etwas schneller, aber überzeugen
Aley
Ich fand, dass diese Antwort nicht funktionierte, es sei denn, der Schrägstrich wurde entkommen. Zum Beispiel: str = str.split ("\ n"). Join ("<br />");
ACOMIT001
@ ACOMIT001 Ich denke, das hängt davon ab, ob der String eine neue Zeile oder einen schwarzen Schrägstrich hat und n?
Paulslater19
38

Dies funktioniert für Eingaben aus einem Textbereich

str.replace(new RegExp('\r?\n','g'), '<br />');
WSkinner
quelle
1
Es ist die beste Antwort für mich, weil Sie das \ r nicht vergessen haben, das auf einigen Systemen verwendet wird
Bartłomiej Zalewski
1
Dies ist die beste Antwort auf diese Frage. Aber ich werde einfach mit <br> nicht <br /> gehen. Siehe diesen einen stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br
kheya
8

Wenn die akzeptierte Antwort für Sie nicht richtig funktioniert, können Sie es versuchen.

str.replace(new RegExp('\n','g'), '<br />')

Es hat bei mir funktioniert.

Jethro Larson
quelle
2
new RegExp('\n', 'g')ist identisch mit /\n/g(mit Ausnahme einiger Kleinigkeiten über die Verwendung primitiver Literale im Vergleich zu ihren Konstruktoren).
Augenlidlosigkeit
2
Was auch immer der Grund war, dies funktionierte für mich, aber die akzeptierte Antwort tat es nicht
Nick
1
Ah, das gleiche hier ... aber mein Fehler war der Versuch, /\n/gals Zeichenfolge anzugeben !
Daniel Fortunov
7

Unabhängig vom System:

my_multiline_text.replace(/$/mg,'<br>');
Michele Ongaro
quelle
1
Achtung: Dadurch wird an jede Zeichenfolge ein '<br>' - Tag angehängt, unabhängig davon, ob ein '\ n' darin enthalten ist.
Mkoeller
4

Es ist auch wichtig, den Rest des Textes zu codieren, um sich vor möglichen Skriptinjektionsangriffen zu schützen

function insertTextWithLineBreaks(text, targetElement) {
    var textWithNormalizedLineBreaks = text.replace('\r\n', '\n');
    var textParts = textWithNormalizedLineBreaks.split('\n');

    for (var i = 0; i < textParts.length; i++) {
        targetElement.appendChild(document.createTextNode(textParts[i]));
        if (i < textParts.length - 1) {
            targetElement.appendChild(document.createElement('br'));
        }
    }
}
Dmitry Dzygin
quelle
4

Dies funktionierte für mich, als der Wert von einer TextBox kam:

string.replace(/\n|\r\n|\r/g, '<br/>');
Dr. Aaron Dishno
quelle
2

Für diejenigen unter Ihnen, die nur max. 2 <br>in einer Reihe können Sie dies verwenden:

let text = text.replace(/(\r?\n){2,}/g, '<br><br>');
text = text.replace(/(\r?\n)/g, '<br>');

Erste Zeile: Suchen Sie nach \nODER, \r\nwenn sich mindestens 2 davon in einer Reihe befinden, z \n\n\n\n. Dann ersetzen Sie es durch 2br

Zweite Zeile: Suchen Sie nach allen einzelnen \r\noder \nund ersetzen Sie sie durch<br>

Max
quelle
1

Wenn Sie die Variable von PHP senden, können Sie sie damit vor dem Senden erhalten:

$string=nl2br($string);
Luca C.
quelle
0

Es wird alle neuen Zeilen durch Unterbrechungen ersetzen

str = str.replace(/\n/g, '<br>')

Wenn Sie alle neuen Zeilen durch einzelne Unterbrechungszeilen ersetzen möchten

str = str.replace(/\n*\n/g, '<br>')

Lesen Sie mehr über Regex: https://dl.icewarp.com/online_help/203030104.htm Dies wird Ihnen jederzeit helfen.

Ritu Gupta
quelle
Es ist auch möglich, eine Regex wie diese str = str.replace(/\n+/g, '<br>')für den zweiten Fall zu verwenden
Matteo Basso
0

Ich beantworte die spezifische Frage nicht, aber ich bin sicher, dass dies jemandem helfen wird ...

Wenn Sie eine Ausgabe von PHP haben, die Sie mit JavaScript auf einer Webseite rendern möchten (möglicherweise das Ergebnis einer Ajax-Anforderung), und nur Leerzeichen und Zeilenumbrüche beibehalten möchten, sollten Sie den Text in einen <pre></pre>Block einschließen :

var text_with_line_breaks = retrieve_some_text_from_php();
var element = document.querySelectorAll('#output');
element.innerHTML = '<pre>' + text_with_line_breaks + '</pre>';
osullisch
quelle
0

Versuchen

let s=`This is man.

     Man like dog.
     Man like to drink.

     Man is the king.`;
     
msg.innerHTML = s.replace(/\n/g,"<br />");
<div id="msg"></div>

Kamil Kiełczewski
quelle