如何只翻译一个html< div> [英] How to translate only one html<div>
问题描述
我有供应商提供的API请求的服务列表.我无权以任何方式访问后端配置.我只能通过树枝模板对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.
所以，我想知道是否有任何方法可以通过Google的Ajax自动翻译这些描述，或者我需要一个api等.
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.
我已经检查了使用Google API的可能性，但是我没有足够的技术知识来实现它.
I already check the possibility of using the google API, but I don't have enough technical knowledge to implement it.
示例
<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万个字符，翻译变得不可行.
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.
使用systran API for Rapidapi，我可以使用此处提供的代码进行翻译，但是我不知道如何使用输出来替换原始文本.
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)
});
输出:
Object {
outputs: [Object {
output: "
Olá! mundo!
Olá! mundo!
Olá! mundo!
",
stats: Object {
elapsed_time: 26,
nb_characters: 36,
nb_tokens: 9,
nb_tus: 3,
谢谢您的帮助
推荐答案
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>
这篇关于如何只翻译一个html< div>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
