Como implementar los botones Anterior y Siguiente

[TattyenInternet]

Hola a todos!!
Os comento un poco mi problema. Estoy realizando una barra de busqueda para Firefox, ya la tengo casi acabada, unicamente me falta implementar dos botones 'Anterior' y 'Siguiente' en JavaScript.
La funcionalidad de estos botones es la misma que para la barra de busqueda que aparece en Firefox cuando se pulsa Ctrl+F.

Si alguien pudiera decirme como puedo implementarlos en JavaScript se lo agradeceria mucho.

Muchas Gracias de antemano a todos.

[David]

Eso depende, ¿cuál es la función que estás usando para la búsqueda?

[TattyenInternet]

Te comento un poco. Tengo implementada una función que resalta todas las coincidencias de la palabra a la vez ( igual que el botón 'Resaltar todo' de la barra de búsqueda de Firefox).
Mi idea es usar esa función para de algún modo poder moverme de la palabra anterior a la siguiente.

Te pego la función:

function webfiltering_resaltar(bodyText,searchTerm,highligh tStartTag,highlightEndTag){//bodyText es la pagina original
//como no se pasar el color como argumento, lo inicializo en la funcion
if ((!highlightStartTag) || (!highlightEndTag)) {
highlightStartTag = "<font style='color:black; background-color:red;'>";
highlightEndTag = "</font>";
}
var newText = ""; //vble que almacenara el nuevo body con las palabras resaltadas
var i = -1;
var textoMinus = searchTerm.toLowerCase();
var bodyMinus = bodyText.toLowerCase();
while (bodyText.length > 0) { //recorremos toda la pagina buscando coincidencias
i = bodyMinus.indexOf(textoMinus, i+1);//almacenamos en i si hay coincidencia o no
if (i < 0) { //no hay coincidencia porque el índice devuelto es menor que 0
newText += bodyText; //añadimos el texto original al nuevo texto
bodyText = "";
} else { //si ha habido coincidencia, en este caso tendremos que resaltarla
webfiltering_numPalabrasResaltadas++;
if (bodyText.lastIndexOf(">", i) >= bodyText.lastIndexOf("<", i)) { //recorremos todo el texto
newText += bodyText.substring(0, i) + highlightStartTag + bodyText.substr(i, searchTerm.length) + highlightEndTag;
bodyText = bodyText.substr(i + searchTerm.length);
bodyMinus = bodyText.toLowerCase();
i = -1;//volvemos a poner la i a -1 para continuar buscando coincidencias
}
}
}
return newText;
}

[David]

Tal vez podrías guardar en una matriz las posiciones de coincidencias encontradas, y luego manejar con esa matriz los botones de Anterior y Siguiente.

[TattyenInternet]

Me ha gustado tu idea pero no se como obtener las posiciones que ocupan las palabras a resaltar dentro del texto.

Muchas Gracias por tu ayuda.

[David]

Si te fijas en el código de tu búsqueda en la variable i estás almacenando la posición cada vez que encuentra algo.

[TattyenInternet]

He tardado en contestar porque estaba tratando de implementar tu idea.
Lo máximo que he conseguido es meter las posiciones en un vector, porque con la i saco la fila pero no la columna. El problema es que con un vector, luego no consigo recuperar la posicion de la palabra y por tanto no se resalta.

Si puedes ayudarme con eso te lo agradeceria.
Muchas gracias de antemano.

[David]

A ver, te explico, fíjate bien en el código que tienes, lo que hace es resaltar todas las palabras, lo único que nos interesa es esta parte:

Código PHP:

  newText += bodyText.substring(0, i) + highlightStartTag + bodyText.substr(i, searchTerm.length) + highlightEndTag;  
   

Mira que lo único que necesitamos para hacer lo mismo con una sola palabra es la posición i, que como dijiste ya has guardado en un array. Ahora, otra cosa interesante sería además de agregar el tag de resalte añadir un ancla para que podamos ir a la palabra resaltada.