jQuery text () và dòng mới

Tôi muốn có thể nói

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

và nó hiển thị với các dòng mới trong trình duyệt. Cách giải quyết duy nhất mà tôi đã tìm thấy là đặt thuộc tính css 'white-space' thành 'pre' trên someElem. Điều này gần như hoạt động, nhưng sau đó tôi có một khoảng đệm lớn gây khó chịu giữa văn bản và phần trên cùng của someElem, ngay cả khi tôi đặt đệm thành 0. Có cách nào để loại bỏ điều này không?

Đó là năm 2015. Câu trả lời chính xác cho câu hỏi này vào thời điểm này là sử dụng CSS white-space: pre-linehoặc white-space: pre-wrap. Sạch sẽ và thanh lịch. Phiên bản thấp nhất của IE hỗ trợ cặp này là 8.

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

PS Cho đến khi CSS3 trở nên phổ biến, bạn có thể cần phải cắt bỏ các khoảng trắng đầu và / hoặc cuối theo cách thủ công.

Nếu bạn lưu trữ đối tượng jQuery trong một biến, bạn có thể thực hiện việc này:

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>

Nếu muốn, bạn cũng có thể tạo một hàm để thực hiện việc này bằng một lệnh gọi đơn giản, giống như jQuery.text () làm:

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

Đây là những gì tôi sử dụng:

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

Ngoài ra, hãy thử sử dụng .htmlvà sau đó bọc bằng <pre>các thẻ:

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

Bạn có thể sử dụng htmlthay thế textvà thay thế mỗi lần xuất hiện của \nvới <br>. Tuy nhiên, bạn sẽ phải thoát chính xác văn bản của mình.

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

Tôi khuyên bạn nên làm việc someElemtrực tiếp với phần tử, vì các thay thế bằng .html()cũng sẽ thay thế các thẻ HTML khác trong chuỗi.

Đây là chức năng của tôi:

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

Gọi nó bằng:

someElem = nl2br(someElem);

Thử cái này:

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

Sử dụng thuộc tính khoảng trắng CSS có lẽ là giải pháp tốt nhất. Sử dụng Firebug hoặc Công cụ dành cho nhà phát triển Chrome để xác định nguồn gốc của phần đệm bổ sung mà bạn đang thấy.