jQuery text() et les nouvelles lignes

Question

Je veux pouvoir dire

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

et il est rendu avec des nouvelles lignes dans le navigateur. La seule solution que j'ai trouvée est de définir la propriété css 'white-space' à 'pre' sur someElem. Cela fonctionne presque, mais j'ai alors un large padding entre le texte et le haut de someElem, même lorsque je règle le padding sur 0. Y a-t-il un moyen de s'en débarrasser ?

Answer 1

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

var obj = $(someElem).text('this\n has\n newlines');
obj.html(obj.html().replace(/\n/g,'<br/>'));

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

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

Maintenant, vous pouvez le faire :

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

Answer 2

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"));

Answer 3

Vous pouvez également essayer d'utiliser .html et ensuite envelopper avec <pre> tags :

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

Answer 4

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

x = x.replace(/&/g, '&')
     .replace(/>/g, '>')
     .replace(/</g, '&lt;')
     .replace(/\n/g, '<br>');

Answer 5

Je vous suggère de travailler avec le someElem directement, en remplacement de l'élément .html() remplacerait également les autres balises HTML de 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);