web-dev-qa-db-fra.com

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

JQuery prend du contenu textarea et l'insère 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 ...

javascriptjqueryline-breaks
99
gbhall

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');
}
154
Luca Filosofi

vous pouvez simplement faire:

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

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

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

Usage:

var myString = "test\ntest2";

myString.nl2br();

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

27
jnl

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

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

Pourquoi deux règles: pre-line n'affecte que les nouvelles lignes (merci pour l'indice, @KevinPauli). IE6-7 et d’autres anciens navigateurs retombent à la plus extrême pre qui inclut également nowrap et restitue plusieurs espaces. Détails sur ceux-ci et d'autres paramètres (pre-wrap) sur mozilla et css-tricks (merci @Sablefoste).

Bien que je suis généralement opposé à la S.O. la prédilection pour deviner la question plutôt que d'y répondre, dans ce cas remplacer les nouvelles lignes par le balisage <br> peut accroître la vulnérabilité de l'attaque injection avec des entrées non lavées. Vous franchissez une ligne rouge vif chaque fois que vous vous trouvez en train de changer les appels .text() en .html(), ce que la question littérale implique de faire. (Merci à @AlexS pour avoir souligné ce point.) Même si vous excluez un risque pour la sécurité à ce moment-là, des modifications futures pourraient l'introduire involontairement. Au lieu de cela, ce CSS vous permet d’obtenir des sauts de ligne difficiles sans balise à l’aide de la .text() plus sûre.

20
Bob Stein

Solution

Utilisez ce code

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

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]?) introduira également les cas où la nouvelle ligne vient après une balise ET des espaces, au lieu d'une balise immédiatement suivie d'une nouvelle ligne

0
phlare

Une autre façon d'insérer du texte 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 textuel rendu d'un noeud et de ses descendants.

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

La propriété est devenue standard en 2016 et est bien pris en charge par les navigateurs modernes. Puis-je utiliser : Couverture mondiale de 97% lorsque j'ai posté cette réponse.

0
Volo

Cette fonction JavaScript détermine s'il faut utiliser insérer ou remplacer pour gérer l'échange. 

(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 & br2nl

0
Nick Tsai