0

En este ejemplo puedo encontrarlas, más no contar cuántas ¿Cómo puedo hacerlo?

var s = document.querySelector(".search");
var sb = document.querySelector(".search-button");

var ts = document.querySelector(".text-search");


sb.onclick = function() {

var a = s.value;

var b = ts.innerText;

var r = b.indexOf(a);

if (r != -1) {

console.log("Exit");

}

}
<input class="search" type="text" placeholder="Buscar">
<button class="search-button">Buscar</button>


<span class="text-search">Esto es un texto cualquiera, donde cualquiera puede ser la opción.</span>

2
  • ¿Se supone que la palabra que coloques en el input la buscará en el texto que se muestra y si no la encuentra mostrará Exit? Porque probé el código y al menos a mi no me funcionó -o no como esperaba, en cualquier caso muestra Exit-. Sería bueno que editaras tu pregunta para explicar mejor lo que quieres hacer y el porqué el código que colocas no te funciona. ¿Te da algún error? ¿O simplemente no lo has intentado? el 5 oct. 2021 a las 21:00
  • También es importante aclarar que el método .indexOf() retorna el índice del primer elemento -si existe- por lo que si quieres que funcione para una o más incidencias deberás buscar otra solución o replantear el uso del mismo para realizar la búsqueda (la propia documentación proporciona un ejemplo para encontrar todas las incidencias de un elemento dentro de un array). el 5 oct. 2021 a las 21:04

4 respuestas 4

0

Lo que se me ocurre ahorita es que hagas uso de la función split,OJO este método no creo que sea optimo a la hora que sea texto enorme, pero para textos pequeños es demaciado util

sb.onclick = function() {
let texto_buscado=$(".search").val();
let texto_buscar=$(".text-search").innerHtml.split(" ");
let total_encontrados=0;
$.each(texto_buscar,function(value)
{
if(value.tolowercase()===texto_buscado.tolowercase())
{
total_encontrados++;
}
});
console.log('Se han encontrado '+total_encontrados +'coincidencias');
}
}
1
  • 1
    Creo que puedes lograr el mismo comportamiento haciendo uso exclusivo de JavaScript y dejar de lado el uso de JQuery ya que ello implicaría una dependencia (que no se menciona). Por otro lado lo que mencionas es correcto, para textos pequeños puede ser una buena opción, no así para textos grandes. el 5 oct. 2021 a las 21:15
0

La lógica que yo sugeriría sería pedir la palabra a buscar y luego ejecutar un script para separar cada palabra de la frase dada y cada una de esas palabras compararla directamente con la frase a buscar.

Te dejo el ejemplo:

function buscarPalabras()
{
  let palabra_busqueda = document.getElementById("busqueda-palabra").value.trim(),
      frase_a_buscar = document.getElementById("frase-a-buscar").innerHTML.trim();
      if ( palabra_busqueda.length <= 0 )
      {
        alert("Favor de ingresa una palabra a buscar")
        return ;
      }
      // recorremos cada palabra de la frase
      let palabras_frase = frase_a_buscar.split(" "),
          coincidencias = [];
      for ( let p = 0; p < palabras_frase.length - 1; p++ )
      {
        if ( palabras_frase[p] === palabra_busqueda )
        {
          coincidencias.push(palabras_frase[p]);
        }
      }
      mostrarResultados(coincidencias,palabra_busqueda,frase_a_buscar)
}

function mostrarResultados(coincidencias = [], palabra_busqueda = '', frase_a_buscar = '')
{
  document.getElementById("resultados").innerHTML = `
  Palabra a buscar: <strong>${palabra_busqueda}</strong><br>
  Coincidencias: <strong>${coincidencias.length}</strong><br>`;
}
<label>Ingresa la palabra a buscar en la siguiente frase:</label>
<br>
<input id="busqueda-palabra" type="text" placeholder="Ej: guerra">
<br>
<p>Frase:</p>
<div id="frase-a-buscar" style="font-style:italic;font-size:20px;font-weight:bold;">El mundo no está en peligro por las malas personas sino por aquellas que permiten la maldad (Albert Einstein)</div>

<hr>

<button onclick="buscarPalabras()" type="button">Buscar palabras</button>

<hr>

<div id="resultados">
</div>

0

Te recomiendo que uses split() y luego cuentes así :

var s = document.querySelector(".search");
var sb = document.querySelector(".search-button");

var ts = document.querySelector(".text-search");


sb.onclick = function() {

var a = s.value;

var b = ts.innerText;
let arr = b.split(' ');

let resultado = arr.reduce((conteo = 0, palabra) => {
      if(palabra === a) {
        conteo = conteo + 1
      }
      return conteo
    }, 0)


console.log(resultado);



}
<input class="search" type="text" placeholder="Buscar">
<button class="search-button">Buscar</button>
<span class="text-search">Esto es un texto cualquiera, donde cualquiera puede ser la opción.</span>

Tiene sus detalles pero creo que de aquí podrías afinarlo

0

Puedes lograr el mismo funcionamiento con expresiones regulares, para evitar tener que separar el texto en palabras. Para ello toma como base esta pregunta en la que se cuestiona cómo formar una expresión regular "dinámica" para reemplazar ciertos valores. En este caso no ocupas reemplazar valores pero si contarlos, por lo que entonces en lugar de recurrir al método .replace(), utilizas el método .match() el cual se usa para obtener todas las ocurrencias de una expresión regular dentro de una cadena.

Para saber si hubo o no ocurrencias, obtienes la longitud (utilizando el flag g devuelves un array) del resultado para saber el número de ocurrencias que ha habido.

La ventaja de esto, es que funciona no solo con palabras, sino que también puede funcionar con letras o frases completas.

Nota: Actualmente si intentas buscar un punto (.) observarás un comportamiento inesperado. Si quieres permitir el uso de caracteres especiales, entonces tendrás que escaparlos antes de construir la expresión regular, tal como se indica aquí.

const s = document.querySelector(".search");
const sb = document.querySelector(".search-button");
const ts = document.querySelector(".text-search");


sb.onclick = function () {
  const valorABuscar = s.value;
  if (!valorABuscar) {
    return alert('Introduzca al menos un valor');
  }

  const patron = new RegExp(`${valorABuscar}`, 'g')
  const texto = ts.innerText;
  const resultado = texto.match(patron);

  if (resultado) {
    alert(`Se encontró ${resultado.length} coincidencia(s).`);
  } else {
    alert('Sin resultados.')
  }
}
<input class="search" type="text" placeholder="Buscar">
<button class="search-button">Buscar</button>
<span class="text-search">Esto es un texto cualquiera, donde cualquiera puede ser la opción.</span>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.