Buscar viarias palabras al mismo tiempo

#1 (**permalink**) 09/07/2011, 11:16

Hola a todos, supongamos que yo quisiera buscar y reemplazar en una web entera las palabras "hola" y "adios".

Usaría la siguiente función con jQuery:

Código Javascript:

Ver originaljQuery.fn.MiFuncion = function (str) { 
    var regex = new RegExp(str, 'g'); 
    return this.each(function () { 
        this.innerHTML = this.innerHTML.replace(regex, '<img  src=images/' + str + '.png />'); 
        console.log('Loaded:' + str);
    });
};

Para reemplazar esas palabras invocaría la función dos veces de esta manera:

Código Javascript:

Ver original$('body').MiFuncion('hola').MiFuncion('adios')

Pero ¿y si quisiera llamar a la función una sola vez pero reemplazando todas las palabras?

Hay que tener en cuenta que en este ejemplo solo tengo dos palabras, en el caso real tendré más de 50.

zerokilled · #2 (**permalink**) 09/07/2011, 12:52

buenas,
en lugar pasar una palabra, debes pasar como argumento un patrón. dicho patrón debe contener todas las palabras a buscar. notese que en realidad es un string pero luego se convierte a expresión regular. por último, debes cambiar el string a reemplazar para en lugar de usar la variable str, usar una variable especial que representa la palabra pareada por la expresion: $&.

#3 (**permalink**) 09/07/2011, 20:26

Ok, gracias, lo tendré en cuenta.

#4 (**permalink**) 09/07/2011, 20:54

¿Y cómo paso ese string a expresión regular? ¿Podrías poner un ejemplo?

zerokilled · #5 (**permalink**) 09/07/2011, 21:15

ya lo tienes hecho, especificamente en la linea #2. es cuestion de que el string que le pases a la función, sea en forma de expresión regular. es decir, una expresión común y corriente, lo unico que en lugar de indicar como delimitador las barras diagonales, usarias comillas.
/expresion/ -> "expresion"

#6 (**permalink**) 10/07/2011, 07:50

¿Ya pero para reemplazarlo todo de una? ¿Cómo sería la función replace?

Porque lo único que se me ocurre es esto:

Código Javascript:

Ver originalfunction separar(srt) {
    var i=0;
    for (i=0;i<4;i++) {
        reemplazo = srt.split('&')[i];
        reemplazar(reemplazo);
    }
}
 
function reemplazar(srt) {
    var re = new RegExp(srt, "gi");
    $('body').html($('body').html().replace(re, 're' + srt));
}

Y luego lo invoco con:

Código HTML:

Ver original<body onclick="separar('Esto&Era&Uno&Que');">
<div>Esto</div>
<div>Era</div>
<div>Uno</div>
<div>Que</div>
</body>

Pero de esta forma estoy haciendo lo mismo, llamo a la función replace 4 veces mediante un loop.
Yo quiero que con llamarla una vez reemplace todo.

zerokilled · #7 (**permalink**) 10/07/2011, 08:49

estaba intentando en jquery, pero como no es lo mio pues no me voy a romper la cabeza. fijate el siguiente ejemplo basado solo en javascript.

Código:

function emot(str) { 
    var regex = new RegExp(str, 'g'); 
    this.innerHTML = this.innerHTML.replace(regex, '<img  src=images/$&.png />'); 
};

// se invocaría de la siguiente forma;
emot.call(document.body, "\\bsad\\b|\\bhappy\\b|\\bdizzy\\b");

Aijoona · #8 (**permalink**) 10/07/2011, 09:35

@zant95

Reemplazar texto de la estructura (elementos) es abrir la puerta a un monton de problemas, te recomendaría que solo lo uses para los nodos de texto.

#9 (**permalink**) 10/07/2011, 09:55

Muchas gracias zerokilled, funciona perfecto tu código, solo una pega.
Al reemplazar quiero usar la palabra "!sad" en vez de "sad", pero al añadirlo a la expresión regular deja de funcionar.
He probado de estas dos maneras.

Insertando ! sin más:

Código Javascript:

Ver originalemot.call(document.body, '\\b!sad\\b|\\b!happy\\b|\\b!dizzy\\b');

Usando la contrabarra:

Código Javascript:

Ver originalemot.call(document.body, '\\b\!sad\\b|\\b\!happy\\b|\\b\!dizzy\\b');

Pero en ambos casos no funciona. Disculpa, es que no controlo mucho de expresiones regulares.

Respecto a lo que dice Aijoona es cierto, usándolo en algunas páginas con Ajax da problemas.
Pero es un avance, combinando esto con lo que he aprendido de otros post creo que puedo solventar esto.

Saludos.

zerokilled · #10 (**permalink**) 10/07/2011, 10:34

en ese caso no te va a funcionar. lo que sucede es que el metadata \b -en el string \\b- es un ancla que le indica al motor RegExp desde donde debe iniciar la busqueda. en el caso de \b -literalmente conocido como word boundary o en español limite de palabras-, el puntero se ubica entre un carácter de la clase \w y \W. por ejemplo para que la expresión \b!happy coincida con un string, el string debería ser algo así x!happy. notese que no hay un espacio entre la equis y la exclamación. en fin, la expresión que habia mostrado fue como ejemplo. tu debes crear la expresión según sea como lo necesites.

nota aparte, en otro tema que esta relacionado a éste, te habia indicado que buscaras la manera de navegar por los nodos tipo texto para evitar destrozar el documento entre otros aspectos. @tredio te mostró un código que a mi entender hace lo que antes indique. es cuestión de que modifiques un poco el código incorporando algunas ideas de este tema.

#11 (**permalink**) 10/07/2011, 11:07

Muchas gracias, funciona con:

Código Javascript:

Ver originalemot.call(document.body, '!sad|!happy|!dizzy');

Pero ¿y si ahora quisiese quitarle el "!" a "$&" al leer la dirección "images/$&.png"?

Ese código que me pasó tredio lo adapté a lo que necesitaba y funcionaba, pero mientras trabajada la página no respondía durante unos segundos, por eso necesito resolver este problema, para mejorar ese código de tredio.

PD: estoy aprendiendo mucho sobre expresiones regulares, gracias ;)