Problema al reemplazar en Javascript

#1 (**permalink**) 08/07/2011, 12:31

Hola a todos, estoy haciendo una extensión para Google Chrome en la que me gustaría reemplazar texto en el body entero de una web pero si uso esto:

Código Javascript:

Ver originaldocument.body.innerHTML = document.body.innerHTML.replace(/!angry/gi, '<img src="chrome-extension://cdlmeojifpjmbgmmhlhdcohlhabeiffj/images/angry.png" title="!angry" />')

Es como si volviese a "cargar" el documento y da error en algunos lugares como GMail ¿conocen una forma más efectiva de reemplazar texto en un body completo?

Heiroon · #2 (**permalink**) 08/07/2011, 14:02

se me ocurre que pongas un div y lo hagas con ajax...

o incluso podrias jugar un poco con el css.. veo que lo q montas es una imagen.

no es asi??

- - - Edito - - -

ahh no habia entendido en principio lo que pretendias hacer... olvida esto entonces..

#3 (**permalink**) 08/07/2011, 14:19

Creo que no te he entendido bien, a ver, usando la función anterior lo que hace Javascript es tomar todo el HTML reemplazar el texto y volver a escribir el HTML con el texto reemplazado.

Yo lo que quiero es que solo reescriba la parte que quiero reemplazar y no todo, porque en sitios como GMail al hacer esto empiezan a funcionar mal.

Recuerda que esta extensión trabaja con todos los sitios web

zerokilled · #4 (**permalink**) 08/07/2011, 16:12

buenas,
la verdad no se qué sería lo más adecuado. dejando a un lado el innerHTML debido al efecto que puede tener, no solo visualmente, sino también a efectos del trasfondo como la petición de recursos, lo que se me ocurre es que utilices alguno de las interfaces del DOM Traversal. en este caso, tendrías que iterar todos los nodos tipo Text en busca de la palabra deseada. luego divides el nodo en dos pedazos eliminando la palabra e insertando un nodo IMG entre los dos nodos tipo Text. en cuanto a rendimiento, honestamente desconozco. quizas quieras experimentar por ahi para evitar el efecto que produce innerHTML.

#5 (**permalink**) 08/07/2011, 16:57

Exacto zerokilled, de esa forma creo se podría solucionar mi problema pero nunca he usado esa técnica ¿me podrías poner un ejemplo más visual?

Por ejemplo, de esta forma ¿cómo podría reemplazar la letra "a" por "e" en este HTML sin innerHTML?

Código HTML:

Ver original<body>
<div class="test1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus velit lectus, elementum nec sollicitudin et, placerat sit amet mauris. Vivamus molestie metus ac orci tristique in tempor tellus dapibus. Donec nec auctor dolor.
</div>
<div class="test2">
Pellentesque tincidunt massa sed diam luctus ut venenatis mauris tempus. Suspendisse tristique pharetra urna, nec pharetra velit tincidunt ut.
</div>
</body>

El problema es que el código debería funcionar en cualquier web, por lo que no conocería las clases ni los id's de los elementos.
Por lo que recurrir a un replace() en document.body.innerHTML parece la forma más rápida, pero como tú bien dices consume demasiados recursos y además en páginas que contienen gran cantidad de Javascript causa su mal funcionamiento al volver a "cargar" el body con el texto reemplazado.

Saludos.

tredio · #6 (**permalink**) 08/07/2011, 20:04

revisa si te sirve esto:

http://johannburkard.de/blog/program...ry-plugin.html

#7 (**permalink**) 08/07/2011, 21:46

Interesante, estoy haciendo pruebas y funciona sin alterar el funcionamiento de las webs, ahora me toda adaptarlo a mis necesidades.

Muchas gracias.

#8 (**permalink**) 09/07/2011, 06:15

Muchisimas gracias, funciona, pero ahora tengo otro problema, y es que consume demasiados recursos y la página se queda congelada hasta que termina.

Lo que pasa es que invoca la función tantas veces como distintas palabras por reemplazar halla.

¿A alguien se le ocurre una forma más óptima?

Código Javascript:

Ver originalvar memeType;
var size = '29px';
var css = document.createElement('style'); 
css.type = 'text/css'; 
css.innerHTML = '.MemeManagerStyle{width:' + size + '; height:' + size + '; background-color:transparent; display:inline; border-width:0px;}'; 
document.head.appendChild(css);
 
jQuery.fn.Memes = function (str) { 
    var memeType = str.replace(/!/g,'');
    var regex = new RegExp(str, 'g'); 
    return this.each(function () { 
        this.innerHTML = this.innerHTML.replace(regex, '<img class=MemeManagerStyle alt=' + memeType + ' title=' + memeType + ' src=chrome-extension://lbdcfigjcdkpgaegjmbodgpmconbfpep/images/' + memeType + '.png />'); 
        console.log('Loaded:' + memeType);
    });
}; 
 
function reMeme() {
    $('body').Memes('!trollface')
    .Memes('!awwyea')
    .Memes('!betterthanexpected')
    .Memes('!cereals')
    //[Una lista larga]
}

La extensión en sí no es más que un gestor de emoticonos combatible con todas las webs, usa códigos como !angry.

Saludos.

tredio · #9 (**permalink**) 09/07/2011, 15:44

si me imagine que era algo asi, puedes hacer como te dijeron en el otro post, y tratar de juntar en un solo patron (RegExp) todas las palabras que vayas a buscar, asi no haces el proceso tantas veces. Me imagino que te la pasas por CC y CR jeje.

_cronos2 · #10 (**permalink**) 10/07/2011, 17:10

Supongo que para evitar lo de congelar la página puedes mandar los valores por AJAX, realizar el proceso en el servidor con PHP y esperar a que devuelva el resultado.
Saludos (:

zerokilled · #11 (**permalink**) 10/07/2011, 17:24

hola @cronos!
no se si comprendí bien tu argumento pero no tiene sentido enviar los "valores" (no se cuales) por ajax ya que se trata de una extensión, de modo que todo funcionará en local. y si fueras a delegar la tarea a un servidor, menos sentido tiene porque entonces estas realizando dos peticiones: la primera para cargar la página y la segunda para obtener el contenido modificado. no digo que no es posible hacerlo, sino que se pierde tiempo en en ese proceso. adicionalmente, recuerda que una de las metas es que funcione independientemente del sitio web. espero haber entendido bien tu argumento.

#12 (**permalink**) 10/07/2011, 17:45

Exacto @zerokilled, es una extensión, por lo que AJAX aquí no se usa.
Aunque tampoco es imposible, imagina que tomo todo el document.body.innerHTML, lo envío a mi servidor e identifico donde están los elementos a reemplazar (elementos contenedores de estos), una vez identificado esto le devuelvo a la extensión las id's o clases de estos elementos para que reemplace en ellos en vez de toda la página.
Eso sí, nunca haría esto porque a parte del elevado consumo de recursos no me gusta depender de un servidor para una extensión de este tipo.

Ahora me toca recurrir a DOM Transversal en vez de reemplazar el document.body.innerHTML para que funcione todo.

Se aceptan sugerencias ;)

Saludos.

_cronos2 · #13 (**permalink**) 10/07/2011, 17:55

Cita:

Iniciado por zerokilled

hola @cronos!
no se si comprendí bien tu argumento pero no tiene sentido enviar los "valores" (no se cuales) por ajax ya que se trata de una extensión, de modo que todo funcionará en local. y si fueras a delegar la tarea a un servidor, menos sentido tiene porque entonces estas realizando dos peticiones: la primera para cargar la página y la segunda para obtener el contenido modificado. no digo que no es posible hacerlo, sino que se pierde tiempo en en ese proceso. adicionalmente, recuerda que una de las metas es que funcione independientemente del sitio web. espero haber entendido bien tu argumento.

Bueno lo de AJAX si fue un fallo porque no me di cuenta al postear de que era un extensión

Pero a lo que me refería es a que él dice que le funciona bien, pero que la página se congela. Entonces, si manda lo que sea al servidor por AJAX y espera la respuesta, no se cuelga, ¿no?
Saludos (:

#14 (**permalink**) 10/07/2011, 18:14

Exacto, se podría hacer lo del AJAX, pero no creo sea la solución más correcta a esto, lo tomaré como último recurso (muy último), intentaré hacer todo lo posible por parte del cliente.

¿No hay ninguna forma de mandar esto "al segundo plano" y que deje trabajar al usuario? ;)

zerokilled · #15 (**permalink**) 10/07/2011, 18:17

Cita:

¿No hay ninguna forma de mandar esto "al segundo plano" y que deje trabajar al usuario? ;)

creo que si se puede, pero con web workers -interfaz del api html5. tengo entendido que es algo asi como multi-tasking o multi-threading. sin embargo, ni me preguntes como se hace; pues aun no me he interesado por ese tema.

_cronos2 · #16 (**permalink**) 10/07/2011, 18:24

@zerokilled, hoy he estado mirando cosas de HTML5 y he visto los web workers, no he parado a leer el código ni nada pero el ejemplo iba muy lento. A lo mejor es porque trataba de encontrar números primos, pero casi se me cuelga Chrome. Sería cuestión de investigar, creo que era el ejemplo de html5demos.org
Saludos (:

#17 (**permalink**) 10/07/2011, 18:25

En caso de que use los Web Workers ¿no habría problemas?
Mi extensión es todo Javascript, no tiene nada de HTML, simplemente se carga ese código en las páginas como si de un <script> se tratase, y claro, ahí ¿no dependería de si la página está hecha en HTML5?

Nunca había pensado eso, pero ¿si el doctype no está declarado como HTML5 funcionaría de igual manera?