How to search accentuated text, upper case, and minuscule text with html and javascript?

Question

Can someone help me, with some hint?

I have the code below that searches the paragraph, but the problem is when we do not add the text correctly in the search box (with uppercase, lowercase and accents - as described in the paragraph).

$("#textFind").keyup(function(){
    var stringPesquisa = $(this).val();
    $('p').parent().hide();
    $('p:contains('+stringPesquisa+')').parent().show()
  });

div{
  margin: 10px;
  border: 1px solid #333;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="textFind">
<br>
<div id="div01" style="">
  <h2> Título 1 </h2>
  <p> Esse texto está aqui para ser pesquisado.</p>
  <p> Esse outro texto também vai ser pesquisado.</p>
  <p> Texto que vai ser que o usuário vai pesquisar digitando no input.</p>
</div>
<div id="div02" style="">
  <h2> Título 2 </h2>
  <p> esse parágrafo deve aparecer se o texto digitado estiver nessa div.</p>
  <p> esse outro parágrafo vai obedece ao mesmo critério.</p>
  <p> o usuário vai digitar no input e essa div deve aparecer.</p>
</div>

Answer 1

What you can do is turn the uppercase characters into lowercase or vice versa in both cases for comparison. With respect to accents, you can replace them using a regex. You would need to pass the paragraph values in the text and compare one to one.

$("#textFind").keyup(function(){
    
    // deixamos a string de pesquisa em minúscula
    var stringPesquisa = $(this).val().toLowerCase();

    // removemos os acentos da string de pesquisa
    stringPesquisa = replaceAccents(stringPesquisa);
    
    // escondemos o conteúdo
    $('p').parent().hide();
    
    // executamos a busca por parágrafo e por título
    $('p').each(forEachHandler);
    $('h2').each(forEachHandler);
    
    // essa função vai receber os valores dos parágrafos e dos títulos
    function forEachHandler() {

          // recuperamos o valor da string do parágrafo/título e deixamos em minúsculo
          var stringP = $(this).text().toLowerCase();
          
          // removemos os acentos
          stringP = replaceAccents(stringP);

           // efetuamos a pesquisa
           if(stringP.search(stringPesquisa) >= 0) {
              $(this).parent().show();
           }

     }
    
  });
  
  // essa função receberá uma string e retornará a mesma string sem os acentos
  function replaceAccents(string) {
  
     return string != null ? string.replace(/[áàãâä]/gi,"a")
            .replace(/[éè¨ê]/gi,"e")
            .replace(/[íìïî]/gi,"i")
            .replace(/[óòöôõ]/gi,"o")
            .replace(/[úùüû]/gi, "u")
            .replace(/[ç]/gi, "c")
            .replace(/[ñ]/gi, "n")
            .replace(/[^a-zA-Z0-9]/g," ") : "";
            
  }

div{
  margin: 10px;
  border: 1px solid #333;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="textFind">
<br>
<div id="div01" style="">
  <h2> Título 1 </h2>
  <p> Esse texto está aqui para ser pesquisado.</p>
  <p> Esse outro texto também vai ser pesquisado.</p>
  <p> Texto que vai ser que o usuário vai pesquisar digitando no input.</p>
</div>
<div id="div02" style="">
  <h2> Título 2 </h2>
  <p> esse parágrafo deve aparecer se o texto digitado estiver nessa div.</p>
  <p> esse outro parágrafo vai obedece ao mesmo critério.</p>
  <p> o usuário vai digitar no input e essa div deve aparecer.</p>
</div>

Regex code snippet out of that reply by Soen. I just made a few changes to the code, maybe you should make it more performative.

Answer 2

Searches are pumping (working) only in p tags, arrow to your H2 too.

It must be something like that:

$("#textFind").keyup(function(){
    var stringPesquisa = $(this).val();
    $('p').parent().hide();
    $('p:contains('+stringPesquisa+')').parent().show()
    //insere aqui > algo assim
    $('h2:contains('+stringPesquisa+')').parent().show()
});