Realçar termo procurado deixando em negrito com jQuery 3


E ai galera, tudo bom?!

Esse post de hoje é bem pequeno e simples, o que vamos fazer é de uma maneira menos sofisticada mas que não deixa de ser legal iremos realçar o termo buscado deixando o mesmo em negrito usando jquery, quase do mesmo modo que o Google faz.

O código

Para exemplificar o que vamos fazer temos um arquivos javascript e o outro html.

Em nosso html temos uma simples ul e seus sub-elementos li, considere que nesse caso os elementos do li foram os resultados de uma pesquisa realizada em seu site, vale lembra que essa tecnica funciona com qualquer elemento, basta você fazer o seletor de acordo com sua necessidade.

Nas três primeiras linhas do nosso arquivo javascript, simplesmente criei um array que teria o termo da pesquisa, veja que você também poderia passar uma string comum e fazer um split passando como filtro o espaço em branco, como o código a seguir:

[javascript]var searchTerm = "termo buscado".split(" ");[/javascript]

Em posso dos termos buscados podemos agora selecionar todos os elementos que vão participar da varredura para encontrar os termos selecionados e realçalos, basicamente fiz o seletor simples, selecionando todos os li do meu html.

Para percorrer todos os elementos nada melhor que o each do jquery, se não sabe como usa-lo clique no link e veja como é simples. A cada execução salvo o html do elemento para poder buscar os termos, como eu tenho um array de termos vamos percorrer ele usando o for. Dentro do for crio um expressão regular para facilitar nossa vida, esse recurso é fantastico para esse tipo de trabalho, inclusive para que nunca viu o código do jQuery, lá está cheio de lindas regex’s. A expressão a seguir seleciona qualquer elemento que não seja um caracter não alfanumérico seguido do termo pesquisado seguido de outro caracter não alfanumérico, exemplo:
Termo da pesquisa: o
Texto: ola, eu sou o desenvolvedor la daquela empresa.
Depois da execução de nosso código:  ola, eu sou o desenvolvedor la daquela empresa.

Como vocês podem ver temos varias letras “o”, mas apenas uma foi realçada, graças a nossa expressão regulas foi descartado todos os “o”s que eram acompanhado de qualquer letra ou número, veja a seguir casos que nosso o seria selecionado:

  • Ola o, senhor
  • Minha nossa o cara é maluco
  • Esse é bom *o*

Sendo assim com o if faço a verificação de o método exec da expressão regular retornou um match.

Agora basta dar um replace no termo procurado por ele mesmo mas dessa vez em volta de uma tag strong, para deixar em negrito! Na mesma linha usei o match pegando o elemento de posição 0, o match ele retorna um array com todos os elementos que estavam dentro da regra que definimos no pattern. Depois disso basta atualizarmos o html do elemento com o novo html agora contendo nossos elementos realçados.

Espero que vocês tenham gostado, valeu!!

Segue um exemplo funcionando(exemplo feito no jsfiddle, se demorar a culpa é deles você pode acessar o link por aqui):


sobre Alberto Monteiro

Desenvolvedor no Grupo Fortes, cuja principal área de conhecimento são em tecnologias Microsoft, como Windows Forms / Services, WPF, ASP.NET(MVC/WEB API), Windows Phone, EF. Gosta de sopa de letrinhas(SOLID, DDD, TDD, BDD, IoC, SoC, UoW), possui aplicações de Windows Phone publicadas no marketplace, já contribuiu no jQuery UI. Atualmente trabalha com ASP.NET MVC / Web API, Windows Azure, Amazon AWS, jQuery/UI, Knockout, EF, Ninject, AutoMapper, Restfulie, SignalR, KendoUI.

  • Marcio Alves

    Existe alguma forma de fazer com que ele não direfencie maiuscula / minuscula?

  • AlbertoMonteiro

    Tem sim, nesse caso é só você passar um segundo argumento no momento da criação da RegExp, ficando assim:
    var rg = new RegExp(pattern, “i”);

    Onde o i vai fazer o Ignore Case(Ignorar maiuscula e minuscula)

    Segue um exemplo: http://jsfiddle.net/AlbertoMonteiro/frjeK/67/

  • Marcio Alves

    Alberto, muito obrigado, salvou a minha pele.
    Parabéns pelo site…