jQuery text () dan baris baru

Saya ingin bisa mengatakan

$(someElem).text('this\n has\n newlines);

dan merender dengan baris baru di browser. Satu-satunya solusi yang saya temukan adalah menyetel properti css 'white-space' menjadi 'pre' on someElem. Ini hampir berhasil, tetapi kemudian saya memiliki padding yang sangat besar antara teks dan bagian atas beberapaElem, bahkan ketika saya menyetel padding ke 0. Apakah ada cara untuk menghilangkan ini?

Ini tahun 2015. Jawaban yang benar untuk pertanyaan ini pada saat ini adalah menggunakan CSS white-space: pre-lineatauwhite-space: pre-wrap . Bersih dan elegan. Versi IE terendah yang mendukung pasangan ini adalah 8.

https://css-tricks.com/almanac/properties/w/whitespace/

PS Sampai CSS3 menjadi umum, Anda mungkin perlu memangkas spasi awal dan / atau akhiran secara manual.

Jika Anda menyimpan objek jQuery dalam variabel, Anda dapat melakukan ini:

var obj = $("#example").text('this\n has\n newlines');
obj.html(obj.html().replace(/\n/g,'<br/>'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="example"></p>

Jika mau, Anda juga dapat membuat fungsi untuk melakukan ini dengan panggilan sederhana, seperti yang dilakukan jQuery.text ():

$.fn.multiline = function(text){
    this.text(text);
    this.html(this.html().replace(/\n/g,'<br/>'));
    return this;
}

// Now you can do this:
$("#example").multiline('this\n has\n newlines');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="example"></p>

Inilah yang saya gunakan:

function htmlForTextWithEmbeddedNewlines(text) {
    var htmls = [];
    var lines = text.split(/\n/);
    // The temporary <div/> is to perform HTML entity encoding reliably.
    //
    // document.createElement() is *much* faster than jQuery('<div></div>')
    // http://stackoverflow.com/questions/268490/
    //
    // You don't need jQuery but then you need to struggle with browser
    // differences in innerText/textContent yourself
    var tmpDiv = jQuery(document.createElement('div'));
    for (var i = 0 ; i < lines.length ; i++) {
        htmls.push(tmpDiv.text(lines[i]).html());
    }
    return htmls.join("<br>");
}
jQuery('#div').html(htmlForTextWithEmbeddedNewlines("hello\nworld"));

Atau, coba gunakan .htmllalu bungkus dengan <pre>tag:

$(someElem).html('this\n has\n newlines').wrap('<pre />');

Anda dapat menggunakan htmlsebagai textganti dan mengganti setiap kemunculan \ndengan <br>. Anda harus benar-benar keluar dari teks Anda.

x = x.replace(/&/g, '&')
     .replace(/>/g, '>')
     .replace(/</g, '&lt;')
     .replace(/\n/g, '<br>');

Saya akan menyarankan untuk bekerja dengan someElemelemen secara langsung, karena penggantian dengan .html()akan menggantikan tag HTML lain di dalam string juga.

Inilah fungsi saya:

function nl2br(el) {
  var lines = $(el).text().split(/\n/);
  $(el).empty();
  for (var i = 0 ; i < lines.length ; i++) {
    if (i > 0) $(el).append('<br>');
    $(el).append(document.createTextNode(lines[i]));
  }
  return el;
}

Sebut dengan:

someElem = nl2br(someElem);

Coba ini:

$(someElem).html('this<br> has<br> newlines);

Menggunakan properti ruang putih CSS mungkin merupakan solusi terbaik. Gunakan Firebug atau Alat Pengembang Chrome untuk mengidentifikasi sumber padding ekstra yang Anda lihat.