Un poco de moderación en los comentarios | Oloblogger Últimamente no hago más que mostrar cosas que parece que sirven para algo , pero que en el fondo no resuelven del todo los problemas para l...

1 de junio de 2011

Un poco de moderación en los comentarios

Últimamente no hago más que mostrar cosas que parece que sirven para algo, pero que en el fondo no resuelven del todo los problemas para los que se les supone la utilidad. Pero no me lo toméis a mal. Lo hago sólo para practicar cosillas, aprender cómo funcionan algunos códigos y de paso, como contraejemplo de lo que no funciona del todo bien.

En este caso vamos a ver un script muy sencillo que nos permite reemplazar palabras situadas dentro de cualquier tipo de DIV que tenga asociada una ID. Lo vimos en Simplex Design gracias a un graznido de @pizcos. Tranquilos si no entendéis del todo el funcionamiento, porque no he entrado demasiado en detalle y sólo he pretendido explicar a grandes rasgos qué hace cada cosa.

En este ejemplo lo vamos a utilizar como forma de moderación de comentarios, de manera que determinadas palabras sean eliminadas o mejor dicho, sobreescritas con asteriscos. Esta es la parte JavaScript y habrá que insertarla antes de </head>:

<script type='text/javascript'>
//<![CDATA[
function filtropalabras(ID){
var comm = document.getElementById(ID);
var comment = comm.innerHTML;
var palabras = /palabra1|palabra2|Palabra3/gi;

var comment1 = comment.replace(palabras, "****");
comm.innerHTML = comment1;
comm.style.display = "block";
}
//]]>
</script>

Se trata sólo de una función. Para los más novatos, una función es una rutina que toma unos datos de entrada, los procesa de determinada manera y devuelve otros. Lo más práctico de las funciones es que sirven para ejecutar tareas repetitivas desde un mismo trozo de código. Esta en concreto la usaremos en el bucle que va escribiendo los distintos comentarios que tienen las entradas, por lo que se repetirá el proceso con cada uno de ellos.

La función que hemos llamado filtropalabras recibe el dato de la ID a tratar (lo que hay entre paréntesis) y en primer lugar captura la capa correspondiente (getElementById), que es guardada temporalmente en comm. Con innerHTML se guarda en un variable (comment) el contenido de dicha capa, para que después pueda ser tratado sin alterar el contenido original. En la variable palabras, es dónde tenemos que introducir a mano la lista de palabras que queremos eliminar.

La siguiente línea es la principal. El comando replace comprueba en todo el contenido que tenemos guardado (comment), la existencia de palabras coincidentes con las de nuestra lista (palabras). Cuando encuentra una la sustituye por lo entrecomillado, cuatro asteriscos. Todo el resultado se va guardando en comment1.

Lo último que hacemos es colocar todo este resultado con innerHTML, de nuevo en la capa que antes extrajimos de su sitio y luego darle una visibilidad de bloque.


Ya podemos Guardar y ya tenemos nuestra función preparada, pero ninguna hace nada si no se le llama antes desde algún sitio y se le pasan los valores que necesita. Eso lo vamos a hacer desde la parte HTML del blog.

Siguiendo con el ejemplo, con Expandir plantillas de artilugios marcado, localizamos la parte que imprime los comentarios. Tiene este aspecto:

<p><data:comment.body/></p>

Bien, pues eso lo sustituimos por todo esto:

<p>
<div expr:id='data:comment.id' style='display:none;'>
<data:comment.body/>
</div></p>
<script type='text/javascript'>
filtropalabras(&quot;<data:comment.id/>&quot;);
</script>

Las DATA son variables específicas de Blogger que guardan datos de nuestro blog. data:comment.body es la que contiene el texto de cada comentario. Lo que le hemos añadido ha sido una capa no visible (div style="display:none;") con un ID que también hemos aprovechado de las variables Blogger. A continuación es cuando se coloca la llamada a la función que antes situamos antes del </head> y como parámetro, le pasamos la ID que hemos insertado.

Para incluir más palabras sólo hay que respetar los símbolos y letras al principio y al final de var palabras e incluir una barra vertical ( | ) entre cada dos. Los asteriscos también pueden ser sustituidos por cualquier cosa que os apetezca.

Ahora ya sí que está todo completo y tenemos una lista negra de palabras que no podrán usar en los comentarios de nuestro blog. Podéis probar a escribir caca, culo, pedo o pis en un comentario de este blog de pruebas y observaréis que cuando guardáis, aparecen en su lugar los susodichos asteriscos


¿Y dónde está el pero...? El pero está en la lista en sí misma, pues tendría que ser muy completa para que cumpliera realmente su función. Lo más normal es que tengamos que ir añadiendo bastantes palabras al principio y aún así, siempre se nos escaparía alguna.

El script no hace diferencia entre mayúsculas y minúsculas (gracias al modificador gi de replace). Sin embargo, no es capaz de hacer iguales una letra con o sin acento. Para el sistema son cosas distintas y eso obligaría a redactar todas las combinaciones. Lo mismo ocurre si se intercalan espacios en blanco, guiones, etc.

No obstante, esto puede tener otras utilidades, como cambiar ciertas palabras por otras, eliminar en una cadena los espacios en blanco, saltos de línea, caracteres especiales, etc. Y sobre todo la más importante, que es saber que se pueden hacer este tipo de cosas.

Por ejemplo, para cambiar adicionalmente una palabra concreta por otra, sólo habría que añadir líneas extra tras var palabras = /palabra1|palabra2|Palabra3/gi; pero con este otro formato:

comment1 = comment1.replace(/hola/gi, "Un saludo");

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

11 comentarios :

  1. Pero qué manera tan sencilla de lavarles la boca (o las manos) a esos trolls que gustan de entrar sólo para insultar, o bien, para aquellos que con unas copas de más se les escapan varias palabrotas en los comentarios. Buenísimo.

    ResponderEliminar
  2. Ey Oloman el Link de "Blog de Pruebas" no funciona

    ResponderEliminar
  3. El Potro, pero sin mucho entusiasmo, que los trolls escriben muy raro y hay que traducir primero.

    Gracias Sergio. Ya lo he arreglado

    ResponderEliminar
  4. hola oloman felicidades por tu buen blog quisiera hacerte una pregunta yo quiero poner en la la web algo asi como tu por ejemplo,te explico ,yo quiero poner en una pagina varios enlaces y cuando le den click se abra en la misma pagina o abra otra a parte como quiera,porque si cada ves que añada algo y lo pongo en el menu entonces va ir creciendo y creciendo entonces lo que quiero es igual como tu lo tienes que nada mas sale el nombre de la pagina con algo de informacion y si alguna le interesa le das click y nos abre la pagina completa de esa informacion si me entiendes o no me explico perdona por lo bruto este es mi sitio que estoy creando http://miespaciogratis.com/
    gracias oloman de antemano

    ResponderEliminar
  5. Excelente, muy bueno. Lo apliqué de inmediato.

    Saludos!

    ResponderEliminar
  6. Jorge, creo que te refieres a la página principal, en la que aparecen los títulos de las entradas y un resumen del contenido. Si es eso, busca en este blog "sumarios" (así es como los llamo) y encontrarás varias soluciones. Elige la que más te guste.

    Roster, pero que quede claro que no es un sistema infalible y sólo es una pequeña ayuda.

    ResponderEliminar
  7. Oloman perdón por las molestias, si deseo ocultar una url como seria?
    Gracias !!

    ResponderEliminar
    Respuestas
    1. Sería utilizando precisamente sustituyendo "palabra1" por la dirección que quieres ocultar, usando el primer trozo de código ¿O sería para esconder todas las direcciones y no una en concreto?

      Eliminar
    2. Muchismas Gracias por responder, sip la idea seria todas las direcciones.

      Eliminar
    3. Esto no oculta el enlace, pero sí que cambia la dirección de destino y por tanto, el link no llevará a ningún sitio:
      var palabras = /palabra1|palabra2|Palabra3|https?:([^ >\"\']+)/gi;

      Eliminar