Karakter JavaScript string baris baru?


424

Apakah \nurutan karakter baris baru universal dalam Javascript untuk semua platform? Jika tidak, bagaimana cara menentukan karakter untuk lingkungan saat ini?

Saya tidak bertanya tentang elemen HTML baris baru ( <BR/>). Saya bertanya tentang urutan karakter baris baru yang digunakan dalam string JavaScript.


5
Saya memiliki kontrol input multiline di mana pengguna diharapkan untuk memasukkan daftar yang dipisahkan baris baru. Saya perlu menguraikan daftar dengan terlebih dahulu memisahkan string pada baris baru.
Landon Kuhn

7
@ landon9720: Untuk kontrol input multiline saya, saya memiliki getValuefungsi yang mengambil valuedan mengembalikan value.replace(/\r\n/g,'\n')- hanya untuk menjaga output konsisten di seluruh browser / platform.
Roy Tinker

1
Pertanyaan bagus terutama bagi mereka yang baru mengenal pemrograman! Di luar HTML dan JavaScript, baik untuk mengetahui cara memecah ke baris berikutnya / baru.
Eric Bishard

Jawaban:


362

Saya baru saja menguji beberapa browser menggunakan JavaScript yang konyol ini:

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 dan Opera 9 menggunakan Windows \r\n. Semua browser lain yang saya uji (Safari 4 dan Firefox 3.5 pada Windows, dan Firefox 3.0 pada Linux) digunakan \n. Mereka semua dapat menangani dengan \nbaik ketika mengatur nilai, meskipun IE dan Opera akan mengubahnya kembali menjadi \r\ninternal. Ada artikel SitePoint dengan beberapa perincian lagi yang disebut Garis akhiran dalam Javascript .

Perhatikan juga bahwa ini tidak tergantung pada akhir baris aktual dalam file HTML itu sendiri (keduanya \ndan \r\nmemberikan hasil yang sama).

Saat mengirimkan formulir, semua browser mengkanoniskan baris baru ke %0D%0Adalam penyandian URL. Untuk melihatnya, muat misalnya data:text/html,<form><textarea name="foo">foo%0abar</textarea><input type="submit"></form>dan tekan tombol kirim. (Beberapa browser memblokir memuat halaman yang dikirimkan, tetapi Anda dapat melihat nilai formulir yang dikodekan URL di konsol.)

Saya tidak berpikir Anda benar-benar perlu melakukan banyak penentuan. Jika Anda hanya ingin membagi teks pada baris baru, Anda dapat melakukan sesuatu seperti ini:

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

14
Bekerja untuk saya, harus menggunakan bendera global: / \ r \ n | \ r | \ n / g
AdrianoFerrari

17
@ Edson dan salah, karena akan diperlakukan \r\nsebagai dua baris baru, bukan satu. Jika Anda ingin pendek, /\r?\n/gmungkin akan melakukan (yang masih menggunakan Mac OS 9?)
mercator

1
Karena artikel SitePoint berasal dari 2004, informasi di sana mungkin tidak relevan dengan implementasi JS saat ini.
cbmanica

Pertandingan seharusnya jauh lebih cepat daripada split: jsperf.com/regex-split-vs-match
Wilt

Ini sepertinya berlebihan, lihat jawaban saya di bawah ini untuk solusi yang lebih sederhana!
Qasim

81

Ya, itu universal.

Meskipun '\n'adalah karakter baris baru universal , Anda harus ingat bahwa, tergantung pada input Anda, karakter baris baru mungkin didahului oleh karakter carriage return ( '\r').


55
\ n adalah karakter umpan garis universal (LF). Urutan byte baris baru yang tepat tergantung pada platform (\ r \ n, \ n, atau \ r: en.wikipedia.org/wiki/Newline ). Dan itulah pertanyaan yang diajukan Landon. Anda bertentangan dengan diri Anda ketika pertama kali mengatakan itu adalah karakter baris baru universal, dan kemudian mengatakan itu mungkin didahului oleh CR. Yang mana?
mercator

2
\ n adalah karakter baris baru (umpan baris), bahkan jika itu didahului oleh carriage return. CR tidak boleh digunakan sendiri, meskipun sebagian besar apis dan aplikasi Windows akan menguraikannya sebagai baris baru. LF bekerja dengan baik di Windows juga. CR hanyalah sebuah artefak dari waktu ketika komputer hanyalah mesin tik elektronik.
GolezTrol

3
@GolezTrol Ada alasan yang sah untuk menggunakan CR sendiri. Misalnya, kembali ke awal baris di jendela konsol untuk menimpa baris, tanpa berpindah ke baris berikutnya. Ini sering digunakan untuk menulis perubahan persen indikator kemajuan dalam utilitas baris perintah.
Dan Bechard

2
@Dan Terima kasih atas umpan baliknya. Tentu saja, saya seharusnya tidak mengatakan "tidak pernah", karena memang ada aplikasi untuk CR sendiri. Tetapi pertanyaannya adalah tentang Javascript bukan tentang utilitas baris perintah. Tentu saja mungkin ada skrip yang berjalan dalam mode CLI (walaupun saya tidak tahu apakah CR akan bekerja seperti yang Anda katakan), dan Anda bahkan dapat menggunakan Javascript untuk menghasilkan skrip yang dijalankan di baris perintah. Itu mungkin pengecualian untuk aturan, tetapi dalam konteks pertanyaan mereka tampaknya tidak berlaku. Namun demikian, terima kasih telah menyebutkannya.
GolezTrol

65

Jangan gunakan "\ n". Coba saja ini:

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

Cukup masukkan back-slash dan terus truckin '! Bekerja seperti pesona.


ES6 juga mendukung nilai multiline dengan tildekarakter (jika tidak disebut backtick).
Qasim

10
@Qasim - FYI, saya percaya tilde dan backtick adalah karakter yang berbeda, lihat ~Tilde vs `Backtick .
Chris Burgess

1
Ah - Yup, kamu benar. ES6 menggunakan karakter backtick untuk string multiline
Qasim

2
Meskipun legal, itu disukai di kalangan JS. Itu kurang mudah dibaca. jika Anda bisa, gunakan backticks ES6. Jika tidak, \ n
Gotofritz

3
Saat menulis kode ini berfungsi. Sepertinya OP adalah tentang parsing teks dari textarea.
jinglesthula

53

Mungkin paling mudah untuk hanya menangani semua case dari karakter baris baru daripada memeriksa case yang kemudian menerapkannya. Misalnya, jika Anda perlu mengganti baris baru maka lakukan hal berikut:

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

1
Hebat. Berfungsi bagus di versi FF dan IE yang lebih baru (tidak menguji versi yang lebih lama)
EvilDr


13

Fungsi tautan email yang saya gunakan "% 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>

Adakah yang tahu jenis kode ini untuk kunci tab? saya mencoba "% 0D% 09" tetapi tidak berfungsi.
Nilay

7

Dapatkan pemisah garis untuk browser saat ini:

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

3
Bagaimana dengan return textarea.value;?
XP1

Apakah menggunakan JSON.stringifyhasil akan mengubah karakter? Jika saya mencoba untuk melihat hasil dalam alert()panggilan, itu tidak menunjukkan kepada saya karakter kecuali saya tegaskan terlebih dahulu (bukan berarti char harus dapat dibaca manusia agar efektif, tentu saja)

4

Catatan - saat menggunakan ExtendScript JavaScript (bahasa Adobe Scripting yang digunakan dalam aplikasi seperti Photoshop CS3 +), karakter yang digunakan adalah "\ r". "\ n" akan ditafsirkan sebagai karakter font, dan karenanya banyak font akan memiliki karakter blok.

Misalnya (untuk memilih lapisan bernama 'Catatan' dan menambahkan umpan baris setelah semua periode):

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

Sedang berusaha mencari tahu mengapa \ndan <br/>tidak bekerja di skrip Photoshop saya ... Terima kasih!
Jake Stoeffler

3

Anda dapat menggunakan `` quotes (yang di bawah tombol Esc) dengan ES6. Jadi Anda dapat menulis sesuatu seperti ini:

var text = `fjskdfjslfjsl
skfjslfkjsldfjslfjs
jfsfkjslfsljs`;

1

Saya percaya itu - ketika Anda bekerja dengan string JS.

Namun, jika Anda menghasilkan HTML, Anda harus menggunakan <br />tag (bukan \n, karena Anda tidak lagi berurusan dengan JS)


1

Saya memiliki masalah dalam mengekspresikan baris baru dengan \ n atau \ r \ n .
Ajaib karakter \ r yang digunakan untuk carriage return bekerja untuk saya seperti baris baru.
Jadi dalam beberapa kasus, berguna untuk mempertimbangkan juga.


Ini terjadi jika string Anda memiliki charset 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

Cetakan:

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

0

Pengamatan praktis ... Dalam skrip NodeJS saya, saya memiliki fungsi berikut:

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

Pertama saya hanya punya "\ n" tetapi saya perhatikan bahwa ketika saya membuka file log di Notepad, itu menunjukkan semua entri pada baris yang sama. Notepad ++ di sisi lain menunjukkan entri masing-masing pada baris mereka sendiri. Setelah mengubah kode menjadi "\ r \ n", bahkan Notepad menampilkan setiap entri pada barisnya sendiri.


-3

Tidak \napa-apa untuk semua kasus yang saya temui. Saya Anda bekerja dengan web, gunakan \ndan jangan khawatir tentang hal itu (kecuali jika Anda memiliki masalah terkait baris baru).


-13

Anda dapat menggunakan <br/>dan document.write/, document.writelnsatu.


4
Harap baca kembali pertanyaannya. Secara khusus mengatakan dia tidak bertanya tentang<br>
Leigh
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.