jQuery mengubah jeda baris ke br (setara nl2br)

Saya meminta jQuery mengambil beberapa konten textarea dan memasukkannya ke dalam li.

Saya ingin secara visual mempertahankan jeda baris.

Pasti ada cara yang sangat sederhana untuk melakukan ini ...

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

Anda cukup melakukan:

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

Letakkan ini di kode Anda (sebaiknya di pustaka fungsi js umum):

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

Pemakaian:

var myString = "test\ntest2";

myString.nl2br();

membuat fungsi prototipe string memungkinkan Anda menggunakan ini pada string apa pun.

Dengan semangat mengubah rendering daripada mengubah konten , CSS berikut membuat setiap baris baru berperilaku seperti<br> :

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

Mengapa dua aturan: pre-linehanya memengaruhi baris baru (terima kasih atas petunjuknya, @KevinPauli). IE6-7 dan browser lama lainnya kembali ke yang lebih ekstrim preyang juga menyertakan nowrapdan membuat banyak spasi. Detail tentang ini dan pengaturan lainnya ( pre-wrap) di mozilla dan css-trick (terima kasih @Sablefoste).

Meskipun saya umumnya tidak menyukai kecenderungan SO untuk menebak-nebak pertanyaan daripada menjawabnya, dalam hal ini mengganti baris baru dengan <br>markup dapat meningkatkan kerentanan terhadap serangan injeksi dengan input pengguna yang tidak dicuci. Anda melewati garis merah terang setiap kali Anda mengubah .text()panggilan .html()yang menurut pertanyaan literal harus diselesaikan. (Terima kasih @AlexS untuk menyoroti poin ini.) Meskipun Anda mengesampingkan risiko keamanan pada saat itu, perubahan di masa mendatang dapat tanpa disadari. Sebaliknya, CSS ini memungkinkan Anda untuk mendapatkan jeda baris tanpa markup menggunakan yang lebih aman .text().

Larutan

Gunakan kode ini

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

Fungsi JavaScript ini mempertimbangkan apakah akan menggunakan insert atau replace untuk menangani swap.

(Sisipkan atau ganti jeda baris 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

Fungsi JavaScript nl2br & br2nl

Saya menulis sedikit ekstensi jQuery untuk ini:

$.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);
};

untuk memperbaiki jawaban yang diterima @Luca Filosofi,

jika diperlukan, mengubah klausa awal regex ini menjadi /([^>[\s]?\r\n]?)juga akan memasukkan kasus di mana baris baru muncul setelah tag DAN beberapa spasi, bukan hanya tag yang langsung diikuti oleh baris baru

Cara lain untuk menyisipkan teks dari textarea di DOM dengan mempertahankan jeda baris adalah dengan menggunakan properti Node.innerText yang merepresentasikan konten teks yang dirender dari sebuah node dan turunannya.

Sebagai pengambil, itu mendekati teks yang akan didapat pengguna jika mereka menyorot konten elemen dengan kursor dan kemudian disalin ke clipboard.

Properti ini menjadi standar pada tahun 2016 dan didukung dengan baik oleh browser modern. Dapatkah Saya Menggunakan : 97% cakupan global ketika saya memposting jawaban ini.