How to simulate a search (CTRL+F)?

Question

The scenario is this, I have a search field on a simple page with no database, and I need that when I write a word in this field an HTML search is done similar to what happens if I do a search with the CTRL+F browser.

Answer 1

You can use the library Mark.js.

Mark.js is a text marker written in Javascript. It can be used to dynamically mark custom search terms or regular expressions and offers integrated options such as diacritic support, separate word search, custom synonyms, support for iframes, custom filters, precision setting, custom element, custom class name.

$(function() {

  var $input = $("input[type='search']"),
    $clearBtn = $("button[data-search='clear']"),
    $prevBtn = $("button[data-search='prev']"),
    $nextBtn = $("button[data-search='next']"),
    $content = $(".content"),
    $results,
    currentClass = "current",
    offsetTop = 50,
    currentIndex = 0;

  /**
   * Saltar para o elemento correspondente ao 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);
      }
    }
  }

  /**
   * Procurar a palavra-chave inserida no
   * contexto especificado na entrada
   */
  $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();
          }
        });
      }
    });
  });

  /**
   * Limpar a pesquisa
   */
  $clearBtn.on("click", function() {
    $content.unmark();
    $input.val("").focus();
  });

  /**
   * Salto para a pesquisa seguinte e anterior
   */
  $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;
}

.content {
  margin-top: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js"></script>
<div class="header">
  Pesquisa:
  <input type="search" placeholder="arquitetura">
  <button data-search="next">&darr;</button>
  <button data-search="prev">&uarr;</button>
  <button data-search="clear">✖</button>
</div>

<div class="content">
  <p>
    Você já ouviu dizer que Arquitetura de software é um conceito usado pela Engenharia de software?<br>Pois bem, basicamente é isso, a Arquitetura de software nada mais é do que um conceito usado pela Engenharia de software para englobar as definições dos componentes de software, suas propriedades externas, e seus relacionamentos com outros softwares.<br>O que é arquitetura de software?<br>A arquitetura de software de um sistema consiste na definição dos componentes de software, suas propriedades externas, e seus relacionamentos com outros softwares. O termo também se refere à documentação da arquitetura de software do sistema. A documentação da arquitetura do software facilita: a comunicação entre os stakeholders, registra as decisões iniciais acerca do projeto de alto nível, e permite o reuso do projeto dos componentes e padrões entre projetos.<br>De onde vem o conceito?<br>O cargo de “Arquiteto de Software” como empregado hoje na indústria do software é mais uma herança ruim da comparação entre desenvolvimento de software e construção civil. Nesta última, o arquiteto faz o projeto mas, em geral, não suja as mãos no cimento.<br>Um fato interessante é que apenas empresas grandes, com orçamentos folgados (que, em geral, desperdiçam tempo e dinheiro com futilidades e becos sem saída) costumam oferecer o cargo de arquiteto de software. Eles geralmente ficam em equipes de arquitetura, longe das equipes que “sujam” as mãos no código no dia-a-dia. Ora, isso, por si só, criam as "Torres de Marfim" e uma certa animosidade latente entre as diferentes equipes – que deveriam trabalhar em conjunto todos os dias.<br>Não faz sentido (e não é eficiente) ter equipes de arquitetura separadas, sem contato direto e constante com as equipes de desenvolvimento. Também não faz sentido empregar arquitetos de software que só planejam e não participam da execução diariamente.<br>Usando a já batida metáfora do desenvolvimento de software como jardinagem é fácil perceber que estamos longe do processo utilizado, por exemplo, na construção civil ou na indústria automobilística. Não é possível projetar todo o software com antecedência, como um prédio ou um carro, comprar a matéria-prima, contratar os operários e implementá-lo praticamente sem desvios. O projeto é o software e o software é o projeto.<br>O que é engenharia de software?<br>Engenharia de software é uma área da computação voltada à especificação, desenvolvimento e manutenção de sistemas de software, com aplicação de tecnologias e práticas de gerência de projetos e outras disciplinas, visando organização, produtividade e qualidade<br>

Friedrich Ludwig Bauer foi o primeiro dizendo:<br>

"Engenharia de Software é a criação e a utilização de sólidos princípios de engenharia a fim de obter software de maneira econômica, que seja confiável e que trabalhe em máquinas reais".<br>O próprio significado de engenharia já traz os conceitos de criação, construção, análise, desenvolvimento e manutenção.<br>
O termo foi criado na década de 1960 e passou a ser utilizado oficialmente em 1968 na NATO Science Committee. Sua criação surgiu numa tentativa de contornar a crise do software e dar um tratamento de engenharia (mais sistemático e controlado) ao desenvolvimento de sistemas de software complexos. Um sistema de software complexo se caracteriza por um conjunto de componentes abstratos de software (estruturas de dados e algoritmos) encapsulados na forma de procedimentos, funções, módulos, objetos ou agentes e interconectados entre si, compondo a arquitetura do software, que deverão ser executados em sistemas computacionais.
  </p>
  fonte:<a href='/a/25406/137387'>Qual a diferença de arquitetura e engenharia de software?</a>
</div>