1
resposta

Dúvida test()

Oi pessoal!

Fiz a aula sobre filtragem com expressões regulares, mas a verificação não funcionou com o test(). Testei com o match() e funcionou como deveria. Pensei que poderia ter a ver com o fato de eu ter colocado a verificação dentro do forEach(), diferente do professor que usou um laço for normal, mas não tenho certeza. Alguém poderia me explicar melhor o que está acontecendo?

Segue o código:

var filtro = document.querySelector("#filtrar-tabela");
var pacientes = document.querySelectorAll(".paciente");

filtro.addEventListener("input", function () {
    if (this.value != "") {
        pacientes.forEach(function (paciente) {
            var paciente = paciente;
            var tdNome = paciente.querySelector(".info-nome");
            var nome = tdNome.textContent;
            var re = new RegExp(filtro.value, "i");
            if (!nome.match(re)) {
                paciente.classList.add("invisivel");
            } else {
                paciente.classList.remove("invisivel");
            }
        });
    } else {
        pacientes.forEach(function (paciente) {
            var paciente = paciente;
            paciente.classList.remove("invisivel");
        });
    }
});
1 resposta

Olá Ítalo, tudo bem com você?

Peço desculpas pela demora no retorno.

O uso do método forEach() não irá gerar impactos no funcionamento da expressão regular. Conforme testes e simulações, no código apresentado os pacientes adicionados através do formulário não estão sendo reconhecidos pelo método forEach() devido à coleta dos pacientes utilizando o método querySelectorAll acontecer apenas uma vez no momento em que a página é carregada fazendo com que os novos usuários não sejam adicionados a variável pacientes.

Será necessário colocar a declaração e atribuição da variável pacientes dentro do eventoinput, desta forma sempre que ocorrer o evento de input acontecerá uma nova coleta de pacientes através do método querySelectorAll, reconhecendo os novos pacientes adicionados à tabela.

No arquivo filtra.js. Modifique o código, adicionando a variável pacientes ao evento input. Deixando como apresentado abaixo.

filtro.addEventListener("input", function () {
    var pacientes = document.querySelectorAll(".paciente");

    // Código do evento 

}

Após realizar a modificação listada acima, salve o arquivo filtra.js e abra o arquivo index.html no navegador. Adicione um novo paciente e verifique o funcionamento do filtro.

Quanto ao uso do método test() da expressão regular. Peço que realize uma nova tentativa de uso deste método. Lembrando que entre os parênteses devemos passar o campo que será feito a busca, neste caso o nome presente na td. O método test() deve ser chamado na expressão criada (re), conforme apresentado abaixo.

var nome = tdNome.textContent;
var re = new RegExp(filtro.value, "i");
if (!re.test(nome)) {
    paciente.classList.add("invisivel");
} else {
    paciente.classList.remove("invisivel");
}

Após realizar a modificação listada acima, salve o arquivo filtra.js e abra o arquivo index.html no navegador. Adicione um novo paciente e verifique o funcionamento do filtro.

Código completo com as mudanças descritas já aplicadas

var filtro = document.querySelector("#filtrar-tabela");

filtro.addEventListener("input", function () {
    var pacientes = document.querySelectorAll(".paciente");
    if (this.value != "") {
        pacientes.forEach(function (paciente) {
            var paciente = paciente;
            var tdNome = paciente.querySelector(".info-nome");
            var nome = tdNome.textContent;
            var re = new RegExp(filtro.value, "i");
            if (!re.test(nome)) {
                paciente.classList.add("invisivel");
            } else {
                paciente.classList.remove("invisivel");
            }
        });
    } else {
        pacientes.forEach(function (paciente) {
            var paciente = paciente;
            paciente.classList.remove("invisivel");
        });
    }
});

Não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Espero ter ajudado. Em caso de dúvidas estou à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!