Javascript HTML forms : unicode user input to unicode output

Question

I'm trying to make a simple multi-search tool for learning German. When I put in certain characters, they change. For example, ü is %FC, ä is %E4, ö is $F6, ß is %DF. I assume somewhere the characters are being converted to some other character set other than Unicode

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8"> 
    <script language="javascript" charset="UTF-8">
        function basicSearch()
        {
            //document.basicForm.basicWord.value = '\u1495';
            var basicSubmit=document.basicForm;
            var basicWord = escape(basicSubmit.basicWord.value);
            document.getElementById("demo").innerHTML = basicWord;
            window.open("https://translate.google.com/#de/en/" + basicWord);
            return false;
        }
    </script>
</head>
<body>
  <form name="basicForm" onSubmit="return basicSearch();" accept-charset="UTF-8">
    <input type="text" name="basicWord">
    <input type="submit" name="SearchSubmit" value="Search">
  </form><br>

 <p id="demo"></p>


</body>
</html>

score 1 · Answer 1 · edited May 23 '17 at 12:01

1

Its a good idea to consider http encoding any URIs you are manually constructing. In this case we can use encodeURIComponent on the text of the input to properly http encode data passed in the URI.

// früh -> early
var basicWord = encodeURIComponent(basicSubmit.basicWord.value);
// basicWord = 'fr%C3%BCh';

Other cases might warrant using encodeURI. See this question for more info.

edited May 23 '17 at 12:01

Community

1
1

answered Jan 17 '17 at 07:49

GantTheWanderer

1,255
1
11
19

score 0 · Accepted Answer · answered Jan 18 '17 at 16:45

var basicWord = escape(basicSubmit.basicWord.value);

JavaScript's escape()/unescape() encoding is a bizarre custom format you almost never want to use. For encoding URL parameters using the actual real URL rules, the function you want instead is encodeURIComponent().

document.getElementById("demo").innerHTML = basicWord;

Avoid writing HTML markup to the document, you get HTML-injection problems which can lead to cross-site scripting security holes. Write to textContent instead to write normal text.

window.open("https://translate.google.com/#de/en/" + basicWord);

(Incidentally Google Translate also accepts form parameters: q for text to translate, sl for source and tl for target language. So FWIW you could do this with a simple form without JS.)

score 0 · Answer 3 · answered Jan 20 '17 at 01:36

Thank you both. If anyone is interested, below is the final coding. I made it to help create flash cards for ANKI using Gabriel Wyner's youtube vids and his multi-tool.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"> 
    <title>Page Title</title>
</head>
<body>
<script>


function basicSearch() {
  var basicSubmit=document.basicForm;
  var basicWord = encodeURIComponent(basicSubmit.searchterms.value);
  window.open("https://de.wiktionary.org/w/index.php?search=" + basicWord + "&title=Spezial:Suche&go=Seite&searchToken=480i5tddc2tqpr6njyi8gx2oa");
  window.open("http://forvo.com/search/" + basicWord + "/");
  window.open("https://www.google.de/search?q=" + basicWord + "&biw=1280&bih=611&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiOydnfssfRAhVCqlQKHaPSDvoQ_AUIBigB#q=" + basicWord + "&tbm=isch&tbs=isz:m");
  window.open("https://translate.google.com/#de/en/" + basicWord);
  return false;

}

function actionSearch() {
  var actionSubmit=document.actionForm;
  var actionWord = encodeURIComponent(actionSubmit.searchterms.value);
  window.open("https://www.google.de/search?q=" + actionWord + "&biw=1280&bih=611&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiiwtDttMfRAhVkx1QKHc6PCgMQ_AUIBigB#tbs=isz:m%2Citp:animated&tbm=isch&q=" + actionWord);
  return false;
}


</script>

<form name="basicForm" onSubmit="return basicSearch();">
 Search for a basic word: 
 <input type="text" name="searchterms">
 <input type="submit" name="SearchSubmit" value="Search">
</form><br>
<form name="actionForm" onSubmit="return actionSearch();">
 Search google for animation: 
 <input type="text" name="searchterms">
 <input type="submit" name="SearchSubmit" value="Search">
</form><br>

<a href="https://de.wiktionary.org/wiki/Verzeichnis:Deutsch/Redewendungen">German quotes/sayings</a>

<h2>English links for gifs: (for verbs or other)</h2>
<a href="http://giphy.com/">http://giphy.com/</a><br>
<a href="http://www.reactiongifs.com/">http://www.reactiongifs.com/</a><br>
<a href="https://www.reddit.com/r/gifs/">https://www.reddit.com/r/gifs/</a><br>
<a href="https://www.reddit.com/r/reactiongifs/">https://www.reddit.com/r/reactiongifs/</a><br>
<a href="https://www.reddit.com/r/analogygifs">https://www.reddit.com/r/analogygifs</a><br>
<a href="https://www.reddit.com/r/HighQualityGifs/">https://www.reddit.com/r/HighQualityGifs/</a><br>
<a href="https://www.reddit.com/r/DANCEGIFS/">https://www.reddit.com/r/DANCEGIFS/</a><br>
<a href="http://www.gifbin.com/">http://www.gifbin.com/</a><br>


</body>
</html>

Javascript HTML forms : unicode user input to unicode output

3 Answers3