reemplazo de textos con javascript?

WHK · 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 [Seleccionar]

<span>Hola</span>

De la siguiente manera:

Código [Seleccionar]

objeto = $('span'); objeto.text('Helo');

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

Código [Seleccionar]

<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?

#!drvy · 18 Octubre 2013, 01:38 AM

Yo hace algun tiempo me hice un "diccionario" basico.

Código (javascript) [Seleccionar]

$(function(){
   var diccionario = {'Hola':'Hello','Mundo':'World','Que tal':'How are you'};

   $('body *').each(function(){
      // Conseguir el nodo.
      var nodo = this.firstChild;
      var viejos = [];

      // Solo reemplazar si se trata de nodos de texto.
      if(nodo!==null && nodo.nodeType===3){
         // Obtener valor actual.
         var valor = nodo.nodeValue;
         // Por cada palabra en el diccionario...
         for(var palabra in diccionario){
            // Si nuevo valor ya esta definido.. ya hemos hecho reemplazos antes.
            if(nuevo_valor!==undefined){valor=nuevo_valor;}
            // Reemplazar palabra/s.
            var nuevo_valor = valor.replace(palabra,diccionario[palabra]);
         }
         // Reemplazar realmente.
         $(nodo).before(nuevo_valor);
         // Poner viejos nodos en lista de eliminacion
         viejos.push(nodo);
      }
      // Eliminar nodos innecesarios.
      viejos.length && $(viejos).remove();
   });
});

Incialmente.

Código (html4strict) [Seleccionar]

<body>
 <div>Hola</div><div><div><ul><li>Hola Mundo</li></div></div>
 <span>Mundo <input type="text" value="Hola" />.</span>
 <input type="button" value="Hola" />
 <div>Que tal</div>
</body>

Al ejecutarse.

Código (html4strict) [Seleccionar]

<body>
        <div>Hello</div><div><div><ul><li>Hello World</li></ul></div></div>
 <span>World <input type="text" value="Hola">.</span>
 <input type="button" value="Hola">
 <div>How are you</div>
</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

Almapa · 18 Octubre 2013, 09:43 AM

Has prbado ha designar un "id" para los elementos problemáticos?

Código (javascript) [Seleccionar]

<input id="textoacambiar" type="text" />

Y después ya

Código (javascript) [Seleccionar]

$('#textoacambiar').text() ...

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

WHK · 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.

Test Foro de elhacker.net SMF 2.1

reemplazo de textos con javascript?

WHK

#!drvy

Almapa

WHK