Adicionar palavra-chave de pesquisa destacando para qualquer página da Web com Mark.js

A maioria dos navegadores tem Funcionalidade CTRL + F para pesquisar e encontrar o que o usuário está procurando. Mas esse recurso não é suportado em dispositivos móveis e não funciona bem usando texto dinâmico.

Por sorte, tem Mark.js, um plugin JavaScript gratuito que adiciona um destacar recurso de pesquisa para qualquer página com facilidade.

Por padrão, funciona como um plugin de baunilha JS mas também pode rodar no topo do jQuery. É um projeto completamente de código aberto, então você está livre para usá-lo em qualquer site comercial ou outro.

Ele funciona muito como qualquer recurso de pesquisa do navegador, exceto que ele vem com extras extras. Você pode adicionar seus próprios filtros personalizados e procurar palavras com base em expressões regulares, sinônimos específicos, e até mesmo em elementos dinâmicos da página como iframes.

Para começar, basta baixar o arquivo Mark.js do GitHub ou hospedar o arquivo através de um CDN para economizar tempo.

Você deve executar esta função conectado a um campo de entrada na página. Dessa forma, os usuários podem inserir termos de pesquisa e obter feedback imediato via texto destacado.

Aqui está um snippet de amostra na página de demonstração:

 $ (". contexto"). mark (palavra-chave [, opções]); 

o .contexto classe alvos onde a função deve pesquisar por termos. Você pode usar o HTML padrão elemento se você está tentando pesquisar a página inteira ou pode passar vários elementos como widgets com abas diferentes ou iframes.

Então, dentro do marca() funcionar você passar a palavra chave, junto com as opções (se desejar).

Se você permitir que os usuários digitem uma palavra-chave, você poderá atualizar automaticamente a função com uma nova palavra-chave após cada pressionamento de tecla. Há até uma função específica para segmentar esse evento.

Mark.js funciona com todos os principais navegadores, incluindo Chrome, Firefox, Opera (v12 +) e Internet Explorer (9+). É muito fácil de configurar se você seguir os documentos e usar os arquivos mais recentes.

Mas, se você quiser ver Mark.js em ação dê uma olhada no violino abaixo usando uma demonstração muito básica do jQuery para pesquisar alguns parágrafos do Lorem Ipsum.