3

Estoy tratando de hacer un script que cambia el color de fondo de los mensajes que incluyen ciertas palabras,

var palabras = ["Test1","Test2","Test3"];
var mirador = new MutationObserver(async (records, _) => {
    Tratar();
})
mirador.observe($('#content')[0], { childList: true, subtree: true });
function Tratar(){
    var content =  $(this).parent();

for(var i=0;i<palabras.length;i++){
    if(content.indexOf(palabras[i])>=0){
        content.backgroundColor("#4287f5");
    }
}
}

La idea es aplicar esto al chat de StackExchange, estoy usando esta sala para probarlo, pero me da que algo estoy haciendo mal al hacer el .Observe()

Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. at :7:9

No tengo mucha idea de desarrollo web y estaba utilizando este script como base que te permite ocultar las imágenes del chat de stackexchange: https://stackapps.com/questions/8211/minimize-pics-in-chat

2 respuestas 2

4

El propio error te lo esta diciendo:

Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. at :7:9

Si vamos a la consola de google podemos ver que $('#content')[0] devuelve null, y si vemos en el html de sale no existe ningún id que tenga el valor content, pero revisando si que vemos la clase content por lo que entiendo que quieres hacer uso de ello. Cambiando # por ., ya que para clase en jquery se hace uso de "."

var palabras = ["Test1","Test2","Test3"];
var mirador = new MutationObserver(async (records, _) => {
    Tratar();
})
mirador.observe($('.content')[0], { childList: true, subtree: true });
function Tratar(){
    var content =  $(this).parent();

    for(var i=0;i<palabrasReportables.length;i++){
        if(content.indexOf(palabras[i])>=0){
            content.backgroundColor("#4287f5");
        }
    }
}
3

El primer parametro de mirador.observe debería de ser el target, por lo que debería de ser el contenedor de chat entero y no el $(".content") (que como comenta @lDanny7 al ser una clase es con .):

MutationObserver.observe()

mirador.observe($('#chat')[0],{opciones});

Por lo que al cambiar el target hay que cambiar el var content de la función tratar:

var content =  $(".content").last();

o

var content =  $(this).children(".content").last();

El .indexOf hay que hacerlo de String/array y no del elemento, por lo que se extrae mediante .text() y para que funcione mejor y detecte las palabras sin importar mayusculas/minisculas puedes añadirle .toUpperCase() si añades .toUpperCase también tendrás que tener las palabras de tu array en mayúsculas (lo puedes inicializar ya en mayus o haciéndole .toUpperCase() en la misma comprobación)

function Tratar(){
    var content =  $(".content").last();
    console.log("::::TRATAR::::" +content.text());
    for(let x=0;x<palabras.length;x++){
        if(content.text().toUpperCase().indexOf(palabras[x].toUpperCase())>=0){
            content.css("background-color","#4287f5");
        }
    }
}
mirador.observe($('#chat')[0], { childList: true, subtree: true });
1
  • Gracias por la ayuda
    – Aritz
    el 9 jul. 2019 a las 9:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.