jQuery text () y nuevas líneas

Quiero poder decir

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

y se renderiza con nuevas líneas en el navegador. La única solución que he encontrado es establecer la propiedad css 'espacio en blanco' en 'pre' en someElem. Esto casi funciona, pero luego tengo un relleno molestamente grande entre el texto y la parte superior de someElem, incluso cuando configuro el relleno en 0. ¿Hay alguna manera de deshacerme de esto?

Es el año 2015. La respuesta correcta a esta pregunta en este momento es usar CSS white-space: pre-lineo white-space: pre-wrap. Limpio y elegante. La versión más baja de IE que admite el par es 8.

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

PD Hasta que CSS3 se vuelva común , probablemente necesitará recortar manualmente los espacios en blanco iniciales y / o finales.

Si almacena el objeto jQuery en una variable, puede hacer esto:

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 lo prefiere, también puede crear una función para hacer esto con una simple llamada, como lo hace 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>

Esto es lo que 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"));

Alternativamente, intente usar .htmly luego envuelva con <pre>etiquetas:

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

Puede usar en htmllugar de texty reemplazar cada aparición de \ncon <br>. Sin embargo, tendrá que escapar correctamente de su texto.

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

Sugeriría trabajar con el someElemelemento directamente, ya que los reemplazos con .html()reemplazarían también otras etiquetas HTML dentro de la cadena.

Aquí está mi función:

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

Llámalo por:

someElem = nl2br(someElem);

Prueba esto:

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

Usar la propiedad de espacio en blanco de CSS es probablemente la mejor solución. Utilice Firebug o Chrome Developer Tools para identificar la fuente del relleno adicional que estaba viendo.