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:
<span>Hola</span>
De la siguiente manera:
objeto = $('span'); objeto.text('Helo');
El problema viene cuando los textos están entremedio de otros controles, por ejemplo:
<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?
Yo hace algun tiempo me hice un "diccionario" basico.
$(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.
<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.
<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
Has prbado ha designar un "id" para los elementos problemáticos?
<input id="textoacambiar" type="text" />
Y después ya
$('#textoacambiar').text() ...
No lo he probado. Mira a ver si te sirve.
Un saludo.
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.