Cambiar una palabra por un logo o una imagen

Una de las posibilidade del JavaScript es que nuestro blog puede tener ciertas características y luego, algún tipo de código las puede cambiar muy rápidamente y sin que esto sea evidente para los visitantes. Un ejemplo típico de esto son los emoticones en los comentarios; alguien escribe cierta combinación de caracteres como :) y una función se encarga de buscarlos y cambiarlos por una imagen

Con el mismo criterio y de manera simple, también es posible modificar otro tipo de textos, en realidad, cualquiera.

Supongamos que nos gustaría que en las entradas, cada vez que hacemos referencia a nuestro sitio, en lugar de aparecer un enlace como texto, quisiéramos que se muestre una imagen, alguna clase de logo. Es sencillo de hacer, escribimos el código en la entrada y listo:

...etiam rhoncus iaculis magna ac accumsan sed at dui et eros mollis hendrerit ...

<a href="mi_URL" target="_blank"><img src="mi_LOGO" /></a>

No hay problema pero ... hay que escribirlo ... eso mismo lo podríamos hacer de manera automática y evitarnos el trabajo de recordar el código; para eso, sólo necesitamos de una función cuya estructura elemental sería algo así:

<script type='text/javascript'>
//<![CDATA[
  function reemplazaLogos(cual) {
    if(!document.getElementById) { return; }
    var verificar = "post-" + cual;
    bodyText = document.getElementById(verificar);
    elTexto = bodyText.innerHTML;
    elTexto = elTexto.replace(/PALABRA/g,'CODIGO_HTML');
    bodyText.innerHTML = elTexto;
  }
//]]>
</script>

¿Qué hará eso? Una vez que las entradas son mostradas, buscará dentro de ellas una PALABRA y la reemplazará por un código HTML que deberemos establecer nosotros.

¿Qué palabra? Cualquiera pero es recomendable que usemos una plabra inventada, algo que podamos recorar con facilidad y que no tenga otro posible uso. Por ejemplo, podría usar MILOGO y hacer que en lugar de verse esa palabra, se viera una imagen que fuera un enlace a mi sitio:

<script type='text/javascript'>
//<![CDATA[
  function reemplazaLogos(cual) {
  if(!document.getElementById) { return; }
    var verificar = "post-" + cual;
    bodyText = document.getElementById(verificar);
    elTexto = bodyText.innerHTML;
    elTexto = elTexto.replace(/MILOGO/g,'<a href="http://misitio.blogspot.com" target="_blank"><img src="URL_imagen" style="vertical-align:text-bottom;" /></a>');
    bodyText.innerHTML = elTexto;
  }
//]]>
</script>

Coloco entonces eso antes de </head> y me faltaría hacer que se ejecutara. Para que esto funcione sin problemas y sin interferencias, lo que debemos hacer es identificar las entradas de manera precisa, dándoles un ID exclusivo. Expandiendo los artilugios, buscaremos algo así:

<div class='post-body entry-content'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Y reemplazaremos lo indicado por esto:

<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<script type='text/javascript'>reemplazaLogos(&#39;<data:post.id/>&#39;);</script>

¿Podría usarse más de una palabra? Sí, bastaría agregar líneas como esta, una debajo de la otra:

elTexto = elTexto.replace(/OTRAPALABRA/g,'CODIGO_HTML');

En este ejemplo online se lo puede ver en funcionamiento.