Highlight

[Ericka]

Olá!

Tenho um script abaixo que realiza highlight em uma palavra buscada, mas preciso que ao realizar uma nova busca ele apague a marcação anterior. Como eu faço?

Segue o script para análise.

function doDestacaTexto(Texto, termoBusca){
    
    /*******************************************************************/
    // CASO QUEIRA MODIFICAR O ESTILO DA MARCAÇÃO ALTERE ESSAS VARIÁVEIS
    /*******************************************************************/
    inicioTag = "<font style='color:#FFFFFF;background-color:#FF0000'><b>";
    fimTag = "</b></font>";
    
    var novoTexto = "";
    var i = -1;
    var lcTermoBusca = termoBusca.toLowerCase();
    var lcTexto = Texto.toLowerCase();

    while (Texto.length > 0){
        i = lcTexto.indexOf(lcTermoBusca, i+1);
        if (i < 0){
            novoTexto += Texto;
            Texto = "";
        }
        else{
            if (Texto.lastIndexOf(">", i) >= Texto.lastIndexOf("<", i)){
                if (lcTexto.lastIndexOf("/script>", i) >= lcTexto.lastIndexOf("<script", i)){
                    novoTexto += Texto.substring(0, i) + inicioTag + Texto.substr(i, termoBusca.length) + fimTag;
                      Texto = Texto.substr(i + termoBusca.length);
                    lcTexto = Texto.toLowerCase();
                      i = -1;
                }
            }
        }
    }
    return novoTexto;
}

function doDestacaTextoBusca(textoBusca, textoObj, ehFrase){

if (ehFrase){arrayBusca=[textoBusca];}
    else{arrayBusca = textoBusca.split(" ");}

    var Texto = textoObj.innerHTML;

    for (var i = 0; i < arrayBusca.length; i++){Texto = doDestacaTexto(Texto, arrayBusca[i]);}
    textoObj.innerHTML = Texto;
    return true;
}

Tenho um botão que chama esse código

<input type="text" name=t1 value="" size=20>
<input type="button" onClick="doDestacaTextoBusca(document.getElementById('t1').value, div_texto)" value="Destacar Texto" />

Desde já agradeço.

[Danilo Moraes]

então cara, eu tinha comecado uma funcao aqui pra te ajudar, mas ai fiquei com preguica de terminar... Ai já viu, né? Mas é bem facilzinho fazer isso :S So bolar uma funcao que procura pelo conteudo da variavel inicioTag usando indexOf e faz um replace substituindo tudo que tem na inicioTag por "" (string vazia).

Mas tu poderia dar uma melhorada nesse script... Tags HTML para formatacao de texto, pelo menos no FF 3.0, são substituidas por codigo CSS ta propria tag... então te aconselho a trocar a tag FONT pela tag SPAN e usar uma folha de estilo em css...

E em vez de adicionar antes e depois da palavra encontrada, assim que a encontrar, usa um replace para substitula pela propria palavra envola pelas tags span com a classe. Apenas uma ideia para facilitar. Qual a diferenca de usar SPAN ao invez de FONT? Usando SPAN e depois setando uma classe, na hora de tu fazer a nova pesquisa, tu pode acionar uma funcao que limpa todas as marcacoes no codigo. Essa funcao ira procurar por todas as tags span dentro do texto, e dessas tags span, ira pegar as quem estao com a classe determinada pela "busca". E então, vai copiar o texto dentro de cada uma delas, um por um e depois vai substituir a tag span pelo proprio texto usando um replaceChild. Com isso temos um codigo limpo... Mas se preferir apenas estetica e facilidade, pode apenas selecionar todos os elementos pela sua classe usando getElementsByClassName() e depois trocar o nome da classe por um outro qualquer.

Se precisar de mais ajuda, so falar.

T+

[Ericka]

Danilo,

Entendi a lógica do que você me falou, mas eu sou muito leiga em javascript peguei esse código pronto e já fiz pequenas modificações para se adequar a minha necessidade.

Será que você não consegue ajustar esse código colocando essa modificação? Penso que só precisaria que ao apertar o botão ele apague a marcação anterior e deixasse somente a marcação nova.

Desde já agradeço.