Ideas para intercambiar texto por imagenes desde XML

[ZiTAL]

Hola a todos, me surge el siguiente problema:

Tengo un chat del cual recojo los datos mediante XML tipo:

Código HTML:

<?xml version="1.0" encoding="utf-8"?>
<ms>
	<m>
		<id>4316</id>
		<name>atutxon</name>
		<comment>bla bla bla :)</comment>
		<date>2008/08/13 - 13:28:11</date>
	</m>
	<m>
		<id>4317</id>
		<name>atutxon</name>
		<comment>etc etc etc ;)</comment>
		<date>2008/08/13 - 13:28:50</date>
	</m>
</ms> 

y el resultante en HTML del mismo:

Código HTML:

<span id="span4316"><strong>2008/08/13 - 13:28:11 - atutxon: </strong>bla bla bla :)<br/></span>
<span id="span4317"><strong>2008/08/13 - 13:28:50 - atutxon: </strong>etc etc etc ;)<br/></span> 

la cuestion es que no se como convertir los caracteres :) y ;) en imagenes.

Opcion 1:
- PHP: con str_replace cambiarlos por <img src ... pero luego no se como parsear el XML ya que tendre algo como:

Código HTML:

<?xml version="1.0" encoding="utf-8"?>
<ms>
	<m>
		<id>4316</id>
		<name>atutxon</name>
		<comment>bla bla bla <img src="img/smile/1.gif" alt=":)" /></comment>
		<date>2008/08/13 - 13:28:11</date>
	</m>
	<m>
		<id>4317</id>
		<name>atutxon</name>
		<comment>etc etc etc <img src="img/smile/2.gif" alt=";)" /></comment>
		<date>2008/08/13 - 13:28:50</date>
	</m>
</ms> 

Opcion 2:

- Pasarlo normal mediante PHP y reemplazarlo mediante javascript que tampoco lo veo como hacerlo.

Alguna sugerencia idea etc... que no sea innerHTML.

Gracias.

La pagina en cuestion es:

http://zital.no-ip.org/txat/

ya hablamos sobre ello, ya va por la version 3.3 ;)

[venkman]

Si lo quieres hacer en PHP, metiéndolo en el XML, podrías meter el contenido de <comment></comment> en un bloque de datos: <comment><[CDATA[ bla bla bla <img src="img/smile/1.gif" alt=":)" />]]></comment>

Todo lo que vaya en un bloque CDATA debe tratarse como un literal y no ser tratado como XML por el parseador que utilices.

Si lo quieres hacer en Javascript... no sé qué problema tienes. ¿Por qué no haces un replace una vez parseado el XML o mientras lo parseas?

[ZiTAL]

Hola venkman, al parecer has metido <comment> en el mensaje y me has petado el chat jejeje, tendre que ponerle un htmlentities. De todas formas probare con CDATA a ver como va ;)

[venkman]

Vaya, no me imaginaba que fuera eso...

Lo del CDATA de todos modos, ahora que me has comentado eso, no sé si te servirá. Pero ¿el parseado del XML en Javascript lo estás haciendo tú mismo o usas algún parseador externo o cómo?

[ZiTAL]

lo hago yo a pelo:
http://zital.no-ip.org/txat/js/ajax.js

Código PHP:

              var messages=ajax.responseXML;
        messages=messages.getElementsByTagName('ms');
        messages=messages.item(0);
        var message=messages.getElementsByTagName('m');
            for(var i=0;i<message.length;i++)
             {         
                var id=message[i].getElementsByTagName('id');
                id=id.item(0);
                id=id.firstChild.nodeValue;
                
                if(in_array(id,tmpCommentsId)==true) // if repeated ID in the same ajax response break
                {
                    break;
                }
                
                var date=message[i].getElementsByTagName('date');
                date=date.item(0).firstChild.nodeValue;
                
                var name=message[i].getElementsByTagName('name');
                name=name.item(0).firstChild.nodeValue;
                
                var comment=message[i].getElementsByTagName('comment');
                comment=comment.item(0).firstChild.nodeValue;
                
                var span=document.createElement('span'); // create span element                                
                span.id="span"+id;         // set ID to the span
                                
                var strong=document.createElement('strong');
                var txt=document.createTextNode(date+" - "+name+": ");
                var txt2=document.createTextNode(comment);
                var br=document.createElement('br');

                strong.appendChild(txt);
                span.appendChild(strong);
                span.appendChild(txt2);
                span.appendChild(br);
                chat.appendChild(span); // insert span into chat
             }  
   

[venkman]

Bueeeno, entonces no tendrías más que añadir ahí dentro el tema de buscar los emoticonos, y sustituirlos por nuevos nodos.

Partiendo de que tienes la variable comment con el contenido del comentario, podrías hacer algo como...
Troceas comment buscando los emoticonos que quieres buscar. "blabla :) tal tal :( blabla" -> ["blabla",":)","tal tal", ":(", "blabla"].
Luego podrías: Por cada trozo que es texto, crear un nodo de texto (p.ej. un span) y por cada trozo que es :) crear un nodo img.

[ZiTAL]

una idea de puta madre, en cuanto tenga tiempo lo hago, gracias ;)

[ZiTAL]

Aupa, al final lo he hecho con expresiones regulares, si quereis codigo:

http://zital.no-ip.org/txat/zitalk_v3.3.tar.bz2

http://zital.no-ip.org/txat/

Gracias venkman