3

Venho praticando programação web há um tempo. No momento quero saber como faço um buscador de palavras estilo Ctrl+F do Chrome: ao digitar os caracteres ele já me aponta as palavras respectivas. Entendo que terei que usar o JavaScript.

Seria algo assim:

A busca seria apenas para uma página que estou implementando.

4
  • Bem-vindo ao StackOverflow Ian. Por favor, poste um trecho do código que você já tem para termos uma ideia melhor do problema, sugiro que leia esse artigo da ajuda do site: Como criar um exemplo Mínimo, Completo e Verificável. Commented 19/10/2018 às 16:38
  • Mas você tem algo feito, tentou ou chegou num determinado ponto e não conseguiu? Se sim, coloque o código aqui, editando sua pergunta para gente ver. Essa busca seria num site específico ou na web em geral? Falta vários detalhes em sua pergunta. Tente Esclarecer mais. Commented 19/10/2018 às 16:39
  • Editei a pergunta. como vc ve na imagem é apenas isso. creio que seja algo simples. Commented 19/10/2018 às 16:46
  • Além do tour já indicado em um comentário acima, uma dica: caso alguma resposta resolva seu problema marque-a como aceita. Veja como em i.sstatic.net/jx7Ts.png e porque em pt.meta.stackoverflow.com/questions/1078/…
    – user60252
    Commented 19/10/2018 às 17:39

2 Respostas 2

6

Usando as bibliotecas jquery.min.js e jquery.mark.min.js

Este código marca todas as palavras digitadas encontradas.

$(function() {
  $("input").on("input.highlight", function() {
    // Determina o termo de pesquisa
    var buscaPalavra = $(this).val();
    // Destacar o termo de pesquisa dentro de um contexto específico, no caso body
    $("body").unmark().mark(buscaPalavra);
  }).trigger("input.highlight").focus();
});
mark {
  background: orange;
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script>
<input type="text" value="palavras caracteres">

<h4>Buscar palavras na página web</h4>
<span style="color: rgb(80, 80, 80);">
Venho praticando programação web há um tempo. No momento quero saber como faço um buscador de palavras estilo Ctrl+F do Chrome: ao digitar os caracteres ele já me aponta as palavras respectivas. Entendo que terei que usar o JavaScript.</span>

Similar ao buscar do Google Chrome

    window.onload=function(){
      
$(function() {

  // the input field
  var $input = $("input[type='search']"),
    // clear button
    $clearBtn = $("button[data-search='clear']"),
    // prev button
    $prevBtn = $("button[data-search='prev']"),
    // next button
    $nextBtn = $("button[data-search='next']"),
    // the context where to search
    $content = $("body"),
    // Objeto jQuery para salvar elementos <mark>
    $results,
    // the class that will be appended to the current
    // focused element
    currentClass = "current",
    // top offset for the jump (the search bar)
    offsetTop = 50,
    // the current index of the focused element
    currentIndex = 0;

  /**
   * Jumps to the element matching the currentIndex
   */
  function jumpTo() {
    if ($results.length) {
      var position,
        $current = $results.eq(currentIndex);
      $results.removeClass(currentClass);
      if ($current.length) {
        $current.addClass(currentClass);
        position = $current.offset().top - offsetTop;
        window.scrollTo(0, position);
      }
    }
  }

  /**
   * Searches for the entered keyword in the
   * specified context on input
   */
  $input.on("input", function() {
  	var searchVal = this.value;
    $content.unmark({
      done: function() {
        $content.mark(searchVal, {
          separateWordSearch: true,
          done: function() {
            $results = $content.find("mark");
            currentIndex = 0;
            jumpTo();
          }
        });
      }
    });
  });

  /**
   * Clears the search
   */
  $clearBtn.on("click", function() {
    $content.unmark();
    $input.val("").focus();
  });

  /**
   * Next and previous search jump to
   */
  $nextBtn.add($prevBtn).on("click", function() {
    if ($results.length) {
      currentIndex += $(this).is($prevBtn) ? -1 : 1;
      if (currentIndex < 0) {
        currentIndex = $results.length - 1;
      }
      if (currentIndex > $results.length - 1) {
        currentIndex = 0;
      }
      jumpTo();
    }
  });
});


    }
    mark {
  background: yellow;
}

mark.current {
  background: orange;
}

.header {
  padding: 10px;
  width: 100%;
  background: #eee;
  position: fixed;
  top: 0;
  left: 0;
}

.texto {
  margin-top: 50px;
}
<script src="https://cdn.jsdelivr.net/g/[email protected],[email protected](jquery.mark.min.js)"></script>
<div class="header">
  Search:
  <input type="search" placeholder="Lorem">
  <button data-search="next">&darr;</button>
  <button data-search="prev">&uarr;</button>
  <button data-search="clear">✖</button>
</div>

<div class="texto">
  <h4>Buscar palavras na página web</h4>
<span style="color: rgb(80, 80, 80);">
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu ullamcorper orci, eget porttitor justo. Aliquam id sollicitudin elit. Nulla in sodales ipsum. Donec vulputate venenatis magna. Vestibulum sit amet leo lacinia, cursus lectus in, gravida
    metus. In ultricies sed tortor non pellentesque. Mauris quis tempor neque. Donec nec sagittis magna. Integer fringilla posuere metus eu mollis. Ut ac porta metus. Duis sed lacinia metus. Nunc malesuada iaculis risus vitae bibendum.
  </p>

  <p>
    Vivamus posuere condimentum leo eu hendrerit. Pellentesque placerat iaculis ante a rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu ipsum ac magna congue congue sed maximus tortor. Vivamus id odio elementum, vehicula nunc
    ut, efficitur felis. Nullam hendrerit velit libero, gravida porttitor tortor ullamcorper eu. Ut ut lectus non enim sagittis aliquam quis in orci. Donec a arcu eu eros cursus cursus. Donec dictum dignissim tellus, dictum egestas purus pellentesque
    sed.
  </p>

  <p>
    Vestibulum eu ornare urna, nec aliquam lectus. Phasellus eu odio sapien. Vestibulum eu turpis at lorem sagittis posuere. Quisque tellus nunc, facilisis id lacus nec, ornare rhoncus elit. Vivamus vehicula eros a condimentum venenatis. Sed orci massa, pulvinar
    sed erat nec, pellentesque suscipit leo. Mauris lobortis tincidunt nunc, sed tempus ex congue vitae. Curabitur lobortis mauris in ex malesuada, quis vehicula neque lobortis. Curabitur aliquam porttitor tellus eget tempus. Donec maximus tempus tristique.
    Aliquam tincidunt odio dictum, scelerisque ipsum ut, facilisis quam. Ut nec malesuada neque.
  </p>

  <p>
    Proin felis eros, tincidunt vitae scelerisque sit amet, dictum nec ante. Praesent tincidunt ac lacus nec elementum. Vivamus sed gravida purus, sed efficitur tortor. Nulla non molestie arcu. Sed tincidunt consectetur ligula sed lobortis. In non sapien
    ac urna lacinia placerat sed nec lacus. Aenean lobortis tincidunt sapien a hendrerit. Quisque eu turpis accumsan nisl blandit efficitur.
  </p>

  <p>
    Nam sit amet pellentesque est. Sed ligula turpis, ultricies sit amet mattis elementum, tristique non risus. Phasellus at congue ex. Proin nisi leo, vestibulum vitae accumsan in, imperdiet id dolor. Quisque at blandit nisl. Class aptent taciti sociosqu
    ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc eget metus augue. Morbi faucibus venenatis sapien, fermentum porttitor felis pharetra a. Nam interdum nibh tortor, quis maximus turpis blandit eget. Praesent in feugiat neque, sed
    vulputate quam. Curabitur erat quam, efficitur et congue quis, iaculis euismod libero. Quisque odio sapien, efficitur non mauris ac, tincidunt condimentum turpis.
  </p>

  <p>
    Maecenas dapibus aliquam vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent convallis viverra leo quis porta. Sed sit amet porttitor quam. Fusce nec risus non augue consectetur ultricies. Aliquam
    elit lorem, tincidunt ac dolor vel, vulputate consectetur ex. In hac habitasse platea dictumst. Sed eget nisl aliquam, cursus odio nec, commodo lorem. Nulla mollis tortor eu odio rutrum vulputate. Donec condimentum molestie mauris, nec sodales nisi
    volutpat aliquam. Nulla mollis libero sed nibh volutpat, ac mollis elit tincidunt. Vestibulum cursus velit vitae felis aliquam ultricies. Donec vehicula dictum feugiat. Vestibulum volutpat sollicitudin sagittis.
  </p>

  <p>
    Aliquam consequat, diam eu ullamcorper porta, diam eros rhoncus turpis, in rutrum sem diam a risus. Duis lacinia velit sed ante feugiat venenatis. Aenean orci leo, dictum non finibus nec, dignissim quis eros. Nullam sit amet orci ac purus blandit commodo
    sit amet eget neque. Sed pellentesque dictum tortor. Ut dui erat, tempus in odio in, aliquet convallis mi. Morbi efficitur justo ante, quis ultricies turpis suscipit ac. Sed sit amet nisl rutrum, laoreet mauris id, ullamcorper orci. In facilisis nisi
    eget fringilla imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi ut ultricies dui. Pellentesque elit urna, imperdiet sed congue eget, hendrerit sed urna.
  </p>

  <p>
    Proin vel hendrerit nulla. Vivamus vehicula nibh nec lorem blandit, quis aliquam ipsum suscipit. Nulla at vestibulum felis. Aenean ac nibh eget enim molestie pulvinar. Duis nulla justo, tristique id nulla nec, faucibus imperdiet arcu. In vel pretium dui,
    at lobortis sapien. Phasellus ullamcorper id enim eget dictum. Ut imperdiet rutrum est a rutrum. Curabitur eget dignissim tellus. Fusce tempus leo nisl, vitae auctor diam feugiat sit amet. Vestibulum accumsan justo eget odio imperdiet, consectetur
    efficitur ex dapibus.
  </p>

  <p>
    Sed pharetra odio a nibh pharetra rutrum. Suspendisse ut ullamcorper lectus. Donec ipsum mauris, congue et lobortis sit amet, ultricies ac tellus. Sed nisi risus, condimentum at varius quis, condimentum ac velit. In condimentum, magna sed ornare eleifend,
    dolor nulla mollis felis, quis feugiat elit turpis non ipsum. Etiam aliquam est imperdiet dolor rutrum, at varius leo sodales. Morbi quis iaculis metus.
  </p>

  <p>
    Maecenas auctor nec ligula ac luctus. Nam sit amet euismod mauris. Donec et diam sit amet eros efficitur tempor. Mauris non erat sit amet nunc interdum pulvinar. Sed luctus hendrerit justo eget pulvinar. Cras non arcu sed ligula faucibus pulvinar. Sed
    egestas risus nisl. Duis quis arcu tempus, cursus erat ac, gravida enim. Cras et condimentum ante. Nullam eleifend egestas velit, quis semper est imperdiet non. Donec quis purus varius, placerat mi et, dictum lorem. Sed quis finibus nisi, vitae molestie
    metus. Donec lobortis eros quis vestibulum vulputate.
  </p>.</span>
</div>

Veja mais em https://markjs.io/

1
  • Pow a solução do rapaz a cima solucionou mais ou menos o problema. pois o filtro aparecia em forma de botão. mais essa solução realmente foi a melhor. Ajudou muito. Muito grato Leo Caracciolo resolveu meu problema. Irei estudar mais a fundo javascript e plugins de Jquery para ajudar também quem esteja necessitando de problemas como esse. Commented 22/10/2018 às 14:30
0

Uma forma de fazer isso com vanilla seria usando expressões regulares

Fiz um exemplo no code pen: https://codepen.io/lwauke/pen/WaJVwv

Uma forma de fazer a expressão regular que você precisa seria usando os caracteres \b que representam limites, \w para representar caracteres alpha numéricos e * que seriam nenhuma ou n ocorrências.

O exemplo abaixo retorna apenas a primeira ocorrência:

// procura uma palavra que tenha a letra e
var pattern = /\b\w*e\w*\b/
'teste regex'.match(pattern)
// output: ["teste", index: 0, input: "teste regex", groups: undefined]

Use captura(parentêses) e a flag global para pegar todas as ocorrências

var pattern = /(\b\w*e\w*\b)/g
'teste regex'.match(pattern)
// output: ["teste", "regex"]

Use a função replace com $1 que irá referenciar sua captura:

var pattern = /(\b\w*e\w*\b)/g
'teste regex'.replace(pattern, '<span class="word">$1<span>')
// output: "<span class="word">teste<span> <span class="word">regex<span>"

(referência para consulta de expressões regulares).

1
  • 1
    Muito obrigado Lucas Wauke. isso também pode solucionar problemas semelhantes ao meu. Obrigado a todos! Commented 22/10/2018 às 14:33

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