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

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.