Javascript HTML 表单:Unicode 用户输入到 Unicode 输出

我正在尝试制作一个简单的多搜索工具来学习德语。当我输入某些字符时，它们会发生变化。例如，ü 是 %FC，ä 是 %E4，ö 是 $F 6，ß 是 %DF。我假设在某处字符正在转换为 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>

考虑对手动

构建的任何 URI 进行 http 编码是个好主意。在这种情况下，我们可以对输入的文本使用encodeURIComponent来正确 http 编码在 URI 中传递的数据。

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

其他情况可能需要使用 encodeURI 。有关详细信息，请参阅此问题。

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

JavaScript的escape()/unescape()编码是一种奇怪的自定义格式，你几乎从不想使用。对于使用实际实际 URL 规则对 URL 参数进行编码，您需要的函数是 encodeURIComponent() 。

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

避免将 HTML 标记写入文档，否则会遇到 HTML 注入问题，这可能会导致跨站点脚本安全漏洞。写给textContent而不是写普通文本。

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

（顺便说一下，谷歌翻译也接受表单参数：q用于要翻译的文本，sl用于源语言，tl用于目标语言。所以 FWIW 你可以用一个简单的表单来做到这一点，没有 JS。

谢谢你们。如果有人感兴趣，下面是最终的编码。我帮助使用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>

相关内容

最新更新

热门标签：