如何使用谷歌翻译翻译网站表单字段（文本框、文本区域）中的值？答案

【问题标题】：How can I use Google Translate for translating values in a website form field (text box, text area)?如何使用谷歌翻译翻译网站表单字段（文本框、文本区域）中的值？
【发布时间】：2011-09-10 14:02:44
【问题描述】：

我想使用Google Translate 翻译我的网站。我使用了下面的代码。

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
    new google.translate.TranslateElement({
        pageLanguage: 'en'
    }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

它可以很好地处理网站的文本，但不能翻译文本框、文本区域的文本。有解决办法吗？

【问题讨论】：

准备好的应该是你的结果大部分不友好。自动翻译对所谓的要点翻译很有帮助，尽管没有完全报销。

标签： language-translation google-translator-toolkit

【解决方案1】：

您可以遍历页面中的元素并对 Google Translate API 进行单独的 ajax 调用，以逐一翻译它们，然后替换文本框/文本区域的值。

使用jQuery，您可以遍历您的文本框、文本区域以及您想要的所有其他内容。代码应该是这样的：

$('input:text').each(function(index) {

    var elementId = $(this).attr("id"); 

    //Call the Google API
    $.ajax({
        type : "GET",
        url : "https://ajax.googleapis.com/ajax/services/language/translate",
        dataType : 'jsonp',
        cache: false,
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        data : "v=1.0&q="+$("#"+elementId).val()+"&langpair=en|es",
        success : function(iData){
            //update the value
            $("#"+elementId).val(iData["responseData"]["translatedText"]);      
        },
        error:function (xhr, ajaxOptions, thrownError){ }
    });
});

如您所见，&langpair=en|es 参数要求从英语翻译成西班牙语。

请记住，每个<input type="text".../> 都会进行一次调用，因此您可能需要添加某种验证来过滤无用的调用！您可能还想验证 Google 的答案。

为了了解 Google 将向您发送的响应类型，请点击以下链接： http://code.google.com/apis/language/translate/v1/using_rest_translate.html

编辑：由于免费使用 Google 的 API 将在 2011 年 12 月 1 日关闭，您可以使用 Apertium。调用和响应几乎一样：http://api.apertium.org/json/translate?q=hello%20world&langpair=en|es

【讨论】：

另请注意，谷歌将在几个月后关闭 API，显然是因为这样的努力。 news.ycombinator.com/item?id=2590374
我同意@tripleee 如果您的页面包含大量输入框和文本区域，则此方法不是最好的，因为您将向 API 发起大量调用，并且如果您的网站流量很大，Google 不会爱你的。
值得注意的是，Apertium 的语言库相当有限，至少目前是这样。
apertium API url 应该是：https://www.apertium.org/apy/translate?q=hello%20world&langpair=en|es

【解决方案2】：

另一种解决方案是将@pgratton 的答案中的所有呼叫仅包含在一个呼叫中。使用标签分隔所有内容。

例如，将三个文本框的所有内容放在一个字符串中，如下所示：

<t1>Desk</t1><t2>Monitor</t2><t3>Keyboard</t3>

并将其发送到 Google API。然后你会得到类似的东西：

<t1>Secretária</t1><t2>Ecrã</t2><t3>Teclado</t3>

这是您可以保存 API 调用的方法。差不多两年前我已经尝试过了，那时它正在工作。您只需要确保标签或您用来分隔字段的任何内容都没有被翻译，并且不会在翻译中丢失。必须保留分隔符。

【讨论】：