Estoy tratando de buscar varias cadenas para cada palabra de una cadena de búsqueda y solo muestro las cadenas que contienen cada palabra.
Hasta ahora logré crear una herramienta de búsqueda que busca la cadena como un todo, pero me gustaría buscar cada palabra individualmente, tal vez dividiendo la cadena de búsqueda en una serie de cadenas.
En el siguiente ejemplo, la búsqueda de "primero" muestra el primer párrafo, pero la búsqueda de "Este primero" no muestra nada, porque los párrafos se buscan por el término completo en lugar de las palabras "Este" y "primero" individualmente.
¿Cómo puedo lograr eso?
let search = document.getElementsByTagName("input")[0]; search.addEventListener("input", function() { let s = search.value; for (let e of search.nextElementSibling.children) { if (e.textContent.search(s) == -1) { e.style.display = "none"; } else if (e.style.display == "none") { e.style.display = "block"; } } }); <html> <head> <title>Title</title> </head> <body> <input type="search"> <div> <p>This is the first string.</p> <p>This is the second string.</p> <p>This is the third string.</p> </div> </body>Puede dividir la cadena de búsqueda en el espacio y usar some e includes para determinar si alguna de las palabras está en cada cadena
let search = document.getElementsByTagName("input")[0]; search.addEventListener("input", function() { let s = search.value.split(" "); for (let e of search.nextElementSibling.children) { if (!s.some(x => e.textContent.includes(x)) ) { e.style.display = "none"; } else if (e.style.display == "none") { e.style.display = "block"; } } }); <html> <head> <title>Title</title> </head> <body> <input type="search"> <div> <p>This is the first string.</p> <p>This is the second string.</p> <p>This is the third string.</p> </div> </body>Puede dividir el texto por espacios en blanco y verificar si todas las palabras están contenidas con Array#every junto con Array#includes .
let search = document.querySelector("input"); search.addEventListener("input", function() { let s = search.value.split(/\s+/); for (let e of search.nextElementSibling.children) { let words = e.textContent.split(/\s+/); if (!s.every(x => words.includes(x))) { e.style.display = "none"; } else { e.style.display = "block"; } } }); <input type="search"> <div> <p>This is the first string.</p> <p>This is the second string.</p> <p>This is the third string.</p> </div>