1
respuesta

Practicando un poco con expresiones regulares!!!

Excelente lo realizado, no he podido pensar en alguna solución que funcione, así que mire la opinión del instructor!

// ------------- crear la variable donde vamos a ubicar la clase del html--------->

var campoFiltro= document.querySelector("#filtrar-tabla")

campoFiltro.addEventListener("input", function(){ // crear el capturador de eventos para la variable
    var pacientes = document.querySelectorAll(".paciente"); // capturar la lista de pacientes

    if(this.value.length > 0) { // creamos la condicion respecto del valor del objeto y lo comparamos con el campo vacio del input

        //<------------------ creamos el bucle que recorrera los nombres----->
        for(var i = 0; i< pacientes.length; i++) {
            var paciente = pacientes[i];
            var tdNombre = paciente.querySelector(".info-nombre");// estas 3 variables van creadas una en funcion de la que sigue para que sean llamadas 
            var nombre = tdNombre.textContent;
            //----------creamos la expresion regular para comparar el valor ingresado con el teclado 
            // se le pasan los parametros (padro, es el elemento buscado y la flag, representa la forma de la busqueda)
            var expresion = new RegExp(this.value, "i") // las RegExp nos permite comparar lo ingresado en este caso con lo que ya esta

            if(!expresion.test(nombre)) { // le decimos a la condicion que compare la expresion ingresada con el nombre
                paciente.classList.add("invisible"); // agregamos la clase de css
            }else{
                paciente.classList.remove("invisible");
            }
        }
        // si no cumple con la condicion de arriba, le pedimos que remueva la clase invisible
    } else {
        for(var i = 0; i< pacientes.length; i++) { 
            var paciente = pacientes [i]
            paciente.classList.remove("invisible")
        }
    }
})
/* 
<-------ESTA ES OTRa OPCION PARA NO UTILIZAR EXPRESIONES REGULARES----------->
<-------INCLUSO COMPARA TODO EN MINUSCULA------------------->

var comparar = nombre.substring(0, this.value.length);
var compararMinuscula = comparar.toLowerCase();
var valorDigitadoMinuscula = this.value.toLowerCase();
if(!(valorDigitadoMinuscula  == compararMinuscula )){
paciente.classList.add("invisible");
} else {
paciente.classList.remove("invisible");
} 
*/ 
1 respuesta

Hola Marcos, espero que esté bien.

Gracias por compartir tu código con nosotros, contínua con tu estudos :)

Si tienes alguna pregunta sobre el contenido de los cursos, estaremos aquí para ayudarte.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios