Text javascript function for uppercase and remove accents together

Asked

Viewed 1,180 times

0

I have the following script working perfectly, I would like to implement the function remove accents I have found several tips but did not work, as I do not understand javascript, I would like if possible implement the function in my existing script, thanks, follow script:

$(function(){
	$("#txtBusca").keyup(function(){
		var texto = $(this).val();
		
		$("#ulItens li").css("display", "block");
		$("#ulItens li").each(function(){
			// if($(this).text().indexOf(texto) < 0)
			//    $(this).css("display", "none");

			if($(this).text().toUpperCase().indexOf(texto.toUpperCase()) < 0)
   			$(this).css("display", "none");
			   
		});
	});
});
<div class="single">
  <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="Hugo 0.20.2" />
     <meta charset="UTF-8"> 
     <!--<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>-->
	
    <!--Início Script de busca-->
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script type="text/javascript">
$(function(){
	$("#txtBusca").keyup(function(){
		var texto = $(this).val();
		
		$("#ulItens li").css("display", "block");
		$("#ulItens li").each(function(){
			// if($(this).text().indexOf(texto) < 0)
			//    $(this).css("display", "none");

			if($(this).text().toUpperCase().indexOf(texto.toUpperCase()) < 0)
   			$(this).css("display", "none");
			   
		});
	});
});
</script>	     
	<!--Fim Script de busca-->

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
    <link rel='stylesheet' href='//fonts.googleapis.com/css?family=Open+Sans|Marcellus+SC'>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/solarized_dark.min.css">
    <link rel="stylesheet" href="http://leituracrista.com/css/styles.css">
    <link rel="stylesheet" href="http://leituracrista.com/css/custom.css">
    <link rel="stylesheet" href="http://leituracrista.com/css/busca.css">
    <link rel="alternate" type="application/rss+xml" title="RSS" href="http://leituracrista.com//index.xml">

    
    <title>Índice - O que Respondi - Mario Persona</title>
    
  </head>

  <body>

    <header >
      
      <div class="title"><a href="http://leituracrista.com/"  target="_parent">  Leitura Cristã</a></div>
    </header>

    <div class="container site">

 
  <div align="center" class="section">
    <header><div  align="center" class="title">ÍNDICE - O que respodi - Por Mario Persona</div></header></br>
    <div class="list-default"><nav id="TableOfContents">

<div class="busca">
    <!--<input id="filtro" type="text" placeholder="Busca Rápida">-->
   	
       <input style="text-align: center;" type="text" id="txtBusca" placeholder="Busca Rápida..."/>

</div>

<ul id="ulItens" align="center">

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#o-que-preciso-fazer-para-ser-salvo">
  O que preciso fazer para ser salvo?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#o-que-significa-abba">
  O que significa Abba?
  </a></li>


<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#por-que-há-tantas-denominações">
  Por que há tantas denominações?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#pode-explicar-espírito-alma-e-corpo">
  Pode explicar espírito, alma e corpo?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#quem-são-os-anjos-caídos">
  Quem são os anjos caídos?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#o-que-é-batismo-do-espírito-santo">
  O que é batismo do Espírito Santo?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#qual-é-o-pecado-sem-perdão">
  Qual é o pecado sem perdão?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#com-quem-se-casou-caim">
  Com quem se casou Caim?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#onde-celebrar-a-ceia-do-senhor">
  Onde celebrar a ceia do Senhor?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#há-diferença-entre-inferno-lago-de-fogo-hades-sheol-e-geena">
  Há diferença entre inferno, lago de fogo, hades, sheol e geena?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#o-cristão-deve-ir-à-guerra">
  O cristão deve ir à guerra?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#qual-o-significado-de-dois-dias-de-oséias-6-1-3">
  Qual o significado de dois dias de Oséias 6:1-3?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#o-que-significa-o-batismo">
  O que significa o Batismo?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#como-conviver-com-o-vazio-e-a-tristeza">
  Como conviver com o vazio e a tristeza?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#como-enfrentar-as-tentações">
  Como enfrentar as tentações?
  </a></li>


<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#como-celebrar-a-ceia-do-senhor">
  Como celebrar a Ceia do Senhor?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#devo-divulgar-denominação">
  Devo divulgar denominação?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#a-bíblia-considera-a-mulher-inferior-ao-homem">
  A Bíblia considera a mulher inferior ao homem?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#existe-alguma-condição-para-falar-línguas-estranhas">
  Existe alguma condição para falar línguas estranhas?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#como-enfrentar-as-aflições">
  Como enfrentar as aflições?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#o-que-significa-a-mesa-do-senhor">
  O que significa a Mesa do Senhor?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#qual-religião-pode-me-salvar">
  Qual religião pode me salvar?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#em-que-templo-devo-adorar">
  Em que templo devo adorar?
  </a></li>

<li><a href="http://leituracrista.com/o-que-respondi-volume-1/#o-cristão-pode-beber-vinho">
  O cristão pode beber vinho?
  </a></li>
  
  </ul>
</nav></div>
  </div>
  

<script>
var links = document.links;
for (var i = 0, linksLength = links.length; i < linksLength; i++) {
    if (links[i].hostname != window.location.hostname) {
        links[i].target = 'right';
    }
}
</script>

javascript
  • 1

    Miguel, you just want to remove the accents, or replace them with their respective accent-free character?

  • 2

    You can use as a basis: https://answall.com/questions/124754/withdrawar-specialcharacteristics-e-accents

  • Pedro Camara Junior added the javascript and html codes to get better, I do not know which option would work in the search if only remove or replace, sorry my ignorance do not understand java, rsrs.

  • @Miguelsilva, in this case, I believe that the ideal is to replace by the respective characters, don’t you think? That way, you keep the sense of string returned.

  • 1

    @Miguelsilva you added the html code you wanted but changed the meaning of the question and still left the question talking about java but in reality you want to ask about javascript. Can correct?

  • 1

    @Fláviogranato, corrected by

  • Miguel can give an example of text and how you want it to be?

  • @Sergio, I put the script and html above, thanks for your attention

  • Miguel, what I wanted was an example of text and how do you want it to look.

  • @Segio Oh yes, sorry, I didn’t understand the question, rsrs Come on, my problem is this: I have a list in the following format: <ul> <li>Is it possible to see God? </li> <li>What are denominations</li> </ul> If the user type "god" or "God" in upper or lower case will find the first line without problem (this I can already do) but if typing without accent "denominations" does not find, what I want is that it is found even if typed without accent. Thank you for your attention.

  • Just as the user can type uppercase or lowercase finds the term he can type with or without accent that he can also find.

Show 6 more comments

1 answer

2


Function that removes accents, if any doubt remains put in the comment.

    $(function(){
    	$("#txtBusca").keyup(function(){
    	  	var texto = removerAcentos($(this).val());
          $(this).val(texto);
      });
    });




        function removerAcentos( newStringComAcento ) {
          var string = newStringComAcento;
        	var mapaAcentosHex 	= {
        		a : /[\xE0-\xE6]/g,
        		e : /[\xE8-\xEB]/g,
        		i : /[\xEC-\xEF]/g,
        		o : /[\xF2-\xF6]/g,
        		u : /[\xF9-\xFC]/g,
        		c : /\xE7/g,
        		n : /\xF1/g
        	};

        	for ( var letra in mapaAcentosHex ) {
        		var expressaoRegular = mapaAcentosHex[letra];
        		string = string.replace( expressaoRegular, letra );
        	}

        	return string;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtBusca">

  • Can you explain how the accent map works?

  • a : /[ xE0-xE6]/g so the characters between them will be exchanged for 'a', and so on can be easily modified.

  • @Thanks for the answer, but this only solves the issue of accents and also do not know how this code looks in my script, sorry my ignorance if I can put already as I should use, rsrs is that I have spent many days breaking my head and could not make work. Anyway thanks.

  • Add irie in your code

  • added in your script to which I posted to remove the accents. note that your text variable now receives already without the accent.

  • @Mateusveloso, man, I’m so grateful!

  • @You’re welcome, it worked ?

  • @Mateusveloso funfou no, now nor if I put with accents it does not find the word, only finds word without accent, rsrs and is also giving error when running here on the forum

  • @Miguelsilva check now. and try to adapt

  • @Mateusveloso, now not even search it does more, rsrs, if vc copy html and add the script in the own page to test it is easier.

  • Mark the 'v' to signal that the answer helped you, while the reputation has no problem, I’m here to help.

  • @Mateusveloso the script is not working yet.

  • Run the code right here on the site and try to put an 'a' for example

  • @Mateusveloso really in the input it removes the accent, but does not find the text if it has accent, I do not know if it is possible, but what I want is that if the user type a certain term that contains accent, even if he type without accent is found, understand?

Show 9 more comments

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.