微软翻译器翻译后如何恢复原文api

How can I restore the original text after it has been translated with micorosoft translator api

我已经能够使用 Microsoft 翻译器 API 将一段从英语翻译成西班牙语,并在用户单击我网页上的按钮时调用 AJAX。我想让他们能够切换回原始文本,而无需将西班牙语文本翻译回英语。当我查看页面源代码时,我可以看到原始文本,但我不确定如何将其显示给用户。

function Translate()
{
  var from = "en", to = "es", text = $('.Translate').text();
  
  var s = document.createElement("script");
  s.src = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate" +
      "?appId=Bearer " + encodeURIComponent(window.accessToken) +
      "&from=" + encodeURIComponent(from) +
      "&to=" + encodeURIComponent(to) +
      "&text=" + encodeURIComponent(text) +
      "&oncomplete=MyCallback";
  document.body.appendChild(s);
}

function MyCallback(response)
{
  $('.Translate').text(response);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnTranslate" onclick="Translate()" class="etsButton">Translate</button>
<button id="btnRestore" onclick="Restore()" class="etsButton">Restore</button>

<div style="padding:10px;" class="Translate">
To be, or not to be: that is the question:
Whether 'tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take arms against a sea of troubles,
And by opposing end them? 
</div>

查看页面源代码不会显示页面的当前 HTML。问题是您的行 $('.Translate').text(response); 破坏了您页面上的原始文本。

如果您希望能够切换回来,那么您需要将翻译后的文本放入一个新的div。然后您可以只显示和隐藏 divs 以在显示的版本之间切换。

你可以在翻译之前记住原文,方法是将它存储在一个变量中,然后在restore()函数中你可以用这个变量的内容替换text。但是因为这个临时变量应该在不同的函数中设置和获取它的值,所以它应该在更高的范围内。在您的情况下,它将是全球性的,但请记住,不推荐这样做。

var originalText; 

function Translate()
{
  var from = "en", to = "es", text = $('.Translate').text();

  originalText = text;

  var s = document.createElement("script");
  s.src = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate" +
      "?appId=Bearer " + encodeURIComponent(window.accessToken) +
      "&from=" + encodeURIComponent(from) +
      "&to=" + encodeURIComponent(to) +
      "&text=" + encodeURIComponent(text) +
      "&oncomplete=MyCallback";
  document.body.appendChild(s);
}

function restore(){
   $('.Translate').text(originalText);
}