如何只翻译一个html<div>答案

【问题标题】：How to translate only one html<div>如何只翻译一个html<div>
【发布时间】：2020-11-10 23:27:33
【问题描述】：

我有一个 API 向提供商请求的服务列表。我无权以任何方式访问后端配置。我只能通过 twig 模板对 html 进行一些更改。

所以，我想知道是否有任何方法可以通过 ajax 与 google 自动翻译这些描述，或者我需要一个 api 等。

我已经检查了使用 google API 的可能性，但我没有足够的技术知识来实现它。

例子

<select class="form-control" id="category">
          </select>
          <div id="category_description"> <!-- <div> that i would like to translate-->
                          <p>Hello World!</p>
                          <p>Hello World!</p>
                          <p>Hello World!</p>
                        </div>

寻找国际化（i18n），寻找react-i18next之类的库，但据我了解，翻译需要更早，这变得不可行，因为有超过1500个描述和100万个字符。

所以，我想，我可能错了，如果这个翻译是动态的，它会更好，只是为了向用户显示的描述。

使用rapidapi的systran api，我可以使用那里提供的代码进行翻译，但我不知道如何使用输出来替换原文。

translate = $('#category_description').text()
var settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://systran-systran-platform-for-language-processing-v1.p.rapidapi.com/translation/text/translate",
  data: {
        source: "en",
        target: "pt",
        input: translate,
      },
    "method": "GET",
    "headers": {
        "x-rapidapi-host": "systran-systran-platform-for-language-processing-v1.p.rapidapi.com",
        "x-rapidapi-key": "7f58b5667bmshd95c9dc930cbf6ap1d0268jsnd64f23091817"
    },
}



$.ajax(settings).done(function (response) {
  console.log(response)

});

输出：

Object {
outputs: [Object {
output: "
Olá! mundo!
Olá! mundo!
Olá! mundo!
",
stats: Object {
elapsed_time: 26,
nb_characters: 36,
nb_tokens: 9,
nb_tus: 3,

感谢您的帮助

【问题讨论】：

标签： javascript translation google-translate translate

【解决方案1】：

var btnTranslate = document.querySelector("button[name='btnTranslate']");

btnTranslate.addEventListener("click", TextTranslator);

function TextTranslator(){
    
    var divTranslateContent = document.querySelector("div[id='category_description']");        
        
    var elements = divTranslateContent.querySelectorAll("p");
    
    var translatedTexts = [];
    
    for (var i = 0; i < elements.length; i++) {
        translatedTexts.push(elements[i].innerText);
    }
    
    InvokeAPITranslator(translatedTexts.toString().replace(","," . "), ReplaceText, elements);
    
}

function ReplaceText(response, elementsP){
    var arrayOfStrings = response.outputs[0].output.split(".");    
    
    for (var i = 0; i < arrayOfStrings.length; i++) {
        elementsP[i].innerText = arrayOfStrings[i].trim();
    }        
}

function InvokeAPITranslator(textToTranslate, callback, elementsP){
    
    var settings = {
        "async": true,
        "crossDomain": true,
        "url": "https://systran-systran-platform-for-language-processing-v1.p.rapidapi.com/translation/text/translate",
      data: {
            source: "en",
            target: "pt",
            input: textToTranslate,
          },
        "method": "GET",
        "headers": {
            "x-rapidapi-host": "systran-systran-platform-for-language-processing-v1.p.rapidapi.com",
            "x-rapidapi-key": "7f58b5667bmshd95c9dc930cbf6ap1d0268jsnd64f23091817"
        },
    }

    $.ajax(settings).done(function (response) {
      callback(response, elementsP)
    });
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Trad</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <select class="form-control" id="category">
    </select>
    <button type="button" name="btnTranslate">Click Me!</button>
    
    <div id="category_description"> <!-- <div> que eu gostaria de traduzir-->
      <p>First text to be modified</p>
      <p>Second text to be modified</p>
    </div>
    <p>Text that should not be modified</p>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="translate.js"></script>
</body>

【讨论】：

首先，非常感谢。代码有效。我现在唯一遇到的问题是由于请求过多而导致的错误。我理解它的发生是因为该函数正在请求逐个元素的翻译。除了使翻译变慢之外，它只返回一小部分翻译。我试图将所有元素放在一个字符串中以将它们发送到翻译，但我无法将文本返回到原始位置。有什么想法吗？
您可以轻松解决问题，将所有
元素聚合到一个数组中，然后向翻译 API 发出单个请求。我根据我的建议调整了回复。我很高兴能够尽我所能做出贡献。
注意不要让字符“。”在要翻译的内容中，或使用任何其他字符（没有机会使用）作为分隔符。
嗨，Silvair L. Soares，非常感谢您迄今为止的所有帮助。我正在尝试另一种方法，与您解释的含义相同，但方式不同。我将所有需要翻译的文本都放入了 class="translate-pt"，所以我使用 var arrayFromClass = []; 将所有文本组成了一个数组。 $('.translate-pt').each(function(){ arrayFromClass.push(this.innerText); });但我仍然无法重新分配源元素中的翻译文本。你觉得有可能吗？
除了
元素之外，我还尝试翻译一些、