jQuery chuyển đổi ngắt dòng thành br (tương đương nl2br)

Tôi đang yêu cầu jQuery lấy một số nội dung textarea và chèn nó vào một li.

Tôi muốn nó giữ lại các ngắt dòng một cách trực quan.

Phải có một cách thực sự đơn giản để làm điều này ...

demo: http://so.devilmaycode.it/jquery-convert-line-breaks-to-br-nl2br-equivalent

function nl2br (str, is_xhtml) {   
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';    
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
}

• http://phpjs.org/functions/nl2br:480

bạn chỉ có thể làm:

textAreaContent=textAreaContent.replace(/\n/g,"<br>");

Đặt điều này vào mã của bạn (tốt nhất là trong thư viện hàm js chung):

String.prototype.nl2br = function()
{
    return this.replace(/\n/g, "<br />");
}

Sử dụng:

var myString = "test\ntest2";

myString.nl2br();

tạo một hàm nguyên mẫu chuỗi cho phép bạn sử dụng nó trên bất kỳ chuỗi nào.

Với tinh thần thay đổi kết xuất thay vì thay đổi nội dung , CSS sau đây làm cho mỗi dòng mới hoạt động như<br> sau:

white-space: pre;
white-space: pre-line;

Tại sao hai quy tắc: pre-line chỉ ảnh hưởng đến dòng mới (cảm ơn vì manh mối, @KevinPauli). IE6-7 và các trình duyệt cũ khác trở lại cực đoan hơn pre, nó cũng bao gồm nowrapvà hiển thị nhiều khoảng trắng. Thông tin chi tiết về cài đặt này và các cài đặt khác ( pre-wrap) tại mozilla và css-trick (cảm ơn @Sablefoste).

Mặc dù tôi thường không thích xu hướng SO để đoán câu hỏi thứ hai hơn là trả lời câu hỏi , trong trường hợp này, việc thay thế các dòng mới bằng <br>đánh dấu có thể làm tăng khả năng bị tấn công tiêm với đầu vào của người dùng chưa được rửa. Bạn đang vượt qua ranh giới màu đỏ tươi bất cứ khi nào bạn thấy mình thay đổi .text()các cuộc gọi .html()mà câu hỏi theo nghĩa đen ngụ ý sẽ phải được thực hiện. (Cảm ơn @AlexS đã nêu bật điểm này.) Ngay cả khi bạn loại trừ rủi ro bảo mật vào thời điểm đó, những thay đổi trong tương lai có thể vô tình giới thiệu nó. Thay vào đó, CSS này cho phép bạn ngắt dòng cứng mà không cần đánh dấu bằng cách sử dụng an toàn hơn .text().

Giải pháp

Sử dụng mã này

jQuery.nl2br = function(varTest){
  return varTest.replace(/(\r\n|\n\r|\r|\n)/g, "<br>");
};

Hàm JavaScript này xem xét việc sử dụng chèn hoặc thay thế để xử lý hoán đổi.

(Chèn hoặc thay thế ngắt dòng HTML)

/**
 * This function is same as PHP's nl2br() with default parameters.
 *
 * @param {string} str Input text
 * @param {boolean} replaceMode Use replace instead of insert
 * @param {boolean} isXhtml Use XHTML 
 * @return {string} Filtered text
 */
function nl2br (str, replaceMode, isXhtml) {

  var breakTag = (isXhtml) ? '<br />' : '<br>';
  var replaceStr = (replaceMode) ? '$1'+ breakTag : '$1'+ breakTag +'$2';
  return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, replaceStr);
}

Demo - JSFiddle

Các hàm JavaScript nl2br & br2nl

Tôi đã viết một phần mở rộng jQuery nhỏ cho điều này:

$.fn.nl2brText = function (sText) {
    var bReturnValue = 'undefined' == typeof sText;
    if(bReturnValue) {
        sText = $('<pre>').html(this.html().replace(/<br[^>]*>/i, '\n')).text();
    }
    var aElms = [];
    sText.split(/\r\n|\r|\n/).forEach(function(sSubstring) {
        if(aElms.length) {
            aElms.push(document.createElement('br'));
        }
        aElms.push(document.createTextNode(sSubstring));
    });
    var $aElms = $(aElms);
    if(bReturnValue) {
        return $aElms;
    }
    return this.empty().append($aElms);
};

để cải thiện câu trả lời được chấp nhận của @Luca Filosofi,

nếu cần, việc thay đổi mệnh đề bắt đầu của regex này thành /([^>[\s]?\r\n]?)cũng sẽ dẫn đến các trường hợp dòng mới đứng sau thẻ VÀ một số khoảng trắng, thay vì chỉ một thẻ ngay sau dòng mới

Một cách khác để chèn văn bản từ một vùng văn bản trong DOM giữ cho các ngắt dòng là sử dụng thuộc tính Node.innerText đại diện cho nội dung văn bản được hiển thị của một nút và con cháu của nó.

Là một getter, nó ước tính văn bản mà người dùng sẽ nhận được nếu họ đánh dấu nội dung của phần tử bằng con trỏ và sau đó sao chép vào khay nhớ tạm.

Thuộc tính trở thành tiêu chuẩn vào năm 2016 và được hỗ trợ tốt bởi các trình duyệt hiện đại. Tôi có thể sử dụng : 97% phạm vi toàn cầu khi tôi đăng câu trả lời này.