อักขระขึ้นบรรทัดใหม่ของสตริง JavaScript หรือไม่


424

เป็น\nสากลขึ้นบรรทัดใหม่ลำดับตัวอักษรใน Javascript สำหรับแพลตฟอร์มทั้งหมดหรือไม่ ถ้าไม่ฉันจะกำหนดตัวละครสำหรับสภาพแวดล้อมปัจจุบันได้อย่างไร

ฉันไม่ได้ถามเกี่ยวกับองค์ประกอบบรรทัดใหม่ HTML ( <BR/>) ฉันถามเกี่ยวกับลำดับอักขระขึ้นบรรทัดใหม่ที่ใช้ภายในสตริง JavaScript


5
ฉันมีการควบคุมการป้อนข้อมูลแบบหลายบรรทัดซึ่งผู้ใช้คาดว่าจะเข้าสู่รายการที่คั่นด้วยบรรทัดใหม่ ฉันต้องแยกวิเคราะห์รายการโดยแยกสตริงแรกขึ้นบรรทัดใหม่
Landon Kuhn

7
@ landon9720: สำหรับการควบคุมอินพุตแบบหลายบรรทัดของฉันฉันมีgetValueฟังก์ชั่นที่รับvalueและส่งคืนvalue.replace(/\r\n/g,'\n')- เพียงเพื่อให้ผลลัพธ์ที่สอดคล้องกันในเบราว์เซอร์ / แพลตฟอร์ม
Roy Tinker

1
คำถามที่ดีโดยเฉพาะอย่างยิ่งสำหรับผู้ที่ยังใหม่กับการเขียนโปรแกรม! นอกเหนือจาก HTML และใน JavaScript คุณควรรู้วิธีแบ่งเป็นบรรทัดถัดไป / ใหม่
Eric Bishard

ชำระเงินnpmjs.com/package/eol
ryanve

คำตอบ:


362

ฉันเพิ่งทดสอบเบราว์เซอร์บางตัวโดยใช้ JavaScript ที่งี่เง่า:

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 และ Opera 9 บน Windows \r\nใช้ ทั้งหมดที่เบราว์เซอร์อื่น ๆ ที่ผมทดสอบ (Safari 4 และ Firefox 3.5 บน Windows, และ Firefox 3.0 บน Linux) \nการใช้งาน พวกเขาทั้งหมดสามารถจัดการได้\nดีเมื่อตั้งค่าแม้ว่า IE และ Opera จะแปลงกลับไปเป็น\r\nภายในอีกครั้ง มีบทความ SitePoint มีรายละเอียดเพิ่มเติมบางอย่างที่เรียกว่าเป็นตอนจบสายใน Javascript

โปรดทราบว่าสิ่งนี้ไม่เกี่ยวข้องกับการสิ้นสุดบรรทัดจริงในไฟล์ HTML (ทั้งคู่\nและ\r\nให้ผลลัพธ์เหมือนกัน)

เมื่อส่งแบบฟอร์มเบราว์เซอร์ทั้งหมดกำหนดบรรทัดใหม่ให้เป็นแบบ%0D%0Aเข้ารหัส URL หากต้องการดูว่าโหลดเช่นdata:text/html,<form><textarea name="foo">foo%0abar</textarea><input type="submit"></form>และกดปุ่มส่ง (เบราว์เซอร์บางตัวบล็อกการโหลดหน้าที่ส่ง แต่คุณสามารถดูค่าฟอร์มที่เข้ารหัส URL ในคอนโซล)

ฉันไม่คิดว่าคุณจะต้องทำการตัดสินใจใด ๆ หากคุณต้องการแยกข้อความในบรรทัดใหม่คุณสามารถทำสิ่งนี้:

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

14
ทำงานให้ฉันได้ แต่ต้องใช้การตั้งค่าสถานะส่วนกลาง: / \ r \ n | \ r | \ n / g
AdrianoFerrari

17
@ Edson และผิดเนื่องจากจะถือว่า\r\nเป็นสองบรรทัดใหม่แทนหนึ่ง ถ้าคุณต้องการสั้น/\r?\n/gอาจจะทำ (ใครยังใช้ Mac OS 9 อยู่ดี)
Mercator

1
ระบุว่าบทความ SitePoint นั้นมาจากปี 2004 ข้อมูลที่อาจไม่เกี่ยวข้องกับการใช้งาน JS ปัจจุบัน
cbmanica

การจับคู่นั้นเร็วกว่าการแยก: jsperf.com/regex-split-vs-match
Wilt

ดูเหมือนว่า overkill ดูคำตอบของฉันด้านล่างเพื่อคำตอบที่ง่ายขึ้น!
Qasim

81

ใช่มันเป็นสากล

แม้ว่าจะ'\n'เป็นอักขระขึ้นบรรทัดใหม่สากลแต่คุณต้องจำไว้ว่าอักขระขึ้นบรรทัดใหม่อาจนำหน้าขึ้นบรรทัดใหม่โดยอักขระขึ้นบรรทัดใหม่ ( '\r')


55
\ n คืออักขระป้อนบรรทัดสากล(LF) ลำดับไบต์ของ newline ที่แน่นอนนั้นขึ้นอยู่กับแพลตฟอร์ม (\ r \ n, \ n หรือ \ r: en.wikipedia.org/wiki/Newline ) และนั่นคือคำถามที่แลนดอนถาม คุณกำลังขัดแย้งกับตัวเองเมื่อคุณพูดเป็นตัวอักษรขึ้นบรรทัดใหม่สากลก่อนแล้วจึงบอกว่า CR อาจนำหน้าด้วย อันไหน?
Mercator

2
\ n เป็นอักขระขึ้นบรรทัดใหม่ (ตัวดึงบรรทัด) แม้ว่าจะนำหน้าด้วยการขึ้นบรรทัดใหม่ ไม่ควรใช้ CR ด้วยตัวเองแม้ว่า Windows apis และแอพส่วนใหญ่จะแยกมันเป็นบรรทัดใหม่ LF ทำงานได้ดีใน Windows เช่นกัน CR เป็นเพียงสิ่งประดิษฐ์จากเวลาที่คอมพิวเตอร์เป็นเพียงเครื่องพิมพ์ดีดอิเล็กทรอนิกส์
GolezTrol

3
@GolezTrol มีเหตุผลที่ถูกต้องในการใช้ CR ด้วยตนเอง ตัวอย่างเช่นกลับไปที่จุดเริ่มต้นของบรรทัดในหน้าต่างคอนโซลเพื่อเขียนทับบรรทัดโดยไม่ย้ายไปยังบรรทัดถัดไป มักใช้เพื่อเขียนตัวบ่งชี้เปอร์เซ็นต์ความคืบหน้าการเปลี่ยนแปลงในอรรถประโยชน์บรรทัดคำสั่ง
Dan Bechard

2
@ แดนขอบคุณสำหรับคำติชม แน่นอนฉันไม่ควรพูดว่า "ไม่เคย" เพราะมีแอปพลิเคชั่นสำหรับ CR ด้วยตัวเอง แต่คำถามนั้นเกี่ยวกับ Javascript ไม่เกี่ยวกับอรรถประโยชน์ของบรรทัดคำสั่ง แน่นอนว่าอาจมีสคริปต์ที่ทำงานในโหมด CLI (แม้ว่าฉันไม่รู้ว่า CR จะทำงานเหมือนที่คุณพูดหรือไม่) และคุณอาจใช้ Javascript เพื่อสร้างสคริปต์ที่ทำงานในบรรทัดคำสั่ง สิ่งเหล่านี้เป็นข้อยกเว้นที่เป็นไปได้สำหรับกฎ แต่ในบริบทของคำถามพวกเขาดูเหมือนจะไม่ใช้ อย่างไรก็ตามขอขอบคุณที่พูดถึงมัน
GolezTrol

65

อย่าใช้ "\ n" ลองทำสิ่งนี้:

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

เพียงใส่เครื่องหมายแบ็คสแลชและเก็บไว้ใน truckin '! ทำงานเหมือนจับใจ


ES6 ยังรองรับค่าหลายบรรทัดด้วยtildeตัวอักษร (หรือเรียกว่า backtick)
Qasim

10
@Qasim - FYI ผมเชื่อว่าตัวหนอนและ backtick เป็นตัวละครที่แตกต่างกันเห็น~หนอน VS Backtick`
Chris Burgess

1
อา - ใช่แล้วคุณพูดถูก ES6 ใช้อักขระ backtick สำหรับสตริงหลายบรรทัด
Qasim

2
แม้ว่าถูกต้องตามกฎหมายนั่นเป็นเรื่องขมวดคิ้วในแวดวง JS มันขาดการอ่าน หากทำได้ให้ใช้ backticks ของ ES6 ถ้าไม่ \ n
gotofritz

3
เมื่อเขียนโค้ดใช้งานได้ ดูเหมือนว่า OP เกี่ยวกับการแยกวิเคราะห์ข้อความจาก textarea
jinglesthula

53

มันอาจจะง่ายที่สุดในการจัดการกับทุกกรณีของอักขระบรรทัดใหม่แทนที่จะตรวจสอบว่ากรณีใดจึงใช้มัน ตัวอย่างเช่นหากคุณต้องการแทนที่ newline ให้ทำดังนี้:

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

1
ดีเยี่ยม ใช้งานได้ดีใน FF รุ่นที่ใหม่กว่าและ IE (ไม่ได้ทดสอบรุ่นที่เก่ากว่า)
EvilDr


13

ฟังก์ชั่นลิงค์อีเมล์ฉันใช้ "% 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>

มีใครรู้รหัสประเภทนี้สำหรับคีย์แท็บหรือไม่ ฉันลอง "% 0D% 09" แล้วแต่ไม่ทำงาน
Nilay

7

รับตัวแยกบรรทัดสำหรับเบราว์เซอร์ปัจจุบัน:

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

3
แล้วไงreturn textarea.value;ล่ะ
XP1

จะใช้JSON.stringifyกับผลการเปลี่ยนแปลงตัวละคร? ถ้าฉันพยายามที่จะดูผลลัพธ์ในการalert()โทรมันจะไม่แสดงตัวละครให้ฉันเว้นแต่ฉันจะทำให้มันเป็นอันดับแรก (ไม่ใช่ว่าตัวถ่านต้องเป็นคนที่อ่านได้อย่างมีประสิทธิภาพแน่นอน)

4

หมายเหตุ - เมื่อใช้ ExtendScript JavaScript (ภาษาสคริปต์ Adobe ที่ใช้ในแอปพลิเคชันเช่น Photoshop CS3 +) อักขระที่ใช้คือ "\ r" "\ n" จะถูกตีความเป็นอักขระแบบอักษรและแบบอักษรจำนวนมากจึงมีอักขระบล็อกแทน

ตัวอย่างเช่น (เพื่อเลือกเลเยอร์ที่ชื่อว่า 'Note' และเพิ่มการป้อนบรรทัดหลังจากช่วงเวลาทั้งหมด):

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

พยายามคิดว่าทำไม\nและ<br/>ไม่ทำงานในสคริปต์ Photoshop ของฉัน ... ขอบคุณ!
Jake Stoeffler

3

คุณสามารถใช้เครื่องหมายคำพูด `` (ซึ่งอยู่ใต้ปุ่ม Esc) ด้วย ES6 ดังนั้นคุณสามารถเขียนสิ่งนี้:

var text = `fjskdfjslfjsl
skfjslfkjsldfjslfjs
jfsfkjslfsljs`;

1

ฉันเชื่อว่าเป็น - เมื่อคุณทำงานกับสตริง JS

หากคุณกำลังสร้าง HTML คุณจะต้องใช้<br />แท็ก (ไม่ใช่\nเนื่องจากคุณไม่ได้ติดต่อกับ JS อีกต่อไป)


1

ฉันมีปัญหาในการแสดงการขึ้นบรรทัดใหม่กับ\ nหรือ\ r \ n
อย่างน่าอัศจรรย์อักขระ\ rซึ่งใช้สำหรับการคืนสินค้าทำงานได้สำหรับฉันเหมือนขึ้นบรรทัดใหม่
ดังนั้นในบางกรณีการพิจารณา \ r ก็เป็นประโยชน์เช่นกัน


สิ่งนี้จะเกิดขึ้นหากสตริงของคุณมีชุดอักขระ 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

พิมพ์:

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

0

การสังเกตที่เป็นจริง ... ในสคริปต์ NodeJS ของฉันฉันมีฟังก์ชั่นต่อไปนี้:

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

ครั้งแรกฉันมีเพียง "\ n" แต่ฉันสังเกตเห็นว่าเมื่อฉันเปิดไฟล์บันทึกใน Notepad มันจะแสดงรายการทั้งหมดในบรรทัดเดียวกัน Notepad ++ ในอีกทางหนึ่งแสดงรายการแต่ละรายการในบรรทัดของตนเอง หลังจากเปลี่ยนรหัสเป็น "\ r \ n" แม้กระทั่ง Notepad จะแสดงทุกรายการในบรรทัดของตัวเอง


-3

\nเป็นเพียงแค่ปรับทุกกรณีผมเคยพบ ฉันคุณทำงานกับเว็บใช้งาน\nและไม่ต้องกังวลกับมัน (เว้นแต่คุณมีปัญหาเกี่ยวกับการขึ้นบรรทัดใหม่)


-13

คุณสามารถใช้<br/>และdocument.write/, document.writelnหนึ่ง


4
โปรดอ่านคำถามอีกครั้ง โดยเฉพาะกล่าวว่าเขาไม่ได้ถามเกี่ยวกับ<br>
Leigh
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.