如何使用Google Translate JQuery脚本同时翻译博客正文与页面标题DIV？

当然可以实现！其实Google Translate API支持一次请求翻译多个文本片段，咱们只需要稍微修改一下你的现有脚本，就能同时搞定标题和正文的翻译，不用发两次请求，效率更高。

修改思路 #

1. 同时获取页面标题DIV和正文的文本内容
2. 把两个文本片段都加入到翻译请求的参数中
3. 拿到翻译结果后，分别把对应内容赋值给目标元素

修改后的完整代码 #

假设你的页面标题DIV的ID是pageTitle（如果不是，记得替换成你实际使用的ID或选择器），修改后的代码如下：

$("#translateButton").click(function () {
    // 获取要翻译的两个文本：标题和正文
    const titleText = $("#pageTitle").text();
    const contentText = $("#txtSource").text();
    
    // 构造API请求URL
    let url = "https://translation.googleapis.com/language/translate/v2?key=MY_API";
    url += "&source=" + $("#sourceLang").text();
    url += "&target=" + $("#targetLang").val();
    // 加入标题和正文的翻译请求，用encodeURIComponent替代废弃的escape
    url += "&q=" + encodeURIComponent(titleText);
    url += "&q=" + encodeURIComponent(contentText);
    
    $.get(url, function (data, status) {
        // 第一个翻译结果是标题，第二个是正文
        $("#pageTitle").text(data.data.translations[0].translatedText);
        $("#txtTarget").val(data.data.translations[1].translatedText);
    });
});

关键注意事项 #

• 替换选择器：一定要把代码里的#pageTitle换成你页面中实际的标题DIV的选择器（比如如果是类名就用.page-title）
• 废弃函数替换：我把原来的escape()换成了encodeURIComponent()，因为escape()已经被标准废弃了，后者更安全规范
• API限制：要注意Google Translate API的单次请求字符数限制，如果你的标题+正文内容过长，可能需要拆分请求，但一般博客内容都没问题
• 元素赋值：如果你的标题DIV是需要替换文本内容，直接用.text()就可以，如果是其他需求（比如替换HTML），可以改成.html()

这样修改后，点击翻译按钮时，页面标题和正文就会同时被翻译啦！

内容的提问来源于stack exchange，提问作者Robin van der Burght