Como reemplazar texto por otro

Emmanuel_Cortes · #1 (**permalink**) 03/02/2012, 13:34

Hola amigos del foro, quisiera pedirles ayuda, quisiera saber si es posible hacer un sistema en Java Script que pueda reemplazar determinado texto, ejemplo “:caritauno:” por un código HTML u otro texto
Quisiera saber si es posible, porque quiero lograr un sistema similar al de los emoticones que ponen en las web, pero no tengo la posibilidad de hacer este sistema en PHP u otros, con lo único que lo puedo hacer es con JavaScript. Estaría infinitamente agradecido ;)

Fernand0 · #2 (**permalink**) 03/02/2012, 17:29

Código HTML:

Ver original<html>
    <head>
        <script type="text/javascript">
            function parseBBCODE()
            {
                comments = document.getElementsByClassName("comment");
                
                for(i = 0; i < comments.length; ++i)
                {
                    comments[i].innerHTML = comments[i].innerHTML.replace(':smile:', '<img src=...');
                }
            }
        </script>
    </head>
    <body onload="parseBBCODE();">
        <div class="comment">:smile:</div>
    </body>
</html>

hay mejores formas.. pero te doy la mas simple para que te des una idea...

saludos

Emmanuel_Cortes · #3 (**permalink**) 04/02/2012, 19:44

muchas gracias :D esta de lujo, pero me percate que solo reemplaza el primer simbolo que encuentra y los demas no :( hay manera de solucionar eso? de antemano gracias :D

laratik · #4 (**permalink**) 04/02/2012, 20:36

de momento la unica que consoco en javascript es utilizando expresiones regulares:

Código Javascript:

Ver originalreplace(/:smile:/g, '<img src=...');

Emmanuel_Cortes · #5 (**permalink**) 04/02/2012, 21:10

Cita:

Iniciado por laratik

de momento la unica que consoco en javascript es utilizando expresiones regulares:

Código Javascript:

Ver originalreplace(/:smile:/g, '<img src=...');

ya lo he intentado con esos valores y no funciona T_T
replace(/:smile:/g, '<img src=...');
pero de todas formas gracias :)

zerokilled · #6 (**permalink**) 04/02/2012, 21:34

buenas,
solo a modo de observación... en lugar de realizar reemplazos al string innerHTML, yo lo trabajaría a nivel de nodos con un iterador. particularmente porque al volver asignar el string a innerHTML el navegador tiene que volver a interpretar el código; aunque también depende mucho del contenido. si el contenido es simple texto, no creo que cause tanto problema o efectos secundarios. pero si en el contenido hay recursos externos (como imágenes) o algún scripting aplicado (generalmente eventos), hay una gran probabilidad de que el navegador vuelva a realizar una petición para cargar los recursos o que los eventos colapsen. con un iterador de nodos, lo más seguro te puedas evitar esas situaciones, aunque no te salvas del hecho de que la forma de trabajarlo puede ser más complicado -especialmente si no se tiene un buen énfasis en la manipulación de nodos-, pero tengo fé de que podría ser más efectivo.

Emmanuel_Cortes · #7 (**permalink**) 05/02/2012, 00:42

Cita:

Iniciado por laratik

de momento la unica que consoco en javascript es utilizando expresiones regulares:

Código Javascript:

Ver originalreplace(/:smile:/g, '<img src=...');

Cita:

Iniciado por zerokilled

buenas,
solo a modo de observación... en lugar de realizar reemplazos al string innerHTML, yo lo trabajaría a nivel de nodos con un iterador. particularmente porque al volver asignar el string a innerHTML el navegador tiene que volver a interpretar el código; aunque también depende mucho del contenido. si el contenido es simple texto, no creo que cause tanto problema o efectos secundarios. pero si en el contenido hay recursos externos (como imágenes) o algún scripting aplicado (generalmente eventos), hay una gran probabilidad de que el navegador vuelva a realizar una petición para cargar los recursos o que los eventos colapsen. con un iterador de nodos, lo más seguro te puedas evitar esas situaciones, aunque no te salvas del hecho de que la forma de trabajarlo puede ser más complicado -especialmente si no se tiene un buen énfasis en la manipulación de nodos-, pero tengo fé de que podría ser más efectivo.

me intereso lo que dices, me podrias explicar mas detalladamente como se podria hacer esta funcion con nodos? (Claro, si es posible que me expliques) muchas gracias de antemano

zerokilled · #8 (**permalink**) 05/02/2012, 02:12

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 DOM Traversal. en particular, NodeIterator. 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 Text. 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.

Fernand0 · #9 (**permalink**) 05/02/2012, 03:17

gracias.. no se me habia cruzado por la cabeza lo de que re parseaba el inner por completo.. imagino que con textNodes se podra hacer con mas performance

saludos

zerokilled · #10 (**permalink**) 05/02/2012, 07:47

@fernando, no fue y tampoco es para quitarle mérito a tu sugerencia. pues con innerHTML es mucho más fácil y rápido de implementar. simplemente el detalle que mencionaba, si hay scripting puede colapsar. por ejemplo, el mismo ejemplo anterior pero con innerHTML.

Código:

document.body.innerHTML = document.body.innerHTML.replace(/\b[aeiou][\w\xc0-\xff]{3,}/ig, "<img 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=='>");

si vas a la página de inicio e introduce en la consola el código, debes notar que no sólo el menú de navegación, sino que también los tooltips de los foros (las estadísticas que se muestran en un cuadro negro) colapsan, además de la alteración en la estructura html. el ejemplo es severo porque además de considerar el texto a nivel del cuerpo también se considera el código html. a lo que quiero llegar es que depende mucho del punto de partida y el contenido de este. para efectos del autor, es muy poco probable que el patrón :emoticon: se encuentre en el código html, pero pudiera colapsar algún scripting aplicado.

Emmanuel_Cortes · #11 (**permalink**) 06/02/2012, 02:41

Cita:

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

Emmanuel_Cortes · #12 (**permalink**) 06/02/2012, 02:50

Código Javascript:

Ver originalfor(i = 0; i < comments.length; +-i)

creo que ya lo he logrado, solo cambie los signos ++ de esta expresion por +-, pero me lanza un error, se podra solucionar eso?

Fernand0 · #13 (**permalink**) 06/02/2012, 22:15

+-i? y eso? de donde salio?

Emmanuel_Cortes · #14 (**permalink**) 08/02/2012, 01:40

salio de esta expresión, pero no sale (es un error) por favor alluda, necesito que cambie todos los símbolos y no nadamas el primero

<html>
<head>
<script type="text/javascript">
function parseBBCODE(){
comments = document.getElementsByClassName("comment");
for(i = 0; i < comments.length; ++0){
comments[i].innerHTML = comments[i].innerHTML.replace(":)", '<img src=smiler.jpg>');
comments[i].innerHTML = comments[i].innerHTML.replace(':smile1:', '<img src=smiler.jpg>');
}
}
</script>
</head>
<body onload="parseBBCODE();">
<div class="comment">:smile: :smile: :smile1: :smile1: hola :) :) :)</div>
</body>
</html>

Emmanuel_Cortes · #15 (**permalink**) 11/02/2012, 11:16

Porfavor, estoy desesperado, necesito que reemplase todos los caractees iguales y no nadamas el primero T_T

Emmanuel_Cortes · #16 (**permalink**) 11/02/2012, 23:47

ya encontre la solucion, mcuhas gracias a todos los que repondieron ene l tema, fue una gran alluda (ma han salvado) gracias