web-dev-qa-db-fra.com

jQuery text () et newlines

Je veux pouvoir dire 

$(someElem).text('this\n has\n newlines);

et il rend avec les nouvelles lignes dans le navigateur. La seule solution que j'ai trouvée consiste à définir la propriété css 'white-space' sur 'pre' sur someElem. Cela fonctionne presque, mais j'ai un rembourrage ennuyeux entre le texte et le sommet de someElem, même lorsque je mets 0 à 0. Y a-t-il un moyen de s'en débarrasser?

javascriptjqueryhtml
99
Joe Armstrong

Nous sommes en 2015. La bonne réponse à cette question est d'utiliser CSS white-space: pre-line ou white-space: pre-wrap. Propre et élégant. La version la plus basse de IE prenant en charge la paire est la version 8.

https://css-tricks.com/almanac/properties/w/whitespace/

P.S. Jusqu'à ce que CSS3 devienne commun vous aurez probablement besoin de supprimer manuellement les espaces blancs initiaux et/ou de fin.

113
cleong

Si vous stockez l'objet jQuery dans une variable, vous pouvez le faire:

var obj = $("#example").text('this\n has\n newlines');
obj.html(obj.html().replace(/\n/g,'<br/>'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="example"></p>

Si vous préférez, vous pouvez également créer une fonction pour le faire avec un simple appel, comme le fait jQuery.text ():

$.fn.multiline = function(text){
    this.text(text);
    this.html(this.html().replace(/\n/g,'<br/>'));
    return this;
}

// Now you can do this:
$("#example").multiline('this\n has\n newlines');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="example"></p>

49
José Roberto Araújo Júnior

Voici ce que j'utilise:

function htmlForTextWithEmbeddedNewlines(text) {
    var htmls = [];
    var lines = text.split(/\n/);
    // The temporary <div/> is to perform HTML entity encoding reliably.
    //
    // document.createElement() is *much* faster than jQuery('<div></div>')
    // http://stackoverflow.com/questions/268490/
    //
    // You don't need jQuery but then you need to struggle with browser
    // differences in innerText/textContent yourself
    var tmpDiv = jQuery(document.createElement('div'));
    for (var i = 0 ; i < lines.length ; i++) {
        htmls.Push(tmpDiv.text(lines[i]).html());
    }
    return htmls.join("<br>");
}
jQuery('#div').html(htmlForTextWithEmbeddedNewlines("hello\nworld"));
36
Peter V. Mørch

Vous pouvez également utiliser les balises .html, puis wrap with <pre>:

$(someElem).html('this\n has\n newlines').wrap('<pre />');
18
karim79

Vous pouvez utiliser html au lieu de text et remplacer chaque occurrence de \n par <br>. Vous devrez cependant échapper correctement à votre texte.

x = x.replace(/&/g, '&amp;')
     .replace(/>/g, '&gt;')
     .replace(/</g, '&lt;')
     .replace(/\n/g, '<br>');
11
Mark Byers

Je suggérerais de travailler directement avec l'élément someElem, car les remplacements avec .html() remplaceraient également d'autres balises HTML dans la chaîne.

Voici ma fonction:

function nl2br(el) {
  var lines = $(el).text().split(/\n/);
  $(el).empty();
  for (var i = 0 ; i < lines.length ; i++) {
    if (i > 0) $(el).append('<br>');
    $(el).append(document.createTextNode(lines[i]));
  }
  return el;
}

Appelez le par:

someElem = nl2br(someElem);
1
JochenJung

Essaye ça:

$(someElem).html('this<br> has<br> newlines);
0
daCoda

L'utilisation de la propriété CSS white-space est probablement la meilleure solution. Utilisez les outils de développement Firebug ou Chrome pour identifier la source du remplissage supplémentaire affiché.

0
Andrew B.