Javascript y los saltos de linea en xml

[navegantes]

Hola de nuevo. Se ve que no estoy muy inspirado hoy.

Tengo un textarea el cual guarda el contenido en una DB MYSQL.
El texto que se escribe y posteriormente se guarda tiene párrafos con salto de linea. Cuando miro el contenido guardado en la DB con phpmyadmin el contenido se muestra con dichos párrafos. Si el contenido lo cargo en un textarea para su modificación también se muestra con los saltos de linea. Pero cuando lo quiero mostrar a los usuarios en la web entonces no me mantiene la estructura.

La consulta la realizo con php y la respuesta la monto en un XML con el siguiente aspecto:

Código XML:

echo "<noticia>";
echo "<texto>".$ver_res['texto']."</texto>";
echo "</noticia>";
 

Posteriormente con JS muestro dichos resultados.

Código Javascript:

var col_texto = document.createElement ('div');
col_texto.class="texto";
col_texto.appendChild (document.createTextNode(respuesta.documentElement.getElementsByTagName('texto')[i].firstChild.nodeValue));
fila.appendChild (col_texto);
 

La información la lee y la muestra sin saltos de lineas. Todo seguido.

He probado con nl2br() poniéndolo en el php

Código PHP:

echo nl2br("<texto>".$ver_res['body']."</texto>");
 

Me genera un XML que se muestra así:

Código XML:

<noticia>
   <texto>
     nada
       <br>
       <br>
     hola que tal
   </texto>
</noticia>
 

Para empezar no se porque hay dos <br> cuando en principio si solo hay un salto de linea debería de ser solo un <br> ¿No?

Y después el resultado final tan solo es que se muestra el primer párrafo...

¿Alguien me puede echar una mano?

Espero haberme explicado.

[zerokilled]

buenas.
lo primero, comprender como funciona un navegador. probablemente sabrás y se te habrá olvidado que el navegador omite los saltos de línea y los convierte a espacio. adicionalmente, más de un caracter whitespace consecutivo es ignorado y solo se muestra uno.

segundo, cuando generas el xml le estas dando unos elementos al documento xml. es decir, en tu resultado final, <br> son elementos del documento xml y no los considera como texto. por tanto, es normal que cuando el navegador ‒ o cualquier otro programa compatible con xml ‒ lee el primer nodo del elemento solo obtenga la primera porción. fíjate que no es lo mismo crear el xml con dichos elementos neutralizado, es decir convertir los símbolos < > a &lt; y &gt;. en todo caso, aunque los neutralices, no te va servir porque al agregar el contenido del nodo (appendChild) el navegador no analiza su contenido y por tanto lo agrega como un contenido literal.

tercero, el problema de que te aparece dos <br> lo tendrás que consultar en su respectivo foro. adivinando un poco, asumo que debe ser que la función nl2br admite ambas formas de saltos de líneas: LF y CR. probablemente tu navegador ‒ o del usuario que pública el texto ‒ generó ambos caracteres.

solución al problema. hay múltiples formas de hacerlo funcionar. todo dependerá de cuál forma tu quieres hacerlo. si quieres trabajar directamente a base de nodos, entonces puedes crear varios subelementos en el documento xml. por ejemplo, generar un resultado como el siguiente:

Código:

<noticia>
   <texto>
     <parag>nada<parag>
     <parag>hola que tal</parag>
   </texto>
</noticia>

luego, para agregar el contenido debes recorrer por los elementos del elemento <texto> y en cada ciclo crear un nuevo elemento.

Código:

var destino, texto; // destino: elemento html donde se va agregar, texto: elemento xml que contiene el contenido

for(var i = 0; texto.childNodes[i]; i++ ){
if(texto.childNodes[i].nodeType != 1) continue; // verificamos que sea de tipo Element;
var p = document.createElement('p');
  p.appendChild(
  document.createTextNode(texto.childNodes[i].firstChild.nodeValue)
  );
destino.appendChild(p);
}

la otra alternativa es usando el método que haz estado usando hasta ahora pero ligeramente con unas diferencias. primero, al generar el documento xml debes poner el contenido dentro de un CDATASection. de esta forma el interprete xml no considera los elementos sino que lo trata como un contenido literal y así al leer el nodo con firstChild obtienes todo el contenido. y segundo, en lugar de appendChild debes usar innerHTML para que el navegador analice el contenido como html.

Código:

// xml;
<noticia>
   <texto><![CDATA[
     nada
       <br>
       <br>
     hola que tal
   ]]></texto>
</noticia>

// js;
var p = document.createElement('p');
p.innerHTML = texto.firstChild.nodeValue;
destino.appendChild(p);

[navegantes]

Hola Zerokilled. ¡Muchas gracias por tu ayuda!

La primera parte (el tema de los navegadores y los espacio) lo sabía pero se ve que no lo he tenido en cuenta en este asunto. A partir de ese punto a sido aprender algo nuevo jeje.

He resuelto el problema usando tu segunda opción. Me ha parecido la más sencilla y como bien dices la que más se aproxima a lo que ya tengo montado.

El tema de nl2br sigo sin resolverlo pero bueno. Seguiré mirando lo de LF y CR y si sigo sin lograrlo entonces me encaminaré hacia el foro de PHP.

Una vez más muchas gracias por tu ayuda.

Buen fin de semana.

[emprear]

@navegantes

muy buena la explicación técnica de @zerokilled.
Pero veamos en la práctica si te he entendido
Tenés un textarea en el que el usario ingresa

este es el primer párrafo/n
este es el segundo párrafo/n

/n, podrá ser acaso /n/r, /r/n ó /r, aunque eso no cambia la situación
Vos querés entonces que el html generado muestre esos saltos de linea como <br>/<br />
Si esa es la situación tu php debería, antes de guardar en la BD, hacer las siguientes correciones

Código PHP:

//transformar los saltos del inea del texto ingresado ($texto)
$ntexto = nl2br($texto);
// y posteriormente
$texto_en_bd = htmlentities($ntexto)
// recién ahora insertás en la BD, con lo que conseguis un xml
 

Código XML:

<texto>este es el primer párrafo&lt;br&gt;este es el segundo párrafo&lt;br&gt;</texto>
 

La condición para que el método anterior funcione correctamente es que estés trabajando en UTF-8
Saludos

[navegantes]

Hola emprear.

Gracias por tu propuesta. Por el momento he usado la de zerokilled. Ya está implementada y funciona correctamente.

De todas formas una vez que esté listo lo que tengo entre manos y tenga un poco de tiempo revisaré el código para que la próxima vez sea todo correcto desde el mismo momento en el que se envía la información a la base de datos. Y entonces tendré en cuenta tu propuesta.

Gracias a los dos.