PUBLICIDADE
Este código tem nota
9,2

Autor

gabriel

Gabriel Fróes

membro deste junho de 2006

Tags

Enquete

Você se preocupa em desenvolver usando Web Standards?
PUBLICIDADE

Efeito Hightlight em palavras igual ao Google


Milhares de sites na internet utilizam o efeito Hightlight em suas páginas, principalmente em páginas de resultado de buscas e pesquisas. Por exemplo, com uma palavra ou frase que é utilizada para a busca no resultado este mesmo critério de busca aparece destacado.
Esse efeito Hightlight, é utilizado, por exemplo, nas páginas de cache do Google.

Com este código é possível criar este efeito Hightlight em suas páginas de forma rápida e prática.

A utilização do código é muito simples, basta passar 3 parâmetros:

Nome da função: doDestacaTextoBusca
Parametros:
- textoBusca: Texto a ser destacado
- textoObj: Objeto da página em que o Hightlight será aplicado. Uma DIV ou SPAN, por exemplo
- ehFrase (opcional): Trata o parâmetro textoBusca como Frase.

Exemplo de chamada:
doDestacaTextoBusca("palavra destaque", objDestaque)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Highlight de Textos igual ao Google</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<head>
<script language="JavaScript" src="destacaTexto.js"></script>

</head>
<body>

Escolha a palavra: <input type="text" value="codigo" size="25" name="busca" /><input type="button" onClick="doDestacaTextoBusca(document.getElementById('busca').value, teste)" value="Destacar Texto" />
<br />
<div id="teste">
Site para programadores com codigos fonte, noticias, video aulas, downloads, artigos e tutorias. Tudo sobre Web. ASP, PHP, .NET, JSP, ABAP, JavaScript, ActionScript DHTML, XHTML, CSS, Web Standards/Tableless, mySQL, SQL, Photoshop, Flash MX e muito mais.
Utilize a palavra "codigo" como exemplo pois há neste texto muitas repetições de codigo, assim é possível ver a palavra codigo em destaque diversas vezes.
</div>

</body>
</html>

ArquivoTipoTamanhoHits 
destacaTexto.jsArquivo JS1,3 Kb2247Baixar o Arquivo

Sim   Não   Este código foi útil para você?
NotaComentário
9
denunciar
danilodk comentou em 20/5/2011

legal

só que preciso que ao fazer uma nova busca ele apague a marcação anterior, mais foi muito bom!
10
denunciar
usertop comentou em 27/1/2010

Muito bom

Muito bom perfeito
9
denunciar
akcire comentou em 15/9/2009

Como apagar o anteior?

Muito bom esse código, só que preciso que ao fazer uma nova busca ele apague a marcação anterior.

Como posso fazer?

Obrigada!
10
denunciar
ricardo comentou em 8/3/2007

nenhum erro

felismente nao achei nenhum erro e funcionou perfeito.
8
denunciar
lype2303 comentou em 9/2/2007

Contém alguns erros

O script é realmente muito bom, mas contém alguns erros.... mas é muito fácil dar uma ajeitada nele...
Regras:
Os comentários seguem as seguintes regras:
  • Todos os comentários são enviados por membros cadastrados no site.
  • A pontuação de comentários de conteúdo do próprio membro não serão computados.
  • Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
  • Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
  • O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
  • Há um limite de 10 comentários por dia para cada membro.
  • Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

     (ainda não tem cadastro? clique aqui!)

Máximo de 30 caracteres

Máximo de 255 caracteres
 

    Parceiros

    Weemix - mistura digital Hospedagem UOL HOST PagSeguro - solução para pagamentos online
© 2006-2013 R&W Informática Ltda. - Todos os direitos reservados. - Política de Privacidade | Mapa do Site