0

Como eu posso realizar uma busca em uma DIV semelhando ao Ctrl+F do Chrome com javascript?

Independente de maiúsculo, minúsculo, acentos, etc.

Até agora eu tenho o resultado abaixo. Eu pego o termo encontrado e verifico se há ocorrência no texto. Mas quando a ocorrência tem acento, não destaca (não encontra).

Estou utilizando esse script para ter o resultado na imagem.

var searchTerm = "CLAUDIA";

var html = $("#texto").text();

var pattern = "([^\\w]*)(" + searchTerm + ")([^\\w]*)";

var rg = new RegExp(pattern, "gi");

var match = rg.exec(html);

if(match) {

   html = html.replace(rg,match[1] + "<b>"+ match[2] +"</b>" + match[3]);

   $("#texto").text(html);

}

https://pastebin.com/8U5SXQBV

inserir a descrição da imagem aqui

10
  • Especifique melhor sua pergunta... O que você já conseguiu fazer? A busca será feita através de um input? Poste seu código.
    – Jorge.M
    15/02/2018 às 15:19
  • Vou editar a pergunta para explicar melhor 15/02/2018 às 15:23
  • Testei seu código e está pegando até os acentos. Veja se é isto: jsfiddle.net/x28g6qn2
    – Meu ovo
    15/02/2018 às 16:04
  • O contrario não funciona. Por exemplo, vamos pegar o exemplo da img acima, caso o nome no texto fosse "CLÁUDIA", ele não acharia. 15/02/2018 às 16:09
  • Sim, acharia. Veja: jsfiddle.net/x28g6qn2/4
    – Meu ovo
    15/02/2018 às 18:53

4 Respostas 4

1

Adicionei no código uma função que retira todos os acentos e converte para minúsculas tanto o texto da div quanto o termo buscado. Desta forma fica mais fácil localizar o termo buscado no texto.

Em seguida, após o match no texto cru (sem acentos e lowercase) redefini a regex para encontrar e substituir as ocorrências no texto original o termo buscado.

Veja funcionando:

function tiraAcentos(i){
   
   var i = i.toLowerCase().trim();

   var acentos = "ãáàâäéèêëíìîïõóòôöúùûüç";
   var sem_acentos = "aaaaaeeeeiiiiooooouuuuc";
   
   for(var x=0; x<i.length; x++){
      var str_pos = acentos.indexOf(i.substr(x,1));
      if(str_pos != -1){
         i = i.replace(acentos.charAt(str_pos),sem_acentos.charAt(str_pos));
      }
   }
   
   return i;
}

var searchTerm = "coracao";
var html = $("#texto").text().trim();
var html_limpo = tiraAcentos(html);

var pattern = "([^\\w]*)(" + tiraAcentos(searchTerm)+"|"+searchTerm + ")([^\\w]*)";
var rg = new RegExp(pattern, "g");
var match = rg.exec(html_limpo);
if(match) {
   var match_pos = html_limpo.indexOf(tiraAcentos(match[2]));
   match[2] = html.substring(match_pos, match[2].length+match_pos);
   rg = new RegExp(pattern.replace(tiraAcentos(searchTerm),match[2]), "g");
   html = html.replace(rg,match[1] + "<b>"+ match[2] +"</b>" + match[3]);
   $("#texto").html(html);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="texto">
   Acentos são permitidos e até LETRAS MAIÚSCULAS coração e CLÁUDIA coração
</div>

1

Uma outra forma alternativa que encontrei sem usar regex foi usar while e for. O while pega as posições do termo dentro do texto cru e em seguida o for faz as substituições no texto original:

Veja funcionando:

function tiraAcentos(i){
   
   var i = i.toLowerCase().trim();

   var acentos = "ãáàâäéèêëíìîïõóòôöúùûüç";
   var sem_acentos = "aaaaaeeeeiiiiooooouuuuc";
   
   for(var x=0; x<i.length; x++){
      var str_pos = acentos.indexOf(i.substr(x,1));
      if(str_pos != -1){
         i = i.replace(acentos.charAt(str_pos),sem_acentos.charAt(str_pos));
      }
   }
   
   return i;
}

var searchTerm = "coracao",
   html = $("#texto").text().trim(),
   html_limpo = tiraAcentos(html),
   posicoes = [],
   posicaoCorrente = html_limpo.indexOf(tiraAcentos(searchTerm));

while (posicaoCorrente != -1) {
   posicoes.push(posicaoCorrente);
   posicaoCorrente = html_limpo.indexOf(tiraAcentos(searchTerm), posicaoCorrente + searchTerm.length);
}

posicoes = posicoes.reverse();

for(var x=0; x<posicoes.length; x++){
   html = html.substring(0,posicoes[x])
   +"<b>"+html.substring(posicoes[x], posicoes[x]+searchTerm.length)+"</b>"
   +html.substring(posicoes[x]+searchTerm.length, html.length);
}

$("#texto").html(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="texto">
   Acentos são permitidos e até LETRAS MAIÚSCULAS coracao e CLÁUDIA coração coração
</div>

0

Tente esse script

<input id="searcher" type="text" name="searcher">


$('#searcher').quicksearch('table tbody tr', {
    'delay': 100,
    'bind': 'keyup keydown',
    'show': function() {
        if ($('#searcher').val() === '') {
            return;
        }
        $(this).addClass('show');
    },
    'onAfter': function() {
        if ($('#searcher').val() === '') {
            return;
        }
        if ($('.show:first').length > 0){
            $('html,body').scrollTop($('.show:first').offset().top);
        }
    },
    'hide': function() {
        $(this).removeClass('show');
    },
    'prepareQuery': function(val) {
        return new RegExp(val, "i");
    },
    'testQuery': function(query, txt, _row) {
        return query.test(txt);
    }
});

$('#searcher').focus();

Um exemplo aqui: http://jsfiddle.net/ZLhAd/369/

1
  • Quando houver algum registro com acento, como por exemplo "dé[email protected]", não vai encontrar. Mas isso me ajudou a melhorar um pouco minha lógica. 15/02/2018 às 15:29
0

Como você não especificou, deve estar usando Javascript puro, então pode usar search:

var div= document.getElementById("Id_do_div");
var existe = div.innerHTML.search("texto") >= 0;

Referência: https://www.w3schools.com/jsref/jsref_search.asp

Também pode usar indexOf, que permite procurar a partir de um ponto, e nesse caso, pode buscar múltiplas ocorrências do mesmo texto:

https://www.w3schools.com/jsref/jsref_indexof.asp

5
  • Desculpa! Estou utilizando VueJS. O search assemelha paralavras com acentos. 15/02/2018 às 15:34
  • Estou utilizando esse script para ter o resultado na imagem. pastebin.com/8U5SXQBV var searchTerm = variavelEncontrada; var html = texto; var pattern = "([^\\w]*)(" + searchTerm + ")([^\\w]*)"; var rg = new RegExp(pattern, "gi"); var match = rg.exec(html); if(match) { html = html.replace(rg,match[1] + "<b>"+ match[2] +"</b>" + match[3]); } 15/02/2018 às 15:39
  • Coloca na pergunta pra ficar mais claro 15/02/2018 às 15:45
  • Perceba que na linha 8 eu adiciono um destaque (<b>) na ocorrência encontrada 15/02/2018 às 15:51
  • @JosivanSousa, edita sua pergunta e coloca o código que você está usando lá, fica mais fácil pra todos verem e darem sugestões 15/02/2018 às 17:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .