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>