Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: WHK en 17 Octubre 2013, 17:04 pm



Título: reemplazo de textos con javascript?
Publicado por: WHK en 17 Octubre 2013, 17:04 pm
Hola a todos, estoy haciendo un código en javascript para traducir una página personal con un diccionario de palabras (no vale usar traductor de google) y todo funciona de lujo, está hecho en jQuery pero tengo un pequeño problema:

Traducir esto es fácil:

Código:
<span>Hola</span>

De la siguiente manera:

Código:
objeto = $('span'); objeto.text('Helo');

El problema viene cuando los textos están entremedio de otros controles, por ejemplo:

Código:
<div>Nombre: <input type="text" /></div>

Porque si le doy un .text() al div voy a eliminar el input de tipo HTML y si le hago un reemplazo solo al texto con .html().replace() voy a sobreescribir el input y probablemente pierda todos sus eventos del DOM.

La única solución que encuentro por ahora es hacer el reemplazo de todo, control y texto y tomar todos los eventos asociados a cada control y despues establecerlos nuevamente, el problema es que en ese momento puede que algún evento se gatille sin querer como por ejemplo un onload de una imagen.

A alguien se le ocurre alguna idea?


Título: Re: reemplazo de textos con javascript?
Publicado por: #!drvy en 18 Octubre 2013, 01:38 am
Yo hace algun tiempo me hice un "diccionario" basico.

Código
  1. $(function(){
  2.   var diccionario = {'Hola':'Hello','Mundo':'World','Que tal':'How are you'};
  3.  
  4.   $('body *').each(function(){
  5.      // Conseguir el nodo.
  6.      var nodo = this.firstChild;
  7.      var viejos = [];
  8.  
  9.      // Solo reemplazar si se trata de nodos de texto.
  10.      if(nodo!==null && nodo.nodeType===3){
  11.         // Obtener valor actual.
  12.         var valor = nodo.nodeValue;
  13.         // Por cada palabra en el diccionario...
  14.         for(var palabra in diccionario){
  15.            // Si nuevo valor ya esta definido.. ya hemos hecho reemplazos antes.
  16.            if(nuevo_valor!==undefined){valor=nuevo_valor;}
  17.            // Reemplazar palabra/s.
  18.            var nuevo_valor = valor.replace(palabra,diccionario[palabra]);
  19.         }
  20.         // Reemplazar realmente.
  21.         $(nodo).before(nuevo_valor);
  22.         // Poner viejos nodos en lista de eliminacion
  23.         viejos.push(nodo);
  24.      }
  25.      // Eliminar nodos innecesarios.
  26.      viejos.length && $(viejos).remove();
  27.   });
  28. });

Incialmente.
Código
  1. <div>Hola</div><div><div><ul><li>Hola Mundo</li></div></div>
  2. <span>Mundo <input type="text" value="Hola" />.</span>
  3. <input type="button" value="Hola" />
  4. <div>Que tal</div>
  5. </body>

Al ejecutarse.
Código
  1.        <div>Hello</div><div><div><ul><li>Hello World</li></ul></div></div>
  2. <span>World <input type="text" value="Hola">.</span>
  3. <input type="button" value="Hola">
  4. <div>How are you</div>
  5. </body>

Tenia algún que otro bug... creo que no pillaba los elementos directos.. pj: Asi: <body>Hola</body>, no actuaria.. y algo mas pero no me acuerdo xD.

Espero que te sirva.

Saludos


Título: Re: reemplazo de textos con javascript?
Publicado por: Almapa en 18 Octubre 2013, 09:43 am
Has prbado ha designar un "id" para los elementos problemáticos?

Código
  1. <input id="textoacambiar" type="text" />

Y después ya

Código
  1. $('#textoacambiar').text() ...


No lo he probado. Mira a ver si te sirve.
Un saludo.


Título: Re: reemplazo de textos con javascript?
Publicado por: WHK en 24 Octubre 2013, 16:12 pm
Hola gracias :) ya lo he solucionado... el tema es que no puedo usar los ids de los objetos porque no tengo acceso para modificarlos, solo tengo acceso desde javascript.

Lo solucioné obteniendo los eventos de cada objeto y luego reescribirlos pegandoles nuevamente los mismos eventos :p

Saludos.