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,

— 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

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?

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