jQuery text () และขึ้นบรรทัดใหม่

อยากได้ทักมา

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

และแสดงผลด้วยบรรทัดใหม่ในเบราว์เซอร์ วิธีแก้ปัญหาเดียวที่ฉันพบคือการตั้งค่าคุณสมบัติ css 'white-space' เป็น 'pre' บน someElem เกือบจะได้ผล แต่ฉันก็มีช่องว่างระหว่างข้อความกับด้านบนของ someElem ขนาดใหญ่จนน่ารำคาญแม้ว่าฉันจะตั้งค่าช่องว่างภายในเป็น 0 มีวิธีกำจัดสิ่งนี้หรือไม่?

เป็นปี 2015 คำตอบที่ถูกต้องสำหรับคำถามนี้ ณ จุดนี้คือการใช้ CSS white-space: pre-lineหรือwhite-space: pre-wrap. สะอาดและสง่างาม IE เวอร์ชันต่ำสุดที่รองรับทั้งคู่คือ 8

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

PS จนกว่า CSS3 จะกลายเป็นเรื่องปกติคุณอาจต้องตัดค่าเริ่มต้นและ / หรือการเว้นวรรคสีขาวต่อท้ายด้วยตนเอง

หากคุณเก็บออบเจ็กต์ jQuery ไว้ในตัวแปรคุณสามารถทำได้:

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>

หากคุณต้องการคุณยังสามารถสร้างฟังก์ชั่นเพื่อทำสิ่งนี้ด้วยการโทรธรรมดาเช่นเดียวกับที่ 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>

นี่คือสิ่งที่ฉันใช้:

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

อีกทางเลือกหนึ่งให้ลองใช้.htmlแล้วห่อด้วย<pre>แท็ก:

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

คุณสามารถใช้ htmlแทนtextและแทนที่แต่ละเกิดกับ\n <br>คุณจะต้องหลีกเลี่ยงข้อความของคุณให้ถูกต้อง

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

ฉันขอแนะนำให้ทำงานกับsomeElemองค์ประกอบโดยตรงเนื่องจากการแทนที่ด้วย.html()จะแทนที่แท็ก HTML อื่น ๆ ภายในสตริงด้วย

นี่คือหน้าที่ของฉัน:

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

เรียกโดย:

someElem = nl2br(someElem);

ลองสิ่งนี้:

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

การใช้คุณสมบัติ CSS white-space น่าจะเป็นทางออกที่ดีที่สุด ใช้ Firebug หรือเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome เพื่อระบุแหล่งที่มาของการขยายเพิ่มเติมที่คุณเห็น