如何使用 Google Translate-API 在 JS 中翻译整页文本内容 [英] How to translate whole page text content in JS with Google Translate-API
问题描述
我有一个网页.它有很多文本数据.如何使用 Google Translate-API 翻译所有文本数据?
I have a web page. It has so many text data. How can i translate all text data with Google Translate-API?
我尝试了一些代码并进行了开发，但它只更改特定文本或一次更改整个文本并打印一次.
I tried some code and develop but it only changes specific text or it changes whole text in one time and print it one time.
这是我尝试开发的代码，但没有成功.
This is the code i tried to develop but i didn't succes.
<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>
我想翻译整个页面，但页面不应损坏.它在页面上像谷歌翻译一样运行.
I want to translate the entire page, but the page should not be corrupted. It run like Google-Translate on page.
推荐答案
我认为使用 google translate 的下拉菜单代替您创建的表单可能更简单.然后，您可以将下拉菜单的选项限制为您想要包含的语言.为此，您可以向函数添加包含的语言，就像我在下面的代码中所做的那样.我使用了您原始形式中的语言.如果您想更改下拉菜单中提供的语言，只需将该语言的特定缩写添加到包含的语言列表中即可.
I think it may be simpler to use google translate's dropdown menu instead of the form you created. You can then limit the dropdown menu's options to the languages you want to include. To do this you can add included languages to the function, like I did in the code below. I used the languages you had in your original form. If you want to change the languages provided in the dropdown menu just add that language's specific abbreviation to the included languages list.
一旦我将代码切换为只使用谷歌翻译下拉菜单，页面上的所有文本都会翻译.
Once I switched the code to just use the google translate dropdown menu, all the text on the page translated.
<!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 中翻译整页文本内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
