Menggunakan baris baru (\ n) dalam string dan merender yang sama dalam HTML

88

Saya memiliki kata-kata

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

di Jquery, saya coba gunakan 

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

cukup jelas saya mengharapkan pesan saya ditampilkan dalam 2 baris, tetapi \ n ditampilkan dalam pesan. Ada perbaikan cepat untuk itu?

Terima kasih,

jquery html string newline KeenUser
sumber
1
Cukup jelas, jawaban ada di pertanyaan Anda, Anda mencoba untuk membuat pesan kesalahan di div sebagai html, jadi Anda dapat menggunakan <br />tag
Murtaza
Tidak ada yang "cukup jelas" dalam mengharapkan dua baris. Sebaliknya, cukup jelas bahwa baris baru akan dirender sebagai spasi kosong, hanya membungkus baris jika diperlukan. Begitulah cara kerja HTML, tentu juga cara .htmlkerjanya.
2
Saya hanya bermaksud dengan konteks di mana saya telah menyimpan string saya sebagai "teks baris pertama" dan "teks baris ke-2", sudah jelas bahwa saya ingin ini dalam 2 baris, bukan sehubungan dengan cara kerja html :) terima kasih.
KeenUser
related: stackoverflow.com/questions/9726970/…
frederj

Jawaban:

80

Gunakan <br />untuk baris baru di html:

display_txt = display_txt.replace(/\n/g, "<br />");
Samich
sumber
1
untuk beberapa alasan, saya harus keluar dari "\ n" sebagai "\\ n" atau tidak berhasil. (diuji di Chrome 46). Ada alasan kenapa?
Sujay Phadke
2
Harap dicatat bahwa ini hanya akan menggantikan kemunculan pertama \nkarakter di dalam string. Lihat dokumentasi MDN
Dominic Boulanger
3
terbaik .replace(/\n/g, "<br />")adalah mencegah lebih banyak baris baru.
KingRider
2
Saya pikir jawaban @vsync haruslah yang diterima.
Ayush Kumar
Bekerja dengan sempurna. Terima kasih.
joshlsullivan
178

Atur css Anda di sel tabel ke

white-space:pre-wrap;


document.body.innerHTML = 'First line\nSecond line\nThird line';
body{ white-space:pre-wrap; }
Luaskan cuplikan

vsync
sumber
6
jadi bukankah ini seharusnya jawaban yang diterima? LE: Saya melihat bahwa ini hanya didukung di tautan
gciochina
4
Jawaban ini jauh lebih baik daripada menyetel innerHTML, karena tidak menyebabkan kerentanan XSS.
LinusK
4
Selain itu, Anda dapat menggunakannya white-space:pre-line;karena urutan spasi akan runtuh menjadi satu spasi. Teks akan dibungkus bila perlu, dan pada jeda baris. Informasi lebih lanjut tentang: https://www.w3schools.com/cssref/pr_text_white-space.asp
HakuteiJ
Jawaban ini tidak mengubah \ n dalam teks menjadi baris baru
irl_irl
2
@ste_irl - apa maksudmu? yang \nberarti baris baru harus dicetak dan itu mencetaknya
vsync
7

Anda bisa menggunakan tag pra alih-alih div. Ini secara otomatis akan menampilkan \ n Anda dengan cara yang benar.

<!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
sumber
1

Mungkin .textbukan .html?


sumber
0

Saya mengalami masalah berikut ketika saya mengambil data dari database dan ingin menampilkan string yang berisi \n. Tidak ada solusi di atas yang berhasil untuk saya dan saya akhirnya menemukan solusi: https://stackoverflow.com/a/61484190/7251208

Kevin H Griffith
sumber