JavaScript-Zeichenfolge Zeilenumbruch?


424

Ist \ndie universelle Newline-Zeichenfolge in Javascript für alle Plattformen? Wenn nicht, wie bestimme ich den Charakter für die aktuelle Umgebung?

Ich frage nicht nach dem HTML-Zeilenumbruchelement ( <BR/>). Ich frage nach der Zeilenumbruchzeichenfolge, die in JavaScript-Zeichenfolgen verwendet wird.


5
Ich habe ein mehrzeiliges Eingabesteuerelement, bei dem der Benutzer eine durch Zeilenumbrüche getrennte Liste eingeben soll. Ich muss die Liste analysieren, indem ich zuerst die Zeichenfolge in Zeilenumbrüche aufteile.
Landon Kuhn

7
@ landon9720: Für meine mehrzeiligen Eingabesteuerelemente habe ich eine getValueFunktion, die das valueund das zurückgibt value.replace(/\r\n/g,'\n')- nur um die Ausgabe über Browser / Plattformen hinweg konsistent zu halten.
Roy Tinker

1
Gute Frage besonders für diejenigen, die neu in der Programmierung sind! Außerhalb von HTML und in JavaScript ist es gut zu wissen, wie man zur nächsten / neuen Zeile übergeht.
Eric Bishard

Antworten:


362

Ich habe gerade ein paar Browser mit diesem albernen Stück JavaScript getestet:

function log_newline(msg, test_value) {
  if (!test_value) { 
    test_value = document.getElementById('test').value;
  }
  console.log(msg + ': ' + (test_value.match(/\r/) ? 'CR' : '')
              + ' ' + (test_value.match(/\n/) ? 'LF' : ''));
}

log_newline('HTML source');
log_newline('JS string', "foo\nbar");
log_newline('JS template literal', `bar
baz`);
<textarea id="test" name="test">

</textarea>

IE8 und Opera 9 unter Windows verwenden \r\n. Alle anderen von mir getesteten Browser (Safari 4 und Firefox 3.5 unter Windows und Firefox 3.0 unter Linux) verwenden \n. Sie können alle \ngut mit dem Einstellen des Werts umgehen , obwohl IE und Opera dies \r\nintern wieder in konvertieren . Es gibt einen SitePoint-Artikel mit einigen weiteren Details, die als Zeilenenden in Javascript bezeichnet werden .

Beachten Sie auch, dass dies unabhängig von den tatsächlichen Zeilenenden in der HTML-Datei selbst ist (beide \nund \r\ndie gleichen Ergebnisse liefern).

Beim Senden eines Formulars können alle Browser Zeilenumbrüche %0D%0Ain der URL-Codierung kanonisieren . Um dies zu sehen, laden Sie zB data:text/html,<form><textarea name="foo">foo%0abar</textarea><input type="submit"></form>und drücken Sie die Senden-Taste. (Einige Browser blockieren das Laden der übermittelten Seite, aber Sie können die URL-codierten Formularwerte in der Konsole sehen.)

Ich glaube jedoch nicht, dass Sie wirklich viel bestimmen müssen. Wenn Sie den Text nur in Zeilenumbrüche aufteilen möchten, können Sie Folgendes tun:

lines = foo.value.split(/\r\n|\r|\n/g);

14
Arbeitete für mich, musste aber globales Flag verwenden: / \ r \ n | \ r | \ n / g
AdrianoFerrari

17
@Edson und falsch, da es \r\nals zwei Zeilenumbrüche statt als eine behandelt wird. Wenn Sie kurz wollen, /\r?\n/gwird wahrscheinlich tun (wer verwendet noch Mac OS 9 überhaupt?).
Mercator

1
Da der SitePoint-Artikel aus dem Jahr 2004 stammt, sind die dortigen Informationen möglicherweise nicht für aktuelle JS-Implementierungen relevant.
cbmanica

Match ist angeblich viel schneller als Split: jsperf.com/regex-split-vs-match
Wilt

Dies scheint übertrieben, siehe meine Antwort unten für eine einfachere Lösung!
Qasim

81

Ja, es ist universell.

Obwohl '\n'es sich um universelle Zeilenumbrüche handelt , müssen Sie berücksichtigen, dass neuen Zeilenzeichen abhängig von Ihrer Eingabe möglicherweise Wagenrücklaufzeichen ( '\r') vorangestellt werden .


55
\ n ist das universelle Zeilenvorschubzeichen (LF). Die genaue Reihenfolge der Zeilenumbrüche hängt von der Plattform ab (\ r \ n, \ n oder \ r: en.wikipedia.org/wiki/Newline ). Und das ist die Frage, die Landon stellt. Sie widersprechen sich selbst, wenn Sie zuerst sagen, dass es sich um das universelle Newline-Zeichen handelt, und dann sagen, dass möglicherweise eine CR vorangestellt ist. Welches ist es?
Mercator

2
\ n ist das Zeilenumbruchzeichen (Zeilenvorschub), auch wenn ihm ein Wagenrücklauf vorangestellt ist. CR sollte niemals alleine verwendet werden, obwohl die meisten Windows-APIs und -Apps es als Newline analysieren. LF funktioniert auch unter Windows. CR ist nur ein Artefakt aus der Zeit, als Computer nur elektronische Schreibmaschinen waren.
GolezTrol

3
@GolezTrol Es gibt triftige Gründe, CR alleine zu verwenden. Kehren Sie beispielsweise in einem Konsolenfenster zum Zeilenanfang zurück, um die Zeile zu überschreiben, ohne zur nächsten Zeile zu wechseln. Dies wird häufig verwendet, um sich ändernde prozentuale Fortschrittsanzeigen in Befehlszeilenprogrammen zu schreiben.
Dan Bechard

2
@ Dan Danke für das Feedback. Natürlich hätte ich niemals "nie" sagen sollen, denn es gibt tatsächlich Anwendungen für eine CR für sich. Die Frage bezieht sich jedoch auf Javascript und nicht auf Befehlszeilenprogramme. Natürlich kann ein Skript im CLI-Modus ausgeführt werden (obwohl ich nicht weiß, ob CR so funktioniert, wie Sie es damals gesagt haben), und Sie können sogar Javascript verwenden, um ein Skript zu generieren, das in der Befehlszeile ausgeführt wird. Dies sind mögliche Ausnahmen von der Regel, aber im Kontext der Frage scheinen sie nicht zuzutreffen. Trotzdem danke, dass du es erwähnt hast.
GolezTrol

65

Verwenden Sie nicht "\ n". Versuchen Sie einfach Folgendes:

var string = "this\
is a multi\
line\
string";

Geben Sie einfach einen Schrägstrich ein und fahren Sie weiter! Klappt wunderbar.


ES6 unterstützt auch mehrzeilige Werte mit dem tildeZeichen (auch als Backtick bezeichnet).
Qasim

10
@ Qasim - FYI, ich glaube, Tilde und Backtick sind unterschiedliche Charaktere, siehe ~Tilde vs `Backtick .
Chris Burgess

1
Ah - Ja, du hast recht. ES6 verwendet das Backtick-Zeichen für mehrzeilige Zeichenfolgen
Qasim

2
Obwohl legal, ist das in JS-Kreisen verpönt. Es fehlt die Lesbarkeit. Wenn Sie können, verwenden Sie die Backticks von ES6. Wenn nicht, \ n
gotofritz

3
Beim Schreiben von Code funktioniert dies. Es sieht so aus, als würde es beim OP darum gehen, Text aus einem Textbereich zu analysieren.
Jinglesthula

53

Es ist möglicherweise am einfachsten, alle Fälle des neuen Zeilenzeichens zu behandeln, anstatt zu prüfen, welcher Fall dann angewendet wird. Wenn Sie beispielsweise die neue Zeile ersetzen müssen, gehen Sie wie folgt vor:

htmlstring = stringContainingNewLines.replace(/(\r\n|\n|\r)/gm, "<br>");

1
Hervorragend. Funktioniert hervorragend in späteren Versionen FF und IE (ältere Versionen jedoch nicht getestet)
EvilDr

25

Ja, verwenden Sie \ n, es sei denn, Sie generieren HTML-Code, in dem Sie verwenden möchten <br />


13

E-Mail-Link-Funktion Ich benutze "% 0D% 0A"

function sendMail() {   
var bodydata="Before "+ "%0D%0A";
    bodydata+="After"

var MailMSG = "mailto:aaa@sss.com" 
         + "?cc=07@sss.com" 
         + "&subject=subject" 
         + "&body=" + bodydata; 
window.location.href = MailMSG; 
} 

[HTML]

<a href="#" onClick="sendMail()">Contact Us</a>

Kennt jemand diese Art von Code für Tabulator? Ich habe versucht "% 0D% 09", aber nicht funktioniert.
Nilay

7

Holen Sie sich ein Zeilentrennzeichen für den aktuellen Browser:

function getLineSeparator() {
  var textarea = document.createElement("textarea");
  textarea.value = "\n"; 
  return textarea.value;
}

3
Wie wäre es return textarea.value;?
XP1

Wird die Verwendung JSON.stringifydes Ergebnisses den Charakter ändern? Wenn ich versuche, das Ergebnis in einem alert()Aufruf anzuzeigen, wird mir das Zeichen nur angezeigt, wenn ich es zuerst stringiere (natürlich muss das Zeichen nicht lesbar sein, um effektiv zu sein)

4

Hinweis: Bei Verwendung von ExtendScript JavaScript (der in Anwendungen wie Photoshop CS3 + verwendeten Adobe Scripting-Sprache) lautet das zu verwendende Zeichen "\ r". "\ n" wird als Schriftzeichen interpretiert, und viele Schriftarten haben stattdessen ein Blockzeichen.

Zum Beispiel (um eine Ebene mit dem Namen "Notiz" auszuwählen und nach allen Zeiträumen Zeilenvorschübe hinzuzufügen):

var layerText = app.activeDocument.artLayers.getByName('Note').textItem.contents;
layerText = layerText.replace(/\. /g,".\r");

Ich habe versucht herauszufinden, warum \nund habe <br/>in meinem Photoshop-Skript nicht funktioniert ... Danke!
Jake Stoeffler

3

Sie können mit ES6 `` Anführungszeichen (die sich unter der Esc-Taste befinden) verwenden. Sie können also so etwas schreiben:

var text = `fjskdfjslfjsl
skfjslfkjsldfjslfjs
jfsfkjslfsljs`;

1

Ich glaube schon - wenn Sie mit JS-Strings arbeiten.

Wenn Sie jedoch HTML generieren, müssen Sie <br />Tags verwenden (nicht \n, da Sie sich nicht mehr mit JS beschäftigen).


1

Ich hatte das Problem, Zeilenumbrüche mit \ n oder \ r \ n auszudrücken . Magischerweise funktionierte
das Zeichen \ r, das für den Wagenrücklauf verwendet wird, für mich wie eine neue Zeile.
In einigen Fällen ist es daher nützlich, auch \ r zu berücksichtigen.


Dies passiert, wenn Ihre Zeichenfolge den Zeichensatz ISO-8859-1
CodeBrauer

0
printAccountSummary: function()
        {return "Welcome!" + "\n" + "Your balance is currently $1000 and your interest rate is 1%."}
};
console.log(savingsAccount.printAccountSummary()); // method

Drucke:

Welcome!
Your balance is currently $1000 and your interest rate is 1%.

0

Eine praktische Beobachtung ... In meinem NodeJS-Skript habe ich folgende Funktion:

function writeToLogFile (message) {
    fs.appendFile('myserverlog.txt', Date() + " " + message + "\r\n", function (err) {
        if (err) throw err;
    });
}

Zuerst hatte ich nur "\ n", aber ich bemerkte, dass beim Öffnen der Protokolldatei im Editor alle Einträge in derselben Zeile angezeigt werden. Notepad ++ hingegen zeigt die Einträge jeweils in einer eigenen Zeile. Nachdem Sie den Code in "\ r \ n" geändert haben, zeigt sogar Notepad jeden Eintrag in einer eigenen Zeile an.


-3

Das \nist in Ordnung für alle Fälle, denen ich begegnet bin. \nWenn Sie mit dem Web arbeiten, verwenden Sie es und sorgen Sie sich nicht darum (es sei denn, Sie hatten Probleme mit Zeilenumbrüchen).


-13

Sie können verwenden <br/>und die document.write/, document.writelneine.


4
Bitte lesen Sie die Frage erneut. Es heißt ausdrücklich, dass er nicht danach fragt<br>
Leigh
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.