ใช้บรรทัดใหม่ (\ n) ในสตริงและแสดงผลเหมือนกันใน HTML

88

ฉันมีสายพูด

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

ใน Jquery ฉันกำลังพยายามใช้ไฟล์

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

ค่อนข้างชัดเจนฉันคาดหวังว่าข้อความของฉันจะแสดงเป็น 2 บรรทัด แต่จะแสดง \ n ในข้อความแทน การแก้ไขอย่างรวดเร็วสำหรับสิ่งนั้นหรือไม่?

ขอบคุณ

— KeenUser
แหล่งที่มา

1

ค่อนข้างชัดเจนคำตอบอยู่ในคำถามของคุณคุณกำลังพยายามแสดงข้อความแสดงข้อผิดพลาดใน div เป็น html เพื่อให้คุณสามารถใช้<br />แท็กได้

— Murtaza

ไม่มีอะไร "ค่อนข้างชัดเจน" ในการคาดหวังสองบรรทัด ในทางตรงกันข้ามค่อนข้างชัดเจนว่าการขึ้นบรรทัดใหม่จะแสดงผลเป็นพื้นที่ธรรมดาโดยจะตัดบรรทัดหากจำเป็นเท่านั้น มันเป็นวิธีการทำงานของ HTML แน่นอนว่ามันเป็นวิธีการ.htmlทำงานด้วย

2

ฉันหมายถึงบริบทที่ฉันจัดเก็บสตริงของฉันเป็น "ข้อความบรรทัดที่ 1" และ "ข้อความบรรทัดที่ 2" เป็นที่ชัดเจนว่าฉันต้องการสิ่งเหล่านี้ใน 2 บรรทัดไม่ใช่เกี่ยวกับวิธีการทำงานของ html :) ขอบคุณ

— KeenUser

related: stackoverflow.com/questions/9726970/…

— frederj

80

ใช้<br />สำหรับบรรทัดใหม่ใน html:

display_txt = display_txt.replace(/\n/g, "<br />");

— ซามิช
แหล่งที่มา

1

ด้วยเหตุผลบางประการฉันต้องหนี "\ n" เป็น "\\ n" ไม่เช่นนั้นก็ใช้ไม่ได้ (ทดสอบใน Chrome 46) เหตุผลใด?

— Sujay Phadke

2

โปรดทราบว่าสิ่งนี้จะแทนที่การเกิดขึ้นครั้งแรกของ\nอักขระภายในสตริงเท่านั้น ดูเอกสาร MDN

— Dominic Boulanger

3

ที่ดีที่สุด.replace(/\n/g, "<br />")คือป้องกันไม่ให้มีการขึ้นบรรทัดใหม่

— KingRider

2

ฉันคิดว่าคำตอบของ @vsync ควรเป็นคำตอบที่ได้รับการยอมรับ

— Ayush Kumar

ทำงานได้อย่างสมบูรณ์แบบ ขอขอบคุณ.

— joshlsullivan

178

ตั้งค่า css ของคุณในเซลล์ตารางเป็น

white-space:pre-wrap;

document.body.innerHTML = 'First line\nSecond line\nThird line';

body{ white-space:pre-wrap; }

ขยายข้อมูลโค้ด

— vsync
แหล่งที่มา

6

นี่ไม่ควรจะเป็นคำตอบที่ยอมรับได้ใช่ไหม LE: ฉันเห็นว่าสิ่งนี้รองรับเฉพาะในลิงค์

— gciochina

4

คำตอบนี้ดีกว่าการตั้งค่า innerHTML เนื่องจากไม่ก่อให้เกิดช่องโหว่ XSS

— LinusK

4

นอกจากนี้คุณสามารถใช้white-space:pre-line;เป็นลำดับของช่องว่างที่จะยุบเป็นช่องว่างเดียว ข้อความจะตัดเมื่อจำเป็นและขึ้นบรรทัดใหม่ ข้อมูลเพิ่มเติมเกี่ยวกับ: https://www.w3schools.com/cssref/pr_text_white-space.asp

— HakuteiJ

คำตอบนี้ไม่ได้แปลง \ n ภายในข้อความเป็นขึ้นบรรทัดใหม่

— irl_irl

2

@ste_irl - คุณหมายถึงอะไร? \nวิธีการขึ้นบรรทัดใหม่ควรจะพิมพ์และมันไม่พิมพ์

— vSync

7

คุณสามารถใช้ pre tag แทน div ได้ สิ่งนี้จะแสดง \ n ของคุณโดยอัตโนมัติในวิธีที่ถูกต้อง

<!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
แหล่งที่มา

1

อาจจะ.textแทน.html?

0

ฉันมีปัญหาต่อไปนี้ที่ฉันดึงข้อมูลจากฐานข้อมูลและต้องการแสดงสตริงที่มี\nไฟล์. วิธีแก้ปัญหาข้างต้นไม่ได้ผลสำหรับฉันและในที่สุดฉันก็ได้หาวิธีแก้ปัญหา: https://stackoverflow.com/a/61484190/7251208

— เควินเอชกริฟฟิ ธ
แหล่งที่มา