Como reemplazar texto por otro

[Emmanuel_Cortes]

Iniciado por zerokilled

como decía, lo primero que necesitas es un iterador. consiste en un proceso que recorre por los nodos de un documento. por comodidad, me gusta mucho los iteradores que ofrece la interfaz [url=http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html]DOM Traversal[/url]. en particular, [url=http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Iterator-overview]NodeIterator[/url]. por desgracia -y hasta donde mi conocimiento alcanza- parece que pocos navegadores lo implementan. lo puedes encontrar en navegadores basados en gecko y webkit. sin embargo, se puede hacer una función similar que cumpla el mismo objetivo. estoy seguro que en el foro encuentras algunas propuestas.

lo que me gusta de la interfaz Traversal es la flexibilidad para seleccionar los nodos, de modo que te puedes enfocar en un tipo de nodo en particular. para tu caso, el tipo de nodo de interés es el [url=http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1312295772]Text[/url]. el cual son los nodos que representan el texto legible en un documento. dicho nodo contiene la función splitText que lo que hace es dividir el texto en múltiples nodos del mismo tipo. el punto es que con esta función debes aislar el texto que interesa en un solo nodo Text para luego substituirlo por otro nodo que representaría la imagen. en adición, debes valerte por una expresión regular para determinar si el texto contiene la secuencia de interés, además te servirá para realizar la separación del texto y la selección de la imagen. por ejemplo, puedes usar el método match para determinar si existe una coincidencia en el string y utilizarlo en la selección de imagen, y el método search para determinar en que punto exacto del string ocurre la coincidencia. este último lo necesitarás porque la función splitText toma como argumento un número indicando la posición donde se debe dividir el nodo Text.

el siguiente código lo puedes probar en un navegador con una consola de depuración. el criterio del ejemplo es que busca todas las palabras compuesta por más de cuatro letra y que inicia con una vocal y la substituye por una imagen. tiene poco sentido porque la imagen es la misma pero el punto clave es demostrar el dinamismo en la variedad de palabras que selecciona.

Código:

// se inicializan las variables; no es necesario pero es buena práctica
var iterator, iter, regex, match, repl, img;

// patrón que selecciona palabras que inician por vocal y con un mínimo de 4 caracteres
regex = /\b[aeiou][\w\xc0-\xff]{3,}/i;

// el objeto NodeIterator, lee la referencia para determinar que significa cada argumento
iterator = document.createNodeIterator(document.body, NodeFilter.SHOW_TEXT, null, true);

// el bucle while recorre por todos los nodos según el criterio de NodeIterator
while(iter = iterator.nextNode()){

// se determina si el texto contiene el patrón de interés
if(! (match = iter.data.match(regex))) continue;

// se crea una nueva imagen, o lo mismo que un elemento <img>
img = new Image();

// se declara la fuente de la imagen, aqui vendrías indicando la ruta a la imagen que guarda relación con el texto coincidido
img.setAttribute('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAACtklEQVR42k2T2UtUURjA5x/pKRJ6rSAKhBYo0hnHmbGgoo00lRaqhwiiIMO3wuyhiEiMdLyzuRXagiJKWebWqIzO4kLqNOPYbN6cxc6vcyeHPPDjcDjf7/u+cz+uTo2HRSYRkqyITEqVJER6LShSsYBYj7iFGuwXyflWkfA25HbtLpNJi3A4LHSZoReC0QbEyEvwdfNnsY/0Yhep+RbUmTrUyRrWvt8mKVmbuEvqhwORChOLxdBlbCcESinpZhPrTRb+2I1klUNk3p0jNVHHb98z1hcUom4rfsd9IqNNbMQniUXDUm6xCKx6Npr0rDUWy72Ijca9ZF8f5Pfb60R6Gxiur8Fl2I1yeDuOozv5UlvJ7OD7TbnFADYL2TeXyfTU8Kv1Dt7HlXy6qqezdD/2ov3Yju1B0Sjah1JcSPu1Cikrsu3OCnA3Ex94xddbJ+ky7qL1YIEUCrEaj0mKaC4tluixmkpQzKU4qyvRqa5ykf36DPX7WzoP7MC5bxu2wgKshiNYzf8CbRYTDo0yMy7LP9qrq9AtfXwifvXWEx3rZOrpPbrPlmCXVewy2ClxmTfZlFo3aa+SlRdmZ8TUUB8jAx8YGujB09/H+5s3cJiMOLX2TFuQ53yinCznJVRVJR6Ps7Kygs/nJ7Ic5POjh7SdPiW7MGI3lvxHnrUEOVkKQhu4RjQaJRgMEvAHmPP5mGxro/vKZTmMYpQSA7Y8MonrkvzaMlhEIhFCoVBO1PbQzxDz83P4Z2YITnvor32Qk1sM+hyKxFl+Ed3q6qqQkEwmSSQSudbzifx+P16vl9DSIt9ePKft3Bkcx8tov3Cez42N6NLptJCL/Mpms7lEWjfLy8sEAgGmp6fxezxM9fbg7ujANzjIrHyWTvs78m/eitaNJmvVPVJ0u92Mjo4wPDzM2NgY4+Pj/AX3Yq+5ByJz6QAAAABJRU5ErkJggg==');

// la siguiente línea no es necesaria, es solo una guía para que puedas analizar cual es el texto original cuando se reemplazo el nodo
img.setAttribute("title", match[0]);

// se hace la primera división del nodo Text indicando en qué posición ocurre la coincidencia
// por ejemplo, si el string es "una cadena extrañamente corta", la coincidencia ocurre en la "e" de "extrañamente"
// por tanto, la división resulta en dos nodos Text tal que "una cadena ", "extrañamente corta"
repl = iter.splitText(iter.data.search(regex));

// siguiendo el ejemplo anterior, la variable repl representa el segundo nodo de la división
// por tanto, la segunda división ocurre según la longitud de la palabra encontrada
// el resultado final son tres nodos Text tal que "una cadena ", "extrañamente", " corta"
repl.splitText(match[0].length);

// finalmente, ocurre la substitución del nodo Text por la imagen
// "una cadena " <img src="..."> " corta"
repl.parentNode.replaceChild(img, repl);
}

estoy seguro que el código se puede optimizar, como por ejemplo en lugar de buscar por nodos Text, utilizar nodos Element para determinar si existe una coincidencia. de esa forma se puede prescindir de un gran número de nodos y no tener que revisar uno a uno innecesariamente. en todo caso, te puede servir como idea base para una de las partes fundamentales de tu objetivo.

wow, muchas gracias, esta de lujo, pero no puedo entender mucho de ese tema, esque no tengo tanta experiencia (apenas inicio en javascript) pero gracias de todas formas:)
Me conformaria con saver como se pueden reemplazar todos los simbolos en el otro sistema (esque estoy bajo presion) de antemano gracias