5

He hecho un filter/search básico en javascript, de la siguiente manera

searchInp.addEventListener("input", () => {
  document.querySelectorAll(".searchSec").forEach(el => {
    if (searchInp.value == "") {
      el.removeAttribute("style");
    } else {
      if (el.innerHTML.toLowerCase().search(searchInp.value.toLowerCase()) == -1) {
        el.style.display = "none";
      }
    }
  });
});
<h1>Search</h1>
<p><hr/></p>
<p class="searchSec">Java</p>
<p class="searchSec">Python</p>
<p class="searchSec">C</p>
<p class="searchSec">CSharp</p>
<p class="searchSec">PHP</p>
<p class="searchSec">HTML</p>
<p><hr/></p>
<p><input id="searchInp" placeholder="Escribe para buscar" /></p>

Funciona correctamente, el problema, es que quiero resaltar las coincidencias de lo que escribe el usuario con el texto del elemento

(Ejemplo: Valor input = Ja ; Resultado HTML = Java)

Lo he intentado hacer de la siguiente manera, pero sin éxito

searchDocs.addEventListener("input", () => {
    if (searchDocs.value.replace(" ", "") == "") {
        document.querySelectorAll(".docSection").forEach(el => {
            el.innerHTML = el.innerText;
            el.removeAttribute("style");
        });
    } else {
        document.querySelectorAll(".docSection").forEach(el => {
            if (el.innerText.toLowerCase().search(searchDocs.value.toLowerCase()) == -1) {
                el.style.display = "none";
                el.innerHTML = el.innerText;
            } else {
                let inner = el.innerText.split(" ");
                let val = searchDocs.value.split(" ");
                el.innerHTML = "";
                for (let i = 0; i < inner.length; i++) {
                    if (inner[i].search(val[i]) !== -1) {
                        inner[i] ="<strong>" + inner[i] + "</strong>";
                    }
                    el.innerHTML += inner[i] + " ";
                }
            }
        });
    }
});
<h1>Search</h1>
<p><hr/></p>
<p class="docSection">Java</p>
<p class="docSection">Python</p>
<p class="docSection">C</p>
<p class="docSection">CSharp</p>
<p class="docSection">PHP</p>
<p class="docSection">HTML</p>
<p><hr/></p>
<p><input id="searchDocs" placeholder="Escribe para buscar" /></p>

0

1 respuesta 1

6

Se puede resolver con replace de un modo relativamente sencillo, usando una expresión regular que ignore mayúsculas y capture el grupo encontrado para añadirle la etiqueta deseada.

Incluso simplificando el código he conseguido que al borrar caracteres se amplíe la búsqueda de nuevo, a veces menos es más :)

const input = document.getElementById("searchDocs");
input.addEventListener("input", () => {
  const value = input.value;
  const sections = document.querySelectorAll(".docSection");
  sections.forEach(el => {
    el.innerHTML = el.innerText;
    el.removeAttribute("style");
  });
  if (value.trim() !== "") {
    sections.forEach(el => {
      if (!el.innerText.toLowerCase().includes(value.toLowerCase())) {
        el.style.display = "none";
      } else {
        el.innerHTML = el.innerText.replace(new RegExp(`(${value})`,"i"), "<strong>$1</strong>");
      }
    });
  }
});
<h1>Search</h1>
<p><hr/></p>
<p class="docSection">Java</p>
<p class="docSection">Python</p>
<p class="docSection">C</p>
<p class="docSection">CSharp</p>
<p class="docSection">PHP</p>
<p class="docSection">HTML</p>
<p><hr/></p>
<p><input id="searchDocs" placeholder="Escribe para buscar" /></p>

Explico un poco el truco:

El usuario escribe por ejemplo "p", así que lo queremos es buscar la primera coincidencia, sin importar mayúsculas o minúsculas, y ponerla en negrita. Así que construimos una regex que capture esa "p" en un grupo:

let regex = /(p)/i; // i de "ignore case", ignorar si es mayúsculas

Pero como esa p es una parte variable, usamos el constructor equivalente:

const value = "p";
const regex = new Regexp("(" + value + ")","i");

Los paréntesis capturan lo encontrado en un grupo, que luego podemos referenciar como grupo 1 o, en la clásica notación de regex, $1:

innerText.replace(regex, "<strong>$1</strong>");
0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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