jQuery converte le interruzioni di riga in br (equivalente nl2br)

Sto facendo in modo che jQuery prenda del contenuto di textarea e lo inserisca in un li.

Voglio che mantenga visivamente le interruzioni di riga.

Ci deve essere un modo molto semplice per farlo ...

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

puoi semplicemente fare:

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

Inseriscilo nel tuo codice (preferibilmente in una libreria di funzioni js generale):

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

Uso:

var myString = "test\ntest2";

myString.nl2br();

la creazione di una funzione di prototipo di stringa consente di utilizzarla su qualsiasi stringa.

Nello spirito di cambiare il rendering invece di cambiare il contenuto , il seguente CSS fa sì che ogni nuova riga si comporti come un<br> :

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

Perché due regole: pre-lineinfluisce solo sulle nuove righe (grazie per l'indizio, @KevinPauli). IE6-7 e altri vecchi browser tornano all'estremo preche include nowrape rende anche più spazi. Dettagli su queste e altre impostazioni ( pre-wrap) su mozilla e css-tricks (grazie @Sablefoste).

Anche se sono generalmente contrario alla predilezione SO per indovinare la domanda piuttosto che rispondere, in questo caso la sostituzione di nuove righe con <br>markup può aumentare la vulnerabilità agli attacchi di iniezione con input dell'utente non lavato. Stai attraversando una linea rossa brillante ogni volta che ti ritrovi a cambiare le .text()chiamate a .html()cui la domanda letterale implica che dovrebbero essere fatte. (Grazie @AlexS per aver evidenziato questo punto.) Anche se al momento escludi un rischio per la sicurezza, modifiche future potrebbero introdurlo involontariamente. Invece, questo CSS ti consente di ottenere interruzioni di riga rigide senza markup utilizzando il più sicuro .text().

Soluzione

Usa questo codice

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

Questa funzione JavaScript considera se utilizzare l'inserimento o la sostituzione per gestire lo scambio.

(Inserisci o sostituisci interruzioni di riga 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

Funzioni JavaScript nl2br e br2nl

Ho scritto una piccola estensione jQuery per questo:

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

per migliorare la risposta accettata da @Luca Filosofi,

se necessario, la modifica della clausola di inizio di questa regex in /([^>[\s]?\r\n]?)sarà anche ingerire i casi in cui la nuova riga viene dopo un tag E alcuni spazi bianchi, invece di un tag immediatamente seguito da una nuova riga

Un altro modo per inserire testo da un'area di testo nel DOM mantenendo le interruzioni di riga è utilizzare la proprietà Node.innerText che rappresenta il contenuto di testo renderizzato di un nodo e dei suoi discendenti.

Come getter, approssima il testo che l'utente otterrebbe se evidenziasse il contenuto dell'elemento con il cursore e poi lo copiasse negli appunti.

La proprietà è diventata standard nel 2016 ed è ben supportata dai browser moderni. Posso usare : copertura globale del 97% quando ho pubblicato questa risposta.