【问题标题】：Javascript HTML forms : unicode user input to unicode outputJavascript HTML表单：unicode用户输入到unicode输出
【发布时间】：2017-01-17 06:15:14
【问题描述】：
我正在尝试制作一个简单的多搜索工具来学习德语。当我放入某些字符时，它们会发生变化。例如，ü 是 %FC，ä 是 %E4，ö 是 $F6，ß 是 %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>
【问题讨论】：
标签：
javascript
unicode
forms
【解决方案1】：
考虑对您手动构建的任何 URI 进行 http 编码是个好主意。在这种情况下，我们可以在输入文本上使用 encodeURIComponent 来正确地对 URI 中传递的数据进行 http 编码。
// früh -> early
var basicWord = encodeURIComponent(basicSubmit.basicWord.value);
// basicWord = 'fr%C3%BCh';
其他情况可能需要使用encodeURI。请参阅this question 了解更多信息。
【解决方案2】：
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 的简单表单来做到这一点。）
【解决方案3】：
谢谢你们。如果有人感兴趣，下面是最终的编码。我使用 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>