Buscador en páginas

Solución

La función para procesar la búsqueda puedes ponerla en la sección head de la página

<script>

function buscarTxt(texto){

var iter = document.createNodeIterator(document.body,NodeFilter.SHOW_TEXT);

var actual, marca = "~";

var cuerpo = document.body;

var buscar = new RegExp("("+texto+")", 'ig');

var reempl = new RegExp(marca+"("+texto+")"+marca, 'ig');

cuerpo.innerHTML=cuerpo.innerHTML.replaceAll(/<enc[^>]*>(.*?)<\/enc>/ig, "$1");

if(texto!=''){

    var pos = cuerpo.innerText.search(buscar);

    if(pos>=0){

        while (actual = iter.nextNode()) {

            actual.data = actual.data.replaceAll(buscar, marca+'$1'+marca);

            }

        cuerpo.innerHTML=cuerpo.innerHTML.replaceAll(reempl, '<enc style="background:#deb1b1;">$1</enc>');

        }

    }

}

</script>

La parte HTML de la página sería algo como esto

<body>

<form name="form1" method="post" action="">

<input type="text" name="texto">

<input type="button" name="Button" value="Buscar" onclick="buscarTxt(this.form.texto.value)">

</form>

<p>Aqui debe ir el texto de la página que es donde buscaremos la palabra que se coloque en el input del formulario.</p>

<p>La búsqueda es completa, se destacan todas las palabras buscadas</p>

</body>

Explicación

Cuando un visitante desea buscar un texto determinado en nuestra página puede usar como sabes una de las opciones del menú Edición del navegador.

Pero ¿no sería interesante ofrecerle un pequeño formulario para realizar esa búsqueda?. Pues este pequeño script te permite hacerlo.

Se trata de usar búsquedas y reemplazos mediante strings y expresiones regulares.

El argumento que se envía a la función es el texto buscado. Con este texto se genera una expresión regular con flags para no diferencias mayúsculas de minúsculas y para hacer una búsqueda global.

(Linea2) Se crea un iterador de nodos para recorrer el dom por los nodos de texto.

Limpiamos el cuerpo del documento por si se ha usado antes una búsqueda (linea 7)

Si existe el término de búsqueda en el texto de la la página (linea 10) se recorre un bucle por los nodos de texto y se marcan las concidencias rodeando el término encontrado con ~

Coloca las palabras marcadas en una etiqueta no estandard, en este caso he puesto enc, pero puede ser cualquiera. Se usa para evitar interferir con etiquetas que puedan existir en la página. Esta operación se hace con replaceAll() y una expresión regular (linea 14)

El elemento añadido contiene atributos de estilos, en este ejemplo he puesto fondo rojizo para destacar las palabras halladas.

Si el primer elemento no está visile se hace un scroll hasta que sea visible.

 

Como lo uso

En esta página de ejemplo sólo se ha colocado un formulario con un campo de texto y un botón para comenzar la búsqueda.

El evento onclick en este botón tiene vinculada la función buscarTxt, por lo que al pulsarlo llamará a esta función usando como argumento el valor contenido en el campo de texto.

Lógicamente la página deberá contener texto donde realizar la búsqueda.