I have been struggling to pass greek letters as parameters in a URL (e.g. http://localhost/test.html?text=Καλημέρα)
For this reason I have created a simple html:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<body>
<p id="text"></p>
<script type="text/javascript">
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
var i = getQueryVariable("text");
document.getElementById("text").innerHTML = i;
</script>
</body>
</html>
however when I open the site from a browser, javascript seems to fail to properly handle the input parameter and print it as Greek text
Here is what I get in the browser's window:
%CE%9A%CE%B1%CE%BB%CE%B7%CE%BC%CE%AD%CF%81%CE%B1
instead of Καλημέρα.
Ι thought it was a matter of encoding that is why I plassed a UTF-8 statement at the top of the html. Can you please advise me on how I should properly pass something "Greek" as url input?
I have been struggling to pass greek letters as parameters in a URL (e.g. http://localhost/test.html?text=Καλημέρα)
For this reason I have created a simple html:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<body>
<p id="text"></p>
<script type="text/javascript">
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
var i = getQueryVariable("text");
document.getElementById("text").innerHTML = i;
</script>
</body>
</html>
however when I open the site from a browser, javascript seems to fail to properly handle the input parameter and print it as Greek text
Here is what I get in the browser's window:
%CE%9A%CE%B1%CE%BB%CE%B7%CE%BC%CE%AD%CF%81%CE%B1
instead of Καλημέρα.
Ι thought it was a matter of encoding that is why I plassed a UTF-8 statement at the top of the html. Can you please advise me on how I should properly pass something "Greek" as url input?
Share Improve this question asked Jul 31, 2018 at 8:23 ronironi 891 silver badge11 bronze badges 5- Maybe it's help for u stackoverflow./a/44592051/2661164 – Slaawwa Commented Jul 31, 2018 at 8:31
- thank you! However, my problem is not how to pass it in the URL, but why I cannot print it as Greek! – roni Commented Jul 31, 2018 at 8:33
-
2
decodeURI('%CE%9A%CE%B1%CE%BB%CE%B7%CE%BC%CE%AD%CF%81%CE%B1')// "Καλημέρα" – Slaawwa Commented Jul 31, 2018 at 8:36 - 2 @roni Browsers by default encode URLs using ASCII. In your js code you can decode it using decodeURIComponent(). – Sotiris Kiritsis Commented Jul 31, 2018 at 8:36
- URLs always get encoded, so you just need to decode it again – ADyson Commented Jul 31, 2018 at 8:51
3 Answers
Reset to default 5You just need to take care of the URL decoding yourself in this instance.
decodeURIComponent is what you should use for that:
if(pair[0] == variable){return decodeURIComponent(pair[1]);}
(If you only have Greek letters inside of the value, that should do. If the parameter name itself could have Greek letters as well, then you might want to decode pair[0] as well, before you pare it to the name stored in variable.)
You can use the built in JS methods encodeURI and decodeURI for this, like so...
var url = "http://somesite.?q=Καλημέρα",
encoded = encodeURI(url),
decoded = decodeURI(encoded);
console.log("encoded:", encoded);
//=> http://somesite.?q=%CE%9A%CE%B1%CE%BB%CE%B7%CE%BC%CE%AD%CF%81%CE%B1
console.log("decoded:", decoded);
//=> http://somesite.?q=Καλημέρα
Hope that helped :)
encodeURI @ MDN
This docs with example like you question)
Solution:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<body>
<p id="text"></p>
<script type="text/javascript">
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return decodeURI(pair[1]);}
}
return(false);
}
var i = getQueryVariable("text");
document.getElementById("text").innerHTML = i;
</script>
</body>
</html>