Usando una nueva línea (\ n) en una cadena y renderizando lo mismo en HTML

87

Tengo una cuerda que dice

string display_txt = "1st line text" +"\n" + "2nd line text";

en Jquery, estoy tratando de usar 

('#somediv').html(display_txt).css("color", "green")

Claramente, espero que mi mensaje se muestre en 2 líneas, pero en cambio \ n se muestra en el mensaje. ¿Alguna solución rápida para eso?

Gracias,

jquery html string newline KeenUser
fuente
1
Bastante claro, la respuesta está en su pregunta, está tratando de representar el mensaje de error en div como html, por lo que puede usar la <br />etiqueta
Murtaza
No hay nada "bastante claro" en esperar dos líneas. Por el contrario, está bastante claro que la nueva línea se representará como un espacio sin formato, solo envolviendo la línea si es necesario. Así es como funciona HTML, por supuesto, también es como .htmlfunciona.
2
Solo quise decir con el contexto donde he almacenado mi cadena como "texto de primera línea" y "texto de segunda línea", estaba claro que los quiero en 2 líneas, no con respecto a cómo funciona html :) gracias.
KeenUser
relacionado: stackoverflow.com/questions/9726970/…
frederj

Respuestas:

79

Usar <br />para una nueva línea en html:

display_txt = display_txt.replace(/\n/g, "<br />");
Samich
fuente
1
por alguna razón, tengo que escapar del "\ n" como "\\ n" o de lo contrario no funciona. (probado en Chrome 46). ¿Alguna razón por la que?
Sujay Phadke
2
Tenga en cuenta que esto solo reemplazará la primera aparición del \ncarácter dentro de la cadena. Consulte la documentación de MDN
Dominic Boulanger
3
lo mejor .replace(/\n/g, "<br />")es evitar más nuevas líneas.
KingRider
2
Creo que la respuesta de @vsync debería ser la aceptada.
Ayush Kumar
Funcionó perfectamente. Gracias.
Joshlsullivan
174

Configure su CSS en la celda de la tabla para

white-space:pre-wrap;


document.body.innerHTML = 'First line\nSecond line\nThird line';
body{ white-space:pre-wrap; }
Expandir fragmento

vsync
fuente
6
entonces, ¿no se supone que esta es la respuesta aceptada? LE: Veo que esto solo es compatible con el enlace
gciochina
4
Esta respuesta es mucho mejor que configurar innerHTML, porque no causa una vulnerabilidad XSS.
LinusK
4
Además, puede utilizar las white-space:pre-line;secuencias de espacios en blanco que se colapsarán en un solo espacio en blanco. El texto se ajustará cuando sea necesario y en saltos de línea. Más información en: https://www.w3schools.com/cssref/pr_text_white-space.asp
HakuteiJ
Esta respuesta no convierte \ n dentro del texto a una nueva línea
irl_irl
2
@ste_irl - ¿qué quieres decir? los \nmedios una nueva línea deben ser impresos y no hace lo imprimen
VSYNC
6

Puede usar una etiqueta previa en lugar de un div. Esto mostrará automáticamente sus \ n de la manera correcta.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
         var display_txt = "1st line text" +"\n" + "2nd line text";
         $('#somediv').html(display_txt).css("color", "green");
});
</script>
</head>
<body>

<pre>
<p id="somediv"></p>
</pre>

</body>
</html>
Frank im Wald
fuente
1

¿Quizás en .textlugar de .html?


fuente
0

Tuve el siguiente problema en el que estaba obteniendo datos de una base de datos y quería mostrar una cadena que contenía \n. Ninguna de las soluciones anteriores funcionó para mí y finalmente se me ocurrió una solución: https://stackoverflow.com/a/61484190/7251208

Kevin H. Griffith
fuente