Javascript 如何使用Google translate API翻译JS中的整页文本内容
我有一个网页。它有这么多的文本数据。如何使用Google translate API翻译所有文本数据 我尝试了一些代码并进行了开发，但它只更改了特定文本，或者一次更改了整个文本并打印了一次 这是我试图开发的代码，但没有成功Javascript 如何使用Google translate API翻译JS中的整页文本内容,javascript,html,google-translation-api,Javascript,Html,Google Translation Api,我有一个网页。它有这么多的文本数据。如何使用Google translate API翻译所有文本数据 我尝试了一些代码并进行了开发，但它只更改了特定文本，或者一次更改了整个文本并打印了一次 这是我试图开发的代码，但没有成功 <body> <p id="textField">You can translate the content of this page by selecting a language in the select box
<body>
<p id="textField">You can translate the content of this page by selecting a language in the select box.</p>
<h1 id="title">My Web Page</h1>
<p >Hello everybody!</p>
<p>Translate this page:</p>
<form>
<select id="targetLanguage">
<option value="ZH">Chinese (Mandarin)</option>
<option value="CS">Czech</option>
<option value="DA">Danish</option>
<option value="NL">Dutch</option>
<option value="EN">English</option>
<option value="ET">Estonian</option>
<option value="TR" selected = "selected">French</option>
</select>
<input type="button" id="translateButton" value="Translate" />
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#translateButton").click(function () {
var url = "https://translation.googleapis.com/language/translate/v2";
//Strings requiring translation
url += "?q=" + escape($("#textField").text());
url += "&q=" + escape($("#title").text());
//Target language
url += "&target=" + $("#targetLanguage").val();
//Replace with your API key
url += "&key=AIzaSyBm6-QqyT7_OcJp03BIPZhgfp-xB0GxOb0";
console.log(url);
$.get(url, function (data, status) {
//Results are returned in an array following the order they were passed.
$("#textField").text(data.data.translations[0].translatedText);
$("#title").text(data.data.translations[1].translatedText);
});
});
</script>
</body>
您可以通过在选择框中选择语言来翻译此页面的内容
我的网页
大家好
翻译本页：
中文（普通话）
捷克的
丹麦语
荷兰的
英语
爱沙尼亚语
法语
$（“#translateButton”）。单击（函数（）{
变量url=”https://translation.googleapis.com/language/translate/v2";
//需要翻译的字符串
url+=“？q=“+escape（$（“#textField”）.text（）；
url+=“&q=“+escape（$（“#title”）.text（））；
//目标语言
url+=“&target=“++$（“#targetLanguage”）.val（）；
//替换为您的API密钥
url+=“&key=AIzaSyBm6-QqyT7_OcJp03BIPZhgfp-xB0GxOb0”；
console.log（url）；
$.get（url、函数（数据、状态）{
//结果按传递顺序以数组形式返回。
$（“#textField”）.text（data.data.translations[0].translatedText）；
$（“#title”）.text（data.data.translations[1].translatedText）；
});
});
我想翻译整个页面，但是页面不应该被破坏。它的运行方式类似于页面上的Google Translate。我认为使用Google Translate的下拉菜单而不是您创建的表单可能更简单。然后，您可以将下拉菜单的选项限制为要包括的语言。要做到这一点，您可以向函数中添加包含的语言，就像我在下面的代码中所做的那样。我用了你原来的语言。如果您想更改下拉菜单中提供的语言，只需将该语言的特定缩写添加到包含的语言列表中即可 一旦我将代码切换到只使用谷歌翻译下拉菜单，页面上的所有文本都会被翻译
<!DOCTYPE html>
<html lang="en-US">
<body>
<p id="textField">You can translate the content of this page by selecting a language in the select box.</p>
<h1 id="title">My Web Page</h1>
<p>Hello everybody!</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'zh-CN,cs,da,nl,en,et,fr'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>
您可以通过在选择框中选择语言来翻译此页面的内容
我的网页
大家好
翻译本页：
函数googleTranslateElementInit（）{
新的google.translate.TranslateElement（{pageLanguage:'en'，includeLanguages:'zh-CN，cs，da，nl，en，et，fr'}，'google_-translate_-element'）；
}