javascript - linea - jQuery convertir saltos de línea a br(nl2br equivalente)

salto de linea html

Question

Estoy pidiendo a jQuery que tome un contenido de texto y lo inserte en un li.

Quiero que retenga visualmente los saltos de línea.

Debe haber una manera realmente simple de hacer esto ...

Answer 1

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

• http://phpjs.org/functions/nl2br:480

Answer 2

Coloque esto en su código (preferentemente en una biblioteca de funciones js generales):

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

Uso:

var myString = "test/ntest2";

myString.nl2br();

crear una función de prototipo de cadena le permite usar esto en cualquier cadena.

Answer 3

En el espíritu de cambiar la representación en lugar de cambiar el contenido , el siguiente CSS hace que cada nueva línea se comporte como una <br> :

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

Por qué dos reglas: pre-line solo afecta a las líneas nuevas (gracias por la pista, @KevinPauli). IE6-7 y otros navegadores antiguos recurren al pre más extremo, que también incluye nowrap y renderiza múltiples espacios. Detalles sobre estos y otros ajustes ( pre-wrap ) en mozilla y css-tricks (gracias @Sablefoste).

Aunque generalmente soy contrario a la predilección de SO por cuestionar la pregunta en lugar de responderla, en este caso reemplazar las nuevas líneas con el marcado de la marca puede aumentar la vulnerabilidad al ataque de inyección con la entrada del usuario sin lavar. Está cruzando una línea roja brillante cada vez que se encuentra cambiando las llamadas .text() a .html() que la pregunta literal implica tendría que hacerse. (Gracias @AlexS por resaltar este punto.) Incluso si descarta un riesgo de seguridad en el momento, los cambios futuros podrían introducirlo involuntariamente. En cambio, este CSS le permite obtener saltos de línea duros sin marcado utilizando el .text() más seguro.

Answer 4

Otra forma de insertar texto desde un área de texto en el DOM manteniendo los saltos de línea es usar la propiedad Node.innerText que representa el contenido de texto representado de un nodo y sus descendientes.

Como getter, se aproxima al texto que obtendría el usuario si resaltara el contenido del elemento con el cursor y luego lo copiara en el portapapeles.

La propiedad se convirtió en estándar en 2016 y cuenta con el respaldo de navegadores modernos. ¿Puedo usar : 97% de cobertura global cuando publiqué esta respuesta?

Answer 5

Solución

Usa este código

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

Answer 6

para mejorar la respuesta aceptada de @Luca Filosofi,

si es necesario, cambiar la cláusula de inicio de esta expresión regular para que sea /([^>[/s]?/r/n]?) también afectará los casos en que la nueva línea aparece después de una etiqueta Y algunos espacios en blanco, en lugar de solo una etiqueta seguido inmediatamente por una nueva línea

Answer 7

puedes simplemente hacer:

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