jQuery text () e newline

Voglio poterlo dire

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

ed esegue il rendering con le nuove righe nel browser. L'unica soluzione alternativa che ho trovato è impostare la proprietà CSS "white-space" su "pre" su someElem. Questo quasi funziona, ma poi ho una spaziatura fastidiosamente grande tra il testo e la parte superiore di someElem, anche quando ho impostato la spaziatura a 0. C'è un modo per sbarazzarsene?

È l'anno 2015. La risposta corretta a questa domanda a questo punto è usare CSS white-space: pre-lineo white-space: pre-wrap. Pulito ed elegante. La versione più bassa di IE che supporta la coppia è 8.

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

PS Fino a quando CSS3 non diventerà comune , probabilmente dovrai tagliare manualmente gli spazi bianchi iniziali e / o finali.

Se memorizzi l'oggetto jQuery in una variabile puoi farlo:

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>

Se preferisci, puoi anche creare una funzione per farlo con una semplice chiamata, proprio come fa 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>

Ecco cosa uso:

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

In alternativa, provare a utilizzare .htmle poi avvolgere con <pre>tag:

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

È possibile utilizzare htmlinvece di texte sostituire ogni occorrenza di \ncon <br>. Tuttavia, dovrai eseguire correttamente l'escape del testo.

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

Suggerirei di lavorare someElemdirettamente con l' elemento, poiché le sostituzioni con .html()sostituirebbero anche altri tag HTML all'interno della stringa.

Ecco la mia funzione:

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;
}

Chiamalo da:

someElem = nl2br(someElem);

Prova questo:

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

L'uso della proprietà CSS white-space è probabilmente la soluzione migliore. Utilizza Firebug o Strumenti per sviluppatori di Chrome per identificare la fonte del riempimento aggiuntivo che stavi vedendo.