How to translate only one html

问题

I have a list of services requested by API from a provider. I do not have access to the backend configuration in any way. I can only make some changes to html via twig templates.

So, I would like to know if there is any way to translate these descriptions automatically via ajax with google, or I need an api, etc.

I already check the possibility of using the google API, but I don't have enough technical knowledge to implement it.

Example

<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>

looking for internationalization (i18n), finding libraries like react-i18next, but all of them as I understand it, a translation needs to be earlier, which becomes unviable because there are more than 1500 descriptions and 1 million characters.

So, I think, I may be wrong, that this translation would be better if it were somehow dynamic, just for the descriptions that would appear for the user.

Using the systran api for rapidapi, I can do the translation using the code presented there, but I don't know how to use the output to replace the original text.

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)

});

Output:

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

Thank you for your help

回答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>

来源：https://stackoverflow.com/questions/63016950/how-to-translate-only-one-htmldiv

标签

javascript

translation

google-translate

translate

How to translate only one html<div>

问题

回答1: