文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML -如何使用Javascript翻译页面内容？

问HTML -如何使用Javascript翻译页面内容？
EN

Stack Overflow用户

提问于 2022-08-28 20:33:50

回答 1查看 50关注 0票数 0

为了翻译我的HTML页面，我做了以下工作：

<p data-key="paragraph-1">Hello world</p>
<p data-key="paragraph-2">This is a translated text!</p>

<div ...>
  <a data-key="aboutPage" href="about.html">About</a>
</div>

const translations = {
  "es": () => ({
    "title": "¡Hola mundo!",
    "subtitle": "¡Este texto ha sido traducido!",
    "routes": {
      "aboutPage": "Sobre",
    }
  }),
  ... 
}

const t = _.memoize(
  (
    scope,
    language = getNavigatorLanguage() ?? DEFAULT_LANGUAGE,
    fallbackLanguage = DEFAULT_LANGUAGE,
    fallbackText = ""
  ) => {
    const formattedLocale = language.split(/[-_]/)[0]; // Short version: "en", "es", "it"...

    const translation = // fallback
      (translationGetters[formattedLocale] ?? translationGetters[fallbackLanguage])();

    return (
      _.get(translation, scope) ??
      _.get(translationGetters[DEFAULT_LANGUAGE](), scope, fallbackText)
    );
  },
  (...args) => JSON.stringify(args)
);


$(() => {
  $("*[data-key='paragraph-1']").text(t("title"));
  $("*[data-key='paragraph-2']").text(t("subtitle"));
  $("*[data-key='aboutPage']").text(t("routes.aboutPage"));
});

我来自“反应本地人”，在那里我可以简单地做：

<Text>
  {t("routes.aboutPage")}
</Text>

但是我不确定在HTML上做这样的事情是否是一个好的实践(也许SEO是错误的，或者只是不好)：

<p>
  <script>
    t("title")
  </script>
</p>

为了翻译我所有的内容，我必须使用选择器吗？有什么建议吗？

html

jquery

javascript

回答 1

Stack Overflow用户

发布于 2022-08-28 20:50:11

步骤1:创建翻译功能

让我们创建一个名为“JavaScript”的新translate.js文件，然后编写代码，根据所选语言从lng文件夹中的JSON文件中获取翻译文本。

 function Translate() { 
    //initialization
    this.init =  function(attribute, lng){
        this.attribute = attribute;
        this.lng = lng; 
    }
    //translate 
    this.process = function(){
        _self = this;
        var xrhFile = new XMLHttpRequest();
        //load content data 
        xrhFile.open("GET", "lng/"+this.lng+".json", false);
        xrhFile.onreadystatechange = function ()
        {
            if(xrhFile.readyState === 4)
            {
                if(xrhFile.status === 200 || xrhFile.status == 0)
                {
                    var LngObject = JSON.parse(xrhFile.responseText);
                    var allDom = document.getElementsByTagName("*");
                    for(var i =0; i < allDom.length; i++){
                        var elem = allDom[i];
                        var key = elem.getAttribute(_self.attribute);
                        if(key != null) {
                            elem.innerHTML = LngObject[key]  ;
                        }
                    }
                
                }
            }
        }
        xrhFile.send();
    }
}

步骤2:切换语言功能

创建一个名为“JavaScript”的新index.js文件，以开始翻译过程

//This function will be called when user click changing language
function translate(lng, tagAttr){
    var translate = new Translate();
    translate.init(tagAttr, lng);
    translate.process();
    if(lng == 'en'){
      $("#enTranslator").css('color', '#f4623a');
      $("#khTranslator").css('color', '#212529');
    } 
    if(lng == 'kh'){
      $("#khTranslator").css('color', '#f4623a');
      $("#enTranslator").css('color', '#212529');
    }
}
$(document).ready(function(){
  //This is id of HTML element (English) with attribute lng-tag
  $("#enTranslator").click(function(){
    translate('en', 'lng-tag');
  });
  //This is id of HTML element (Khmer) with attribute lng-tag
  $("#khTranslator").click(function(){
    translate('kh', 'lng-tag');
  });
});

步骤3:用JSON定义翻译文本

让我们在JSON文件中定义翻译文本如下

步骤4:将翻译嵌入您的网站

将JavaScript文件"index.js“和"translate.js”导入HTML页面

<script src="js/translate.js"></script>
<script src="js/index.js"></script>

第一次加载页面时设置选定的语言

<body id="page-top" onload="translate('kh','lng-tag')">

为您想要翻译的文本定义带有属性lng-tag的HTML元素，属性值是JSON文件中定义的关键。

这是一个静态网站，它实现了上述方法在高棉语(柬埔寨语)和英语https://praject.co/之间的翻译。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73522076

复制

相似问题

问HTML -如何使用Javascript翻译页面内容？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML -如何使用Javascript翻译页面内容？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML -如何使用Javascript翻译页面内容？
EN