jQuery satır sonlarını br'ye dönüştür (nl2br eşdeğeri)

JQuery'nin bazı metin alanı içeriğini almasını ve bir li.

Satır sonlarını görsel olarak korumasını istiyorum.

Bunu yapmanın gerçekten çok basit bir yolu olmalı ...

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

basitçe yapabilirsiniz:

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

Bunu kodunuza koyun (tercihen genel bir js işlevleri kitaplığına):

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

Kullanımı:

var myString = "test\ntest2";

myString.nl2br();

bir dizi prototip işlevi oluşturmak, bunu herhangi bir dizede kullanmanıza izin verir.

İçeriği değiştirmek yerine oluşturmayı değiştirme ruhuyla , aşağıdaki CSS her yeni satırın a gibi davranmasını sağlar :<br>

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

Neden iki kural: pre-lineyalnızca satır başlarını etkiler (ipucu için teşekkürler, @KevinPauli). IE6-7 ve diğer eski tarayıcılar, preaynı zamanda nowrapbirden çok alan içeren ve işleyen daha uç noktalara geri dönüyor . Bunlar ve diğer ayarlarla ilgili ayrıntılar ( pre-wrap) mozilla ve css- tricks'te (teşekkürler @Sablefoste).

Genelde soruyu cevaplamak yerine ikinci tahmin için SO tercihine karşı olsam da, bu durumda yeni satırları <br>işaretlemeyle değiştirmek , yıkanmamış kullanıcı girdisiyle enjeksiyon saldırısına karşı savunmasızlığı artırabilir . Kendinizi , kelimenin tam anlamıyla sorunun yapılması gerektiği anlamına gelen .text()çağrıları değiştirirken bulduğunuzda parlak kırmızı bir çizgiyi geçiyorsunuz .html(). (Bu noktayı vurguladığınız için teşekkürler @AlexS.) O anda bir güvenlik riskini göz ardı etseniz bile, gelecekteki değişiklikler farkında olmadan riski ortaya çıkarabilir. Bunun yerine, bu CSS, daha güvenli olanı kullanarak işaretleme yapmadan kesin satır sonları almanıza olanak tanır .text().

Çözüm

Bu kodu kullanın

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

Bu JavaScript işlevi, takasın işlenmesi için ekle veya değiştir'in kullanılıp kullanılmayacağını değerlendirir.

(HTML satır sonlarını ekleyin veya değiştirin)

/**
 * 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

JavaScript nl2br ve br2nl işlevleri

Bunun için küçük bir jQuery uzantısı yazdım:

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

@Luca Filosofi'nin kabul ettiği cevabı geliştirmek için,

gerekirse, bu normal ifadenin başlangıç ​​cümlesini olarak değiştirmek, /([^>[\s]?\r\n]?)sadece bir etiketin hemen ardından bir satırsonu izlemesi yerine, yeni satırın bir etiketten VE biraz boşluktan sonra geldiği durumları da içerecektir.

Satır sonlarını koruyarak DOM'daki bir metin alanından metin eklemenin başka bir yolu , bir düğümün ve onun neslinin oluşturulmuş metin içeriğini temsil eden Node.innerText özelliğini kullanmaktır .

Alıcı olarak, öğenin içeriğini imleçle vurgulayıp panoya kopyalarsa kullanıcının alacağı metne yaklaşır.

Tesis 2016 yılında standart hale geldi ve modern tarayıcılar tarafından iyi destekleniyor. Kullanabilir miyim : Bu cevabı gönderdiğimde% 97 küresel kapsam.