problema con expresiones regulares URGENTE

[elusuario_charaz]

Hola, necesito ayuda en un problema que tengo con expresiones regulares. Tal vez sea una tonteria de hacer, pero estuve buscando por todos lados y todavia no pude dar con la solucion.

Tengo un input text y un iframe. El input text sirve para escribir el texto que se quiere buscar y el iframe sirve para contener el texto en el cual se quiere buscar.

La busqueda debe hacerse sin diferenciar mayusculas y minusculas, y una vez encontrado el texto, este debe ser resaltado de alguna manera.

El metodo que estoy utilizando para resaltar el texto es mediante el encierro del mismo entre 2 etiquetas span, a las que les asigno un background-color. Para hacer esto, reemplazo el texto encontrado por una etiqueta de apertura span + el texto escrito en el input text + una etiqueta de cierre span.

El problema es que por ejemplo, si yo escribo "hola" en el input box, todas las cadenas "Hola" (con H mayuscula) van a ser reemplazadas por <span>hola</span>, cuando en realidad necesito que sean reemplazadas por <span>Hola</span>.

Ojala me haya explicado bien, porque necesito solucionarlo cuanto antes.

Saludos y gracias.

[zerokilled]

¿qué metodo usas para hacer el reemplazo? ¿utilizas el metodo replace de los string? si es asi, ¿como lo estas usando?

[elusuario_charaz]

Si, uso el metodo "replace". Este es el codigo principal de la funcion (cambie el iframe por un div):

Código:

// compruebo si hay alguna ocurrencia de la cadena
var patron = new RegExp(obj.value, "g");
var inner = document.getElementById("txt").innerHTML;
var cantidad = patron.test(inner);

// si la hay, hago el reemplazo
if (cantidad) {
    var match = new RegExp(obj.value, "gi");
    var replaced = "";

    var boldText = "<span style=\"background-color:yellow; font-weight:bold;\">" + obj.value + "</span>";
    replaced = inner.replace(match, boldText);
    document.getElementById("txt").innerHTML = replaced;
}

[zerokilled]

la solucion es simple. en lugar de pasar un string al segundo argumento de replace, pasale una funcion anonima, o nombrada si asi lo deseas. esta funcion recibira una cantidad de parametros de acuerdo al patron match. para tu caso, el mas importante es el primer parametro que es el texto pareado por el patron. dentro de esta funcion compones el string como lo quieres juntamente con el primer argumento de la funcion. y finalmente esa composicion la devuelves con return. mas informacion, https://developer.mozilla.org/en/Cor...as_a_parameter

edit @ 20:49,
o bien no es necesario una funcion. tambien puedes usar unos identificadores especiales cuando el segundo argumento de replace es un string. seria cuestion de componer el string en el segundo argumento y utilizar el identificador $& el cual significa 'lo pareado por el patron'.

Código:

string.replace(patron, "<tags>$&</tags>")

[elusuario_charaz]

Hice esto:

Código:

var replaced = inner.replace(match, "<span style=\"background-color:yellow; font-weight:bold;\">" + lastMatch + "</span>");
document.getElementById("txt").innerHTML = replaced;

Pero me dice que lastMatch no esta definido :(.

[zerokilled]

¿de donde sacastes lastMatch? porque en tu codigo no lo veo, por eso te dice que no esta definido. ¿probastes como te dije con el identificador $&?

[elusuario_charaz]

En realidad me equivoque, tendria que haber puesto RegExp.lastMatch.

Al parecer, $& es el nombre abreviado de RegExp.lastMatch; sin embargo, puse esto y no funciono:

Código:

var replaced = inner.replace(match, "<span style=\"background-color:yellow; font-weight:bold;\">" + RegExp.lastMatch + "</span>");

Mientras que esto si funciono:

Código:

var replaced = inner.replace(match, "<span style=\"background-color:yellow; font-weight:bold;\">$&</span>");

Muchas gracias por tu ayuda, solo me queda la duda de por que la 1era linea no funciono y la 2da si.

Saludos!

[zerokilled]

la verdad que para poder responder a tu duda tienes que verlo con un depurador porque se me hace muy dificil explicarlo, pero tratare. tarde un tiempo porque tenia que investigar antes de darte una respuesta, aparte que mi libro tampoco habla acerca de dicha propiedad. primero mencionar que no estoy seguro si la propiedad lastMatch esta obsoleta en favor de $&, o si es al reves. a mi parecer, $& es obsoleto en favor de lastMatch. [http://www.nusphere.com/kb/jscoreref/deprecat.html]

preambulo
sucede que lastMatch esta destinado a funcionar con los metodos de expresiones regulares: exec y test. si se intenta emplear con cualquiera de los metodos de string (match, search, replace, split, ...) produce resultados inconsistentes.

un ejemplo funcional
veamos un ejemplo con metodos de RegExp. en el ejemplo se evaluaran todas las palabras del string.

Código:

var str = "Lorem etiam luctus justo mi.";
var reg = /\w+/g, array = [];
while(reg.test(str))array.push(RegExp.lastMatch);
alert(array.toString());
// array consiste de los valores; 
// "Lorem", "etiam", "luctus", "justo", "mi";

¿que sucede si lo aplicamos a replace?

Código:

var str = "Lorem etiam luctus justo mi.";
var reg = /\w+/g;
alert(str.replace(reg, RegExp.lastMatch));

// el string devuelto no es literalmente como se muestra a continuacion;
// para proposito de percepcion se reemplazara ciertos caracteres al;
// equivalente hexadecimal;
// "\x0A \x0A \x0A \x0A \x0A."

alert(RegExp.lastMatch);
// muestra el string "mi";

¿por qué sucede?
los metodos exec y test tienen una particularidad que los metodos de string no comparten. se trata de la habilidad de usar la expresion multiples veces y al mismo tiempo devolver resultados diferentes. un ejemplo lo vimos en la condicion del bucle while. sin embargo, para que esta habilidad se pueda dar es necesario que la expresion sea global. en cada invocacion la expresion asigna un valor a lastMatch. en el caso de los metodos de String, se podria decir que la expresion es aplicada una sola vez y al final de la aplicacion la expresion asigna el valor a lastMatch.

el identificador $&
en las referencias que encontre, $& es el nombre corto para la propiedad lastMatch. de hecho, otra forma que se puede escribir es RegExp['$&']. cuando este se emplea en un string, como el caso del metodo replace, $& siempre devuelve el pareo mas reciente. ahora bien, no confundirlo con RegExp['$&'] ya que este es un sinonimo de lastMatch. si usaramos RegExp['$&'] en replace volvemos al mismo resultado como en los ejemplos anteriores.