Issues with the accented characters

Question

I have a search box on my site and i need to replace all the Spanish characters that user types in to equivalent English alphabets. I have coded which is shown below. This is not working when i plug in it to the my Project and even when create a simple html page which coded same. My page is using <meta charset="utf-8" />. This is working fine when i created a fiddle http://jsfiddle.net/KJAy3/. This is how it it is show in the debugger

What am i doing wrong? What kind of encoding i am supposed to us? This Replace method is triggered before the form submit.

function encodeSearch(term){

term=term.replace("á","a");
term=term.replace("Á","A");
term=term.replace("é","e");
term=term.replace("É","E");
term=term.replace("í","i");
term=term.replace("Í","I");
term=term.replace("ó","o");
term=term.replace("Ó","O");
term=term.replace("ú","u");
term=term.replace("Ú","U");
term=term.replace("ñ","n");
term=term.replace("Ñ","N");
return term;

}

Answer 1

Have you used <script type="application/javascript" charset="utf-8" src="yourfile.js"></script>"? (Assuming your file is saved as utf-8, of course.)

Answer 2

If you are going to use those special characters in HTML, it may be an idea to use this String replace method for all special characters:

[somestring].replace(/[\u0080-\u024F]/g,
                      function(a) {
                        return '&#'+a.charCodeAt(0)+';';
                      });

It will convert all special characters to numeric html entities and prevent the need to type all those characters in your javascript, e.g.

 'ñíóúü¡¿'.replace(.replace(/[\u0080-\u024F]/g,
                      function(a) {
                        return '&#'+a.charCodeAt(0)+';';
                      });
  //=> result
  // ñíóúü¡¿