jQuery convertit les sauts de ligne en br (équivalent nl2br)

Je demande à jQuery de prendre du contenu textarea et de l'insérer dans un li.

Je veux qu'il conserve visuellement les sauts de ligne.

Il doit y avoir un moyen très simple de faire cela ...

démo: 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

vous pouvez simplement faire:

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

Mettez ceci dans votre code (de préférence dans une bibliothèque de fonctions js générale):

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

Usage:

var myString = "test\ntest2";

myString.nl2br();

la création d'une fonction prototype de chaîne vous permet de l'utiliser sur n'importe quelle chaîne.

Dans l'esprit de changer le rendu au lieu de changer le contenu , le CSS suivant fait que chaque nouvelle ligne se comporte comme un<br> :

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

Pourquoi deux règles: pre-linen'affecte que les nouvelles lignes (merci pour l'indice, @KevinPauli). IE6-7 et d'autres anciens navigateurs reviennent au plus extrême prequi inclut nowrapet rend également plusieurs espaces. Détails sur ces paramètres et d'autres ( pre-wrap) sur mozilla et css-tricks (merci @Sablefoste).

Bien que je sois généralement opposé à la prédilection SO pour remettre en question la question plutôt que d'y répondre, dans ce cas, le remplacement des nouvelles lignes par du <br>balisage peut augmenter la vulnérabilité aux attaques par injection avec une entrée utilisateur non lavée. Vous franchissez une ligne rouge vif chaque fois que vous vous trouvez en train de changer d' .text()appels .html()auxquels la question littérale implique qu'il faudrait faire. (Merci @AlexS d'avoir souligné ce point.) Même si vous excluez un risque de sécurité à ce moment-là, des changements futurs pourraient l'introduire involontairement. Au lieu de cela, ce CSS vous permet d'obtenir des sauts de ligne durs sans balisage en utilisant le plus sûr .text().

Solution

Utilisez ce code

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

Cette fonction JavaScript considère s'il faut utiliser l'insertion ou le remplacement pour gérer le swap.

(Insérer ou remplacer des sauts de ligne 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);
}

Démo - JSFiddle

Fonctions JavaScript nl2br et br2nl

J'ai écrit une petite extension jQuery pour cela:

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

pour améliorer la réponse acceptée de @Luca Filosofi,

si nécessaire, changer la clause de début de cette expression rationnelle en /([^>[\s]?\r\n]?)sera également intégrer les cas où le retour à la ligne vient après une balise ET des espaces, au lieu d'une simple balise immédiatement suivie d'une nouvelle ligne

Une autre façon d'insérer du texte à partir d'une zone de texte dans le DOM en conservant les sauts de ligne consiste à utiliser la propriété Node.innerText qui représente le contenu du texte rendu d'un nœud et de ses descendants.

En tant que getter, il se rapproche du texte que l'utilisateur obtiendrait s'il mettait en évidence le contenu de l'élément avec le curseur, puis copié dans le presse-papiers.

La propriété est devenue la norme en 2016 et est bien prise en charge par les navigateurs modernes. Puis-je utiliser : une couverture mondiale de 97% lorsque j'ai publié cette réponse.