Buscador de texto en una página web con JavaScript

gbeltran · Mensaje por **gbeltran** » 14 Dic 2023, 12:03

Fuente ChatGPT Funciona!

Script de búsqueda en JavaScript mejorado que debería funcionar en la mayoría de los navegadores modernos. Este script utiliza la API window.find() para buscar en la página:

JavaScript
Código generado por IA. Revisar y usar cuidadosamente. Más información sobre preguntas frecuentes.

Código: Seleccionar todo

<!DOCTYPE html>
<html>
<body>

<h2>Buscador de texto en la página</h2>

<input type="text" id="textoBusqueda" placeholder="Escribe el término de búsqueda aquí">
<button onclick="buscar()">Buscar</button>

<script>
function buscar() {
  var terminoBusqueda = document.getElementById('textoBusqueda').value;
  window.find(terminoBusqueda);
}
</script>

</body>
</html>

Cuando haces clic en el botón “Buscar”, este script intentará buscar el término ingresado en el área de texto en la página web utilizando la función window.find(). Esta función moverá el foco del navegador a la primera aparición del término de búsqueda en la página.

Por favor, ten en cuenta que window.find() puede no ser compatible con todos los navegadores. Si estás utilizando un navegador que no es compatible con window.find(), es posible que debas buscar una biblioteca de JavaScript de terceros que proporcione una funcionalidad de búsqueda compatible con tu navegador.

gbeltran · Mensaje por **gbeltran** » 14 Dic 2023, 12:34

Y aquí mejorado, con botón de borrado de texto:

Código: Seleccionar todo

<!-- BUSCADOR INTERNO -->
<div>
<input type="text" id="textoBusqueda" placeholder="Escribe el término de búsqueda aquí">
<button onclick="buscar()">Buscador interno</button>&nbsp; <button onclick="borrarTexto()">Borrar texto</button>

<script>
function buscar() {
  var terminoBusqueda = document.getElementById('textoBusqueda').value;
  window.find(terminoBusqueda);
}
</script>
<script>
function borrarTexto() {
  document.getElementById('textoBusqueda').value = '';
}
</script>
</div>
<!-- BUSCADOR INTERNO -->

gbeltran · Mensaje por **gbeltran** » 14 Dic 2023, 13:18

Y con control de errores (simple) en el script de búsqueda:

Código: Seleccionar todo

<script>
function buscar() {
  var terminoBusqueda = document.getElementById('textoBusqueda').value;
  if (!window.find(terminoBusqueda)) {
    alert('La búsqueda no produjo resultados.');
  }
}
</script>

Todo el código quedaría así (funciona!):

Código: Seleccionar todo

<!-- BUSCADOR INTERNO -->
<div>
<input type="text" id="textoBusqueda" placeholder="Escribe el término de búsqueda aquí">
<button onclick="buscar()">Buscador interno</button>&nbsp; <button onclick="borrarTexto()">Borrar texto</button>

<script>
function buscar() {
  var terminoBusqueda = document.getElementById('textoBusqueda').value;
  window.find(terminoBusqueda);
}
</script>
<script>
function buscar() {
  var terminoBusqueda = document.getElementById('textoBusqueda').value;
  if (!window.find(terminoBusqueda)) {
    alert('La búsqueda no produjo resultados.');
  }
}
</script>
<script>
function borrarTexto() {
  document.getElementById('textoBusqueda').value = '';
}
</script>
</div>
<!-- BUSCADOR INTERNO -->

gbeltran · Mensaje por **gbeltran** » 19 Dic 2023, 09:44

En este código, he añadido un evento onkeydown al área de texto. Este evento se activa cuando se presiona una tecla mientras el área de texto tiene el foco. Dentro del evento, hay una condición que verifica si la tecla presionada fue Enter (cuyo código de tecla es 13). Si se presionó Enter, se llama a la función buscar(). Así queda (probado y perfectamente funcional!):

Código: Seleccionar todo

<!-- BUSCADOR INTERNO -->
<div>
<input type="text" id="textoBusqueda" placeholder="Escribe el término de búsqueda aquí" onkeydown="if (event.keyCode == 13) buscar()">
<button onclick="buscar()">Buscador interno</button>&nbsp; <button onclick="borrarTexto()">Borrar texto</button>

<script>
function buscar() {
  var terminoBusqueda = document.getElementById('textoBusqueda').value;
  if (!window.find(terminoBusqueda)) {
    alert('La búsqueda no produjo resultados.');
  }
}
</script>
<script>
function borrarTexto() {
  document.getElementById('textoBusqueda').value = '';
}
</script>
</div>
<!-- BUSCADOR INTERNO -->

Foros Puntocomunica

Buscador de texto en una página web con JavaScript

Buscador de texto en una página web con JavaScript

Re: Buscador de texto en una página web con JavaScript

Re: Buscador de texto en una página web con JavaScript

MEJORADO (YA FINAL) / Re: Buscador de texto en una página web con JavaScript