2017-01-17 57 views
0

ドイツ語を学習するための簡単なマルチ検索ツールを作ろうとしています。私が特定の文字を入れると、それらが変わります。たとえば、üは%FC、äは%E4、öは$ F6、ßは%DFです。私は文字が他の文字がUnicodeJavascript HTMLフォーム:ユニコード出力へのユニコードユーザ入力

<!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> 

答えて

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

のJavaScriptのescape()/unescape() encodingは使用したいことはほとんどない奇妙なカスタム形式です。実際の実際のURLルールを使用してURLパラメータをエンコードする場合は、代わりにencodeURIComponent()の機能が必要です。

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

文書にHTMLマークアップを書き込むことは避けてください、あなたは、クロスサイトスクリプティングのセキュリティホールにつながることができますHTMLインジェクションの問題を取得します。代わりにtextContentに書き込み、通常のテキストを書き込みます。

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

(ちなみに、Googleはまた、フォームパラメータ受け入れ翻訳:翻訳するテキストのq、ソースとターゲット言語のtlためslをのでFWIWあなたはJSことなく、簡単なフォームでこれを行うことができます)

+0

ありがとうbobince! –

1

そのHTTPが手動で構築されているすべてのURIをエンコード考慮することをお勧め以外の設定に変換されているどこかに想定しています。この場合、入力テキストにencodeURIComponentを使用して、URIで渡されたデータを適切にhttpエンコードすることができます。

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

その他のケースではencodeURIを使用することがあります。詳細については、this questionを参照してください。

+0

ありがとうGantTheWanderer –

0

感謝あなたは両方。誰かが興味を持っているなら、以下は最終的なコーディングです。私はGabriel WynerのYouTubeビデオと彼のマルチツールを使ってANKIのフラッシュカードを作成するのを手伝ってくれました。

<!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> 
関連する問題