-2

Estou tendo problemas para pesquisar pelo conteúdo digitado em um input e não sei o que está errado, este é o código:

let g1=document.querySelector("#g")
let p1=document.querySelector("#p")
let arr = ['top', 'topper', 'bot', 'bottom', 'botão', 'test'];
let regex = new RegExp('g1');
let newArr = [];
// mesma coisa que for (let i = 0; i < arr.length; i++)
for (let i in arr) {
  // Verifica se o item da array bate com a regex.
  if (arr[i].match(regex)) {
    // Se bater com a regex vai colocar no final da nova array;
    newArr.push(arr[i]);

  }
}
console.log('newArr: ', newArr);
for (let i in newArr) {
p1.innerText += newArr[i] + '   ';
}
<input id="g" type="text">
<button type="submit">pesquisar</button>
<div id="p"></div>

1 Resposta 1

3

Ao fazer RegExp('g1'), você está criando um regex que busca pelo exato texto "g1", e não pelo valor do que foi digitado no input id="g".

Outro detalhe é que você só deve executar a busca depois que o botão for clicado. Da forma que você fez, o código executa logo que a página é carregada, e depois não executa mais.

Então uma forma de fazer é:

let arr = ['top', 'topper', 'bot', 'bottom', 'botão', 'test'];
// só executar a busca quando o botão for clicado
document.querySelector('#pesquisar').addEventListener('click', function() {
  let busca = document.querySelector("#g").value; // pegar o valor do input
  let regex = new RegExp(busca); // usar o valor do input na regex
  let newArr = [];
  for (let texto of arr) {
    if (texto.match(regex)) {
      newArr.push(texto);
    }
  }
  console.log('newArr: ', newArr);
  document.querySelector("#p").innerText = newArr.join(' ');
});
<input id="g" type="text">
<button id="pesquisar" type="submit">pesquisar</button>
<div id="p"></div>

Repare que usei join para juntar os resultados em uma única string, em vez do for. A diferença é que se você fizer uma busca que encontra algo, o valor do div é atualizado, mas se a busca seguinte não encontrar nada, o conteúdo do div não é apagado (pois ele não entrará no for). Já usando join, se o array for vazio, é retornada uma string vazia e o conteúdo é "apagado" caso nenhum resultado seja encontrado.


Outra forma de fazer a busca é usar filter em vez do for, que já retorna um array com os elementos que satisfazem a condição (ou um array vazio, se nenhum for encontrado):

let newArr = arr.filter(texto => texto.match(regex));

Um detalhe é que se forem digitados caracteres que possuem significado especial em regex (como o ., parênteses, colchetes, etc), isso pode resultar em uma expressão inválida e dará erro ao construir a RegExp. Neste caso, você deve usar alguma função de escape para colocar \ antes desses caracteres (aqui tem algumas alternativas).

Outro ponto de atenção é que criar uma regex com uma string que o usuário digitou requer alguns cuidados (leia aqui para mais detalhes).


Vale lembrar também que se você só está buscando pelos elementos que possuem o trecho digitado, nem precisa de regex. Basta usar includes, que verifica se uma string é substring de outra:

let arr = ['top', 'topper', 'bot', 'bottom', 'botão', 'test'];
// só executar a busca quando o botão for clicado
document.querySelector('#pesquisar').addEventListener('click', function() {
  let busca = document.querySelector("#g").value; // pegar o valor do input
  let newArr = arr.filter(texto => texto.includes(busca));
  console.log('newArr: ', newArr);
  document.querySelector("#p").innerText = newArr.join(' ');
});
<input id="g" type="text">
<button id="pesquisar" type="submit">pesquisar</button>
<div id="p"></div>

5
  • seria possível pegar os valores dos arrays conseguidos na busca e listá-los em uma outra pagina html que seria aberta apos o evento de click acontecer?
    – Yuri Cassu
    Commented 29/05/2020 às 2:08
  • @YuriCassu Aí já é o caso de fazer outra pergunta, detalhando melhor o que vc quer fazer (não esqueça de pesquisar no site antes, pois já devem ter perguntas sobre isso). Fazer outra pergunta é melhor porque vc tem mais espaço para detalhar e colocar o código que já tentou, além de ficar visível na página principal para todos os usuários (aqui nos comentários não tem espaço para explicar tudo e só eu vou ver) :-)
    – hkotsubo
    Commented 29/05/2020 às 11:10
  • Eu já estava pensando em fazer uma pergunta, mas acho que você pode me responder por aqui. Existe alguma diferença que se deve levar em consideração ao se usar o includes no lugar de regex (ou vice-versa) para o caso de match único? Algo relevante a performance, por exemplo? Commented 6/08/2021 às 20:12
  • 1
    @CmteCardeal includes é pra ver se uma string é substring de outra (case sensitive), seria isso que vc chama de "único"? Pra qualquer coisa mais complicada vc pode usar regex (dependendo do caso, pode ou não ser a melhor opção). Não testei, mas tenho quase certeza que regex é mais lenta em praticamente todos os casos, afinal ela tem que ser compilada e tem uma complexidade enorme por baixo dos panos. Mas escolher um ou outro depende do que se quer fazer...
    – hkotsubo
    Commented 6/08/2021 às 21:11
  • Era esse caso mesmo. Pelo que falou, provavelmente includes deve ser mais performatico, mas vou fazer uns benchmark pra confirmar. Commented 6/08/2021 às 22:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .