mostrar saltos de línea

pinchu · #1 (**permalink**) 02/11/2009, 07:19

Tengo un sistema que deja al usuario insertar un mensaje.Ese mensaje lo guardo en la base de datos pero además lo muestro en el mismo momento.Tengo problemas para mostrar los saltos de línea en el momento con js.

Cuando lo cargo desde la base de datos no hay problema pq uso nl2br.

¿Que debería de guardar los mensajes con dentro de él?

A ver si alguien me explica cómo se hace esto

zerokilled · #2 (**permalink**) 02/11/2009, 08:24

a ver si comprendo tu duda. en un documento html alguien escribe un mensaje. luego, ese mensaje se integra en el mismo documento con javascript. pero debido a que el mensaje tiene salto de linea, evidentemente el navegador los considera como espacio. entonces, lo que necesitas es algo parecido a nl2br, convertir saltos de lineas a . lo que deberias usar es expresiones regulares para detectar los saltos de lineas y reemplazarlos con o . si tienes duda sobre las expresiones regulares busca por terminos javascript expresiones regulares y una referencia sobre el metodo replace.

pinchu · #3 (**permalink**) 02/11/2009, 08:56

lo has entendido perfectamente y la idea que planteas es la buena, el problema es el caracter o caracteres que tengo que sustituir por .

zerokilled · #4 (**permalink**) 02/11/2009, 09:04

pues solo tienes que detectar saltos de lineas. en javascript los saltos de lineas de una cadena se interpretan por caracteres \n o \r.

pinchu · #5 (**permalink**) 02/11/2009, 09:28

Estoy usándolo así:

var textoConSaltosDeLinea = (document.getElementById("contenido").value).repla ce(/\n/gi," ");

y ante un texto así:

salto
de
linea

me muestra:

salto de linea 

¿Alguna idea?

zerokilled · #6 (**permalink**) 02/11/2009, 09:35

¿y cual es la duda? ¿eso no es lo que querias hacer? supongo que lo unico que te falta es adherirlo al documento. tendras algun elemento especificamente para los mensajes, captura una referencia del elemento y lo adhiere con innerHTML.

pinchu · #7 (**permalink**) 02/11/2009, 09:40

Hombre evidentemente yo lo que quiero es que me salgan los saltos de línea en lugar de ...

Lo que hago es esto:

var contenidoMensaje = document.createElement("p");
contenidoMensaje.className = "contenido-mensaje";
//Vamos a sustituir los saltos de linea por para visualizar el mensaje correctamente
var textoConSaltosDeLinea = (document.getElementById("contenido").value).repla ce(/\n/gi," ");
var textoContenidoMensaje = document.createTextNode(textoConSaltosDeLinea);
contenidoMensaje.appendChild(textoContenidoMensaje );

zerokilled · #8 (**permalink**) 02/11/2009, 09:58

ahora entiendo el asunto, el problema lo tienes en la siguiente linea.

Código:

var textoContenidoMensaje = document.createTextNode(textoConSaltosDeLinea);

un textnode es de tipo CDATA. es decir, los PCDATA son contenidos que el analizador HTML interpreta pero los CDATA el analizador los considera como tal. tienes dos opciones, si usas innerHTML no tendras este problema, simplemente agregas el valor tal cual lo tienes y el navegador analiza el contenido. esa es la opcion sencilla. la opcion mas complicada, en el sentido de que requiere mas lineas, es dividir la cadena en multiples elementos con split y vas creando multiples elementos P y textnodes.

pinchu · #9 (**permalink**) 02/11/2009, 10:33

Muchas gracias

Le he hecho un innerHTML y listo

Una cosa como curiosidad,si el usuario escribe '\n',el mensaje se muestra en blanco.Ya se que es un caso un poco enfermizo pero ¿hay manera de evitar esto?

zerokilled · #10 (**permalink**) 02/11/2009, 10:50

no comprendo bien. hice un prueba escribiendo solo \n y el navegador me lo muestra tal cual. ¿podrias explicar como haces para que el navegador te lo muestre en blanco? en todo caso, supongo lo que te ocupa es validacion de contenido.

pinchu · #11 (**permalink**) 02/11/2009, 12:47

en mi textbox escribo con comillas '\n' y muestra un salto de línea nada más.

Lo de la validación del contenido habría que pensarlo pq no le voy a prohibir al usuario escribir comillas o cosas así ¿no?

zerokilled · #12 (**permalink**) 02/11/2009, 13:26

pues no se que decirte porque tambien lo habia intentado con comillas simples y dobles, aun me sigue mostrando el contenido tal cual. es decir, no lo interpreta como un salto de linea. a continuacion el documento que use como prueba.

Código:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Foros del Web - Test</title>
<script type='text/javascript'>
self.onload = function(){
document.getElementById("agregar").onclick = function(){
this.nextSibling.innerHTML = this.previousSibling.value;
}};
</script>
<style type="text/css">

</style>
</head>

<body>
<input id="content" /><input type="button" id="agregar" value="agregar contenido" /><p></p>
</body></html>

creo que deberias mostrar como actualmente tienes tu codigo.