Buscador en páginas
Solución
<script>
function buscarTxt(texto){
let cuerpo = document.body;
let iter = document.createNodeIterator(cuerpo,NodeFilter.SHOW_TEXT);
let actual, marca = "~";
let buscar = new RegExp("("+texto+")", 'ig');
let reempl = new RegExp(marca+"("+texto+")"+marca, 'ig');
let txt = cuerpo.innerHTML, reemp;
cuerpo.innerHTML = txt.replaceAll(/<enc[^>]*>(.*?)<\/enc>/ig, "$1");
if(texto!=''){
let pos = cuerpo.innerText.search(buscar);
if(pos>=0){
while (actual = iter.nextNode()) {
actual.data = actual.data.replaceAll(buscar, marca+'$1'+marca);
}
txt = cuerpo.innerHTML;
reemp = '<enc style="background:#deb1b1;">$1</enc>'
cuerpo.innerHTML = txt.replaceAll(reempl, reemp);
document.querySelector('enc').scrollIntoView();
}
else{
alert(texto+" no encontrado");
}
}
}
</script>
<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>
<p>Si no está visible</p>
<p>Se producirá un scroll hasta la primera coincidencia</p>
<p>Como puedes ver si buscas la última palabra de este texto la fomrada con las letras "d e s p l a z a r"</p>
<p>.</p><p>.</p><p>.</p><p>.</p><p>.</p>
<p>.</p><p>.</p><p>.</p><p>.</p><p>.</p>
<p>la última palabra de este texto: desplazar</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, siempre que no interfiera 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. Para esto se usa el método scrollIntoView() sobre el primer elemento enc
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.