jQuery metni () ve satırsonları

Söyleyebilmek istiyorum

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

ve tarayıcıda yeni satırlarla işlenir. Bulduğum tek çözüm, bazıElem'de 'beyaz boşluk' css özelliğini 'pre' olarak ayarlamaktır. Bu neredeyse işe yarıyor, ancak dolguyu 0'a ayarlasam bile, metin ile bazı Elemlerin üstü arasında can sıkıcı derecede büyük bir dolgu var. Bundan kurtulmanın bir yolu var mı?

2015 yılı. Bu noktada bu sorunun doğru cevabı CSS white-space: pre-lineveya white-space: pre-wrap. Temiz ve zarif. Çifti destekleyen en düşük IE sürümü 8'dir.

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

Not: CSS3 yaygınlaşana kadar, muhtemelen ilk ve / veya sondaki beyaz boşlukları manuel olarak kesmeniz gerekecektir.

JQuery nesnesini bir değişkende depolarsanız, bunu yapabilirsiniz:

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>

Tercih ederseniz, jQuery.text () 'in yaptığı gibi, bunu basit bir çağrı ile yapacak bir işlev de oluşturabilirsiniz:

$.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>

İşte kullandığım şey:

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"));

Alternatif olarak, kullanmayı deneyin .htmlve sonra sarın ile <pre>etiketleri:

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

Her bir oluşumunu ile htmlyerine kullanabilir textve değiştirebilirsiniz . Yine de metninizden doğru bir şekilde kaçmanız gerekecek.\n<br>

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

someElemYerine doğrudan elemanla çalışmayı öneririm..html() değiştirmeler dize içindeki diğer HTML etiketlerinin yerini alacağından .

İşte benim fonksiyonum:

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;
}

Şununla arayın:

someElem = nl2br(someElem);

Bunu dene:

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

CSS beyaz boşluk özelliğini kullanmak muhtemelen en iyi çözümdür. Gördüğünüz fazladan dolgunun kaynağını belirlemek için Firebug veya Chrome Geliştirici Araçlarını kullanın.