jQuery converter quebras de linha para br (equivalente em nl2br)

Estou fazendo jQuery pegar algum conteúdo textarea e inseri-lo em um li.

Quero reter visualmente as quebras de linha.

Deve haver uma maneira realmente simples de fazer isso ...

demonstração: 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

você pode simplesmente fazer:

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

Coloque isso em seu código (de preferência em uma biblioteca de funções js geral):

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

Uso:

var myString = "test\ntest2";

myString.nl2br();

criar uma função de protótipo de string permite que você use isso em qualquer string.

No espírito de alterar a renderização em vez de alterar o conteúdo , o seguinte CSS faz com que cada nova linha se comporte como um<br> :

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

Por que duas regras: pre-lineafeta apenas novas linhas (obrigado pela dica, @KevinPauli). O IE6-7 e outros navegadores antigos voltam ao mais extremo, preque também inclui nowrape renderiza vários espaços. Detalhes sobre essas e outras configurações ( pre-wrap) em mozilla e css-tricks (obrigado @Sablefoste).

Embora eu geralmente seja avesso à predileção do SO por adivinhar a questão em vez de respondê-la, neste caso substituindo novas linhas por<br> marcação pode aumentar a vulnerabilidade a ataques de injeção com entrada de usuário não lavada. Você está cruzando uma linha vermelha brilhante sempre que está mudando as .text()ligações .html()que a pergunta literal implica que teriam que ser feitas. (Obrigado @AlexS por destacar este ponto.) Mesmo se você descartar um risco de segurança no momento, alterações futuras podem introduzi-lo inadvertidamente. Em vez disso, este CSS permite que você obtenha quebras de linha rígidas sem marcação usando o mais seguro .text().

Solução

Use este código

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

Esta função JavaScript considera se deve usar inserir ou substituir para lidar com a troca.

(Insira ou substitua quebras de linha 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

Funções JavaScript nl2br e br2nl

Eu escrevi uma pequena extensão jQuery para isso:

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

para melhorar a resposta aceita de @Luca Filosofi,

se necessário, alterar a cláusula inicial desta regex para ser /([^>[\s]?\r\n]?)também ingore os casos em que a nova linha vem após uma tag E alguns espaços em branco, em vez de apenas uma tag imediatamente seguida por uma nova linha

Outra maneira de inserir texto de uma área de texto no DOM mantendo as quebras de linha é usar a propriedade Node.innerText que representa o conteúdo de texto renderizado de um nó e seus descendentes.

Como getter, ele se aproxima do texto que o usuário obteria se destacasse o conteúdo do elemento com o cursor e, em seguida, copiasse para a área de transferência.

A propriedade se tornou padrão em 2016 e é bem suportada por navegadores modernos. Posso usar : cobertura global de 97% quando postei esta resposta.