如何使用 Google Translate-API 翻译 JS 中的整个页面文本内容答案

【问题标题】：How to translate whole page text content in JS with Google Translate-API如何使用 Google Translate-API 翻译 JS 中的整个页面文本内容
【发布时间】：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
它不起作用。不知道为什么？

标签： javascript html google-translation-api

【解决方案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>

【讨论】：