JavaScript/jQuery - 获取文本并翻译它

发布于 2024-10-24 06:14:04 字数 166 浏览 9 评论 0原文

是否可以使用 jQuery 从元素中获取文本并将其翻译为其他语言?

之前

<p>Hello</p>

之后

<p>bonjour</p>

Is it possible to use jQuery to get a text from an element and translate it to other languages?

Before

<p>Hello</p>

After

<p>bonjour</p>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

唠甜嗑 2024-10-31 06:14:04

使用这个 JQuery 插件
https://github.com/tinoni/translate.js

免责声明:我是作者

1 -将“trn”类包含到要翻译的文本中:

<span class="trn">text to translate</span>

2 - 定义字典:

var dict = {
  "text to translate": {
    pt: "texto para traduzir"
  },
  "Download plugin": {
    pt: "Descarregar plugin",
    en: "Download plugin"
  }
}

3 - 翻译整个页面正文:

var translator = $('body').translate({lang: "en", t: dict}); //use English

4 - 更改为另一种语言:

translator.lang("pt"); //change to Portuguese

Use this JQuery plugin
https://github.com/tinoni/translate.js

Disclaimer: I am the author

1 - Include the "trn" class to the text you want to translate:

<span class="trn">text to translate</span>

2 - Define a dictionary:

var dict = {
  "text to translate": {
    pt: "texto para traduzir"
  },
  "Download plugin": {
    pt: "Descarregar plugin",
    en: "Download plugin"
  }
}

3 - Translate the entire page body:

var translator = $('body').translate({lang: "en", t: dict}); //use English

4 - Change to another language:

translator.lang("pt"); //change to Portuguese
呆° 2024-10-31 06:14:04

使用谷歌翻译API。便于使用。以下将西班牙语翻译成英语。要在其他语言之间进行翻译,只需更改 'es'

'en'

< /code>

google.load("language", "1");

function initialize() {
    var content = document.getElementById('content');
    content.innerHTML = '<div id="text">Hola, me alegro mucho de verte.<\/div><div id="translation"/>';
    var text = document.getElementById("text").innerHTML;
    google.language.translate(text, 'es', 'en', function(result) {
        var translated = document.getElementById("translation");
        if (result.translation) {
            translated.innerHTML = result.translation;
        }
    });
}
google.setOnLoadCallback(initialize);

检查工作示例 http://jsfiddle.net/wJ2QP/1/

Use Google translation API. Easy to use. The following translates Spanish to English. To translate from and to other languages, simply change 'es' and 'en'

<div id="content"></div>

google.load("language", "1");

function initialize() {
    var content = document.getElementById('content');
    content.innerHTML = '<div id="text">Hola, me alegro mucho de verte.<\/div><div id="translation"/>';
    var text = document.getElementById("text").innerHTML;
    google.language.translate(text, 'es', 'en', function(result) {
        var translated = document.getElementById("translation");
        if (result.translation) {
            translated.innerHTML = result.translation;
        }
    });
}
google.setOnLoadCallback(initialize);

Check working example at http://jsfiddle.net/wJ2QP/1/

天荒地未老 2024-10-31 06:14:04

您可以使用 Google 翻译的 Javascript API。

<p id="some">Hello</p>
<input id="trans" value="Translate" type="button">

<script>
   $('#trans').click(function() {
     google.language.translate($('#some').html(), 'en', 'fr', function(result) {
         $('#some').html(result.translation);
     });
   });
</script>

您需要在页面的 HEAD 部分加载 js 库才能使用 API。

You can use Google Translate's Javascript API.

<p id="some">Hello</p>
<input id="trans" value="Translate" type="button">

<script>
   $('#trans').click(function() {
     google.language.translate($('#some').html(), 'en', 'fr', function(result) {
         $('#some').html(result.translation);
     });
   });
</script>

You will need to load the js library in your page's HEAD section in order to use the API.

愿得七秒忆 2024-10-31 06:14:04

使用 Bing 翻译器,因为免费的 Google Translate API 已于 2011 年 12 月 1 日停止使用

Use the Bing translator, since the free Google Translate API has been discontinued on December 1, 2011

皇甫轩 2024-10-31 06:14:04

在此 PHP/JS 解决方案中,您应该使用包含 PHP 语言文件在会话/cookie 上设置语言而不是在 $_GET 上。为了简单,我将在

index.php文件

<?php
$lang = $_GET['lang'];

if ($lang == 'fr'){
    $w = array(
        'Trouvé',
        ' non trouvé.',
        'Erreur. Veuillez réessayer.'
    );  
}else if($lang == 'en'){
    $w = array(
        'Found',
        ' not found.',
        'Error. Please try again.'
    );  
}else{
    $w = array(
        'Trouvé',
        ' non trouvé.',
        'Erreur. Veuillez réessayer.'
    );  
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
....................
<body>
....................
    <script type="text/javascript">
        /*  Translate JS
            Declare JS variables for translation in PHP file as below (Global vars outside $(document).ready). 
            Inside JS file call the variable as $.lang_mynamespace.var_name
        */
        $.lang_scan = { 
            found_js:"<?=$w[0];?>",
            not_found_js:"<?=$w[1];?>",
            error_js:"<?=$w[2];?>"
        };  
    </script>
</body>
</html>

上执行JS文件

$(function() {
    $("#scan_result").on('change', function(){

        //check number
        $.ajax({
            url: "check.php",
            dataType: "json",
            type: "post",
            data: {'scan_no': scan_value} ,
            success: function (response) {
                if (response.status == true){
                    alert("Scan no. " + response.scan_no + $.lang_scan.found_js);
                }else{
                    alert("Scan no. " + response.scan_no + $.lang_scan.not_found_js);                      
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
               //ajax error 
               alert($.lang_scan.error_js);            
            }
        }); 

    }); 
});

check.php返回一个json

{"scan_no": "123", "status": true/false}

On this PHP/JS solution you should use include PHP language files and set language on session/cookie not on $_GET. For the sake of simplicity I will do it on the

index.php file

<?php
$lang = $_GET['lang'];

if ($lang == 'fr'){
    $w = array(
        'Trouvé',
        ' non trouvé.',
        'Erreur. Veuillez réessayer.'
    );  
}else if($lang == 'en'){
    $w = array(
        'Found',
        ' not found.',
        'Error. Please try again.'
    );  
}else{
    $w = array(
        'Trouvé',
        ' non trouvé.',
        'Erreur. Veuillez réessayer.'
    );  
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
....................
<body>
....................
    <script type="text/javascript">
        /*  Translate JS
            Declare JS variables for translation in PHP file as below (Global vars outside $(document).ready). 
            Inside JS file call the variable as $.lang_mynamespace.var_name
        */
        $.lang_scan = { 
            found_js:"<?=$w[0];?>",
            not_found_js:"<?=$w[1];?>",
            error_js:"<?=$w[2];?>"
        };  
    </script>
</body>
</html>

JS file

$(function() {
    $("#scan_result").on('change', function(){

        //check number
        $.ajax({
            url: "check.php",
            dataType: "json",
            type: "post",
            data: {'scan_no': scan_value} ,
            success: function (response) {
                if (response.status == true){
                    alert("Scan no. " + response.scan_no + $.lang_scan.found_js);
                }else{
                    alert("Scan no. " + response.scan_no + $.lang_scan.not_found_js);                      
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
               //ajax error 
               alert($.lang_scan.error_js);            
            }
        }); 

    }); 
});

check.php return a json

{"scan_no": "123", "status": true/false}
千里故人稀 2024-10-31 06:14:04

为什么不试试这个:

var body = $("body");
var html = body.html();
var nhtml = html.split(" ");
var dict = [];
for (var i = 0; i < nhtml.length; i++) {
    nhtml[i].replace(dict[index]);
}

它可以替代任何东西。

Why not try this:

var body = $("body");
var html = body.html();
var nhtml = html.split(" ");
var dict = [];
for (var i = 0; i < nhtml.length; i++) {
    nhtml[i].replace(dict[index]);
}

It can replace anything.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文