Tengo jQuery tomar un contenido de texto e insertarlo en un li.jQuery convertir saltos de línea a br (equivalente a nl2br)
Quiero que retenga visualmente los saltos de línea.
Tiene que haber una manera muy sencilla de hacer esto ...
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');
}
Gracias, esto funciona perfectamente. Es extraño que esta no sea una función oficial de jQuery. – gbhall
¡porque jQuery no está destinado a reemplazar la función nativa de javascript como replace, sino que se centra en el encadenamiento de selector de CSS y el fácil acceso! tal vez en la versión futura ;-) –
Impresionante. Me ayudó a superar el problema con IE7 no es compatible con el espacio en blanco: pre-wrap –
puede simplemente hacer:
textAreaContent=textAreaContent.replace(/\n/g,"<br>");
Saludos, este tipo de funcionó, excepto que trataría varios saltos de línea como un salto de línea único. – gbhall
Lo he actualizado y ahora usa una expresión regular así que si quieres tratar múltiples saltos de línea como un solo br cambia la expresión regular con:/\ n +/g – mck89
Gracias. Esperemos que alguien encuentre útil su respuesta, pero la siguiente función también funciona. Me siento un poco mal de que estés haciendo más esfuerzos, pero una función es más deseable. – gbhall
poner esto en su código (preferiblemente en una biblioteca general funciones JS):
String.prototype.nl2br = function()
{
return this.replace(/\n/g, "<br />");
}
Uso:
var myString = "test\ntest2";
myString.nl2br();
la creación de un prototipo de la función cadena que permite para usar esto en cualquier cadena.
Me pregunto si esto funciona? – jackkorbin
Sí, esto funciona bien para mí. Solución muy simple –
¡Esto es asombroso! –
Solución
Usar este código
jQuery.nl2br = function(varTest){
return varTest.replace(/(\r\n|\n\r|\r|\n)/g, "<br>");
};
En el espíritu de cambiar el representación lugar de cambiar el contenido, el siguiente CSS hace que cada uno se comporte de nueva línea como un <br>:
white-space: pre;
white-space: pre-line;
Por qué dos reglas: pre-line solo afecta a las nuevas líneas (gracias por la pista, @KevinPauli). IE6-7 y otros navegadores antiguos se remontan al extremo pre que también incluye nowrap y rinde múltiples espacios. Detalles sobre estas y otras configuraciones (pre-wrap) en mozilla y css-tricks (gracias @Sablefoste).
Aunque generalmente soy contrario al S.O. predilección por second-guessing the question en lugar de contestarla, en este caso reemplazar las líneas nuevas con <br> marcado puede aumentar la vulnerabilidad a ataque de inyección con entrada de usuario sin lavar. Está cruzando una línea roja brillante cada vez que se encuentre cambiando las llamadas .text() al .html(), lo que implica la pregunta literal que debería 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.
Dependiendo del caso, esta es la solución más simple y realmente responde mejor a la pregunta. También puede considerar cualquiera de las otras opciones de 'espacio en blanco:', como 'pre-wrap'. Ver https://css-tricks.com/almanac/properties/w/whitespace/ – Sablefoste
Esta es realmente la mejor respuesta: las soluciones de reemplazo de cadenas significarían la necesidad de usar '.html()' para establecer el contenido, que a su vez permitiría al usuario insertar HTML arbitrario a menos que lo filtre por adelantado. –
Buen punto sobre '.html() 'danger @AlexS, intentado incorporar. –
para mejorar la respuesta aceptada de @Luca Filosofi,
si es necesario, cambiar la cláusula que comienza de esta expresión regular para ser /([^>[\s]?\r\n]?) También habrá ingore los casos en que la nueva línea se produce después de una etiqueta y un poco de espacio en blanco, en lugar de una etiqueta inmediatamente seguido por un salto de línea
Otra forma de insertar texto desde un área de texto en el DOM de mantenimiento de los saltos de línea es el uso de la propiedad Node.innerText que representa el contenido de texto prestados de un nodo y sus descendientes.
Como getter, se aproxima al texto que el usuario obtendría 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 los navegadores modernos. Can I Use: cobertura global del 97% cuando publiqué esta respuesta.
Nota de XSS: parece que está mezclando directamente la entrada de usuario y
, lo que significa que está mostrando líneas nuevas o
, y por lo tanto * puede * estar abierto al ataque XSS, que es si su entrada proviene de cualquier otro usuario en el sitio. – user420667