Pesquisa Javascript por tag. Organizando uma pesquisa em uma página web em JavaScript (sem jQuery)
Há alguns dias recebi uma tarefa de teste da empresa para a vaga de desenvolvedor Front-end. Claro, a tarefa consistia em vários pontos. Mas agora falaremos apenas sobre um deles - organizar uma pesquisa de página. Aqueles. uma pesquisa banal usando o texto digitado no campo (análogo a Ctrl+F no navegador). A peculiaridade da tarefa é que é proibido o uso de quaisquer frameworks ou bibliotecas JS. Tudo está escrito em JavaScript nativo.
Procurando uma solução pronta Primeiro pensamento: alguém já escreveu exatamente isso, você precisa pesquisar no Google e copiar e colar. Então eu fiz. Em uma hora, encontrei dois bons roteiros que funcionavam essencialmente da mesma maneira, mas foram escritos de maneira diferente. Escolhi aquele cujo código entendi melhor e colei na minha página inicial.Se alguém estiver interessado, peguei o código.
O script funcionou imediatamente. Achei que o problema havia sido resolvido, mas descobri que, sem ofender o autor do roteiro, havia uma falha enorme nele. O script pesquisou todo o conteúdo da tag... e, como você provavelmente já deve ter adivinhado, ao procurar por qualquer combinação de caracteres que se assemelhasse à tag ou aos seus atributos, toda a página HTML iria quebrar.
Por que o script não funcionou corretamente? É simples. O script funciona da seguinte maneira. Primeiro, escrevemos todo o conteúdo da tag body em uma variável, depois procuramos correspondências com uma expressão regular (definida pelo usuário ao entrar no campo de texto) e então substituímos todas as correspondências pelo seguinte código:...correspondência encontrada...
E então substituímos a tag body atual pela nova recebida. A marcação é atualizada, os estilos mudam e todos os resultados encontrados são destacados em amarelo na tela.
Você provavelmente já entendeu qual é o problema, mas ainda explicarei com mais detalhes. Imagine que você digitou a palavra “div” no campo de pesquisa. Como você pode imaginar, existem muitas outras tags dentro do body, incluindo div. E se aplicarmos os estilos indicados acima a todos os “divs”, então não será mais um bloco, mas algo incompreensível, pois o design quebra. Como resultado, depois de reescrever a marcação, teremos uma página da web completamente quebrada. Parece assim.
Como você pode ver, a página está completamente quebrada. Resumindo, o roteiro acabou não funcionando e decidi escrever o meu próprio do zero, ao qual este artigo se dedica.
Então escrevemos um roteiro do zero. É assim que tudo parece para mim.
Agora estamos interessados no formulário de pesquisa. Eu circulei com uma linha vermelha.
Vamos descobrir um pouco. Eu implementei da seguinte maneira (HTML puro por enquanto). Formulário com três tags.
A primeira é para inserir texto;
A segunda é para cancelar a busca (desmarcar);
A terceira é para busca (destacar os resultados encontrados).
Portanto, temos um campo de entrada e 2 botões. Escreverei JavaScript no arquivo js.js. Vamos supor que você já o criou e conectou.
A primeira coisa que faremos é anotar as chamadas de função quando o botão de pesquisa e o botão cancelar forem clicados. Será assim:
Deixe-me explicar um pouco o que está aqui e por que é necessário.
Para o campo de texto damos id="text-to-find" ( usando esse id acessaremos o elemento do js).
Atribuímos ao botão cancelar os seguintes atributos: type="button" onclick="javascript: FindOnPage("text-to-find",false); retornar falso;"
- Tipo: botão
- Quando clicado, a função FindOnPage("text-to-find",false) é chamada. e passa o id do campo de texto, false
Atribuímos ao botão de pesquisa os seguintes atributos: type="button" onclick="javascript: FindOnPage("text-to-find",true); retornar falso;"
- Tipo: enviar (não é um botão porque aqui você pode usar Enter depois de inserir um campo, mas também pode usar um botão)
- Quando clicada, a função FindOnPage("text-to-find",true) é chamada. e passa o id do campo de texto, true
Você provavelmente notou mais um atributo: verdadeiro/falso. Iremos usá-lo para determinar qual botão foi clicado (cancelar pesquisa ou iniciar pesquisa). Se clicarmos em cancelar, passamos false . Se clicarmos em pesquisar, passamos true .
Antes de começarmos a escrever código, vamos dar um passo atrás e primeiro discutir como as coisas deveriam funcionar. Aqueles. Em essência, escreveremos um plano de ação. Portanto, precisamos que a página seja pesquisada ao inserir texto em um campo, mas tags e atributos não podem ser alterados. Aqueles. apenas objetos de texto. Como conseguir isso - tenho certeza de que existem muitas maneiras. Mas agora usaremos expressões regulares.
Portanto, a expressão regular a seguir procurará apenas o texto a seguir. como: ">… texto...(.*?)(.*?)(.*?)
