如何使用 Google Translate-API 翻译 JS 中的整个页面文本内容
Posted
技术标签:
【中文标题】如何使用 Google Translate-API 翻译 JS 中的整个页面文本内容【英文标题】：How to translate whole page text content in JS with Google Translate-API 【发布时间】：2019-12-06 20:13:14 【问题描述】：我有一个网页。它有很多文本数据。如何使用 Google Translate-API 翻译所有文本数据？
我尝试了一些代码并进行了开发，但它只更改特定文本或一次更改整个文本并打印一次。
这是我尝试开发但没有成功的代码。
<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>
我想翻译整个页面，但页面不应损坏。它像谷歌翻译一样在页面上运行。
【问题讨论】：
jsfiddle.net/solodev/0stLrpqg 它不起作用。不知道为什么？ 【参考方案1】：我认为使用谷歌翻译的下拉菜单而不是您创建的表单可能更简单。然后，您可以将下拉菜单的选项限制为您想要包含的语言。为此，您可以将包含的语言添加到函数中，就像我在下面的代码中所做的那样。我使用了原始形式的语言。如果您想更改下拉菜单中提供的语言，只需将该语言的特定缩写添加到包含的语言列表中即可。
All the abbreviations for languages with 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>
【讨论】：
以上是关于如何使用 Google Translate-API 翻译 JS 中的整个页面文本内容的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Google Apps 脚本将公式添加到 Google 表格？
如何使用 Google 服务帐户通过 Activity API 检索 Google Drive 活动？
如何解决 Google GMS 在被锁定失效后，无法再使用 Google Play Store的问题；亦适用于在不使用 Google GMS 的情况下，如何正常使用Google Play 商店
如何解决 Google GMS 在被锁定失效后，无法再使用 Google Play Store的问题；亦适用于在不使用 Google GMS 的情况下，如何正常使用Google Play 商店