我正在开发一个可以使用多种语言的GUI网站。我使用的原始HTML文件是完全静态的。因此，如果需要翻译，我必须解析alle文件，注意某些词语或术语的位置，将它们全部交给翻译部门并在新语言文件中输入这些翻译。
由于这些文件完全是静态的，因此意味着必须多次翻译整个部分。不是很有效率。
所以现在我正在使用Javascript中的某种字典，只是在那些网站上交换条款。它主要以这种方式工作：
var dicEnglish = {
term 1: "This is the English text"
Ref: "Another English text"
}
var dicFrench = {
term 1: "This is the French text"
Ref: "Another French text"
}
其中包含需要更改的所有可能内容。 HTML代码中的每个候选者都获得一个class="dicRef" id="l_dicTag_#"as标识符，我将其切片到字典标记并使用以下代码进行交换：
var imgSrc = "en";
var ActiveDic;
var langSel;
if(window.name){
langSel=window.name;
}
else{langSel="English";
}
function LangChange(){
langClass = document.getElementsByClassName("dicRef");
var i = langClass.length;
var Start, Stop, idSrc, idDic;
var navText;
switch(langSel){
case "French":
langSel="French";
imgSrc = "en";
navText="Anglais";
break;
case "English":
case "Anglais":
default:
langSel="English";
imgSrc = "fr";
navText="French";
break;
}
ActiveDic="dic"+langSel;
window.name=langSel;
while(i--){
idSrc = langClass[i].id;
Start=idSrc.indexOf("_")+1;
Stop=idSrc.lastIndexOf("_");
idDic=idSrc.slice(Start,Stop);
if(window[ActiveDic][idDic]){
document.getElementById(idSrc).innerHTML=window[ActiveDic][idDic];}
else{
document.getElementById(idSrc).innerHTML="N/A";
}
}
if(document.getElementById("imgSel")){
document.getElementById("imgSel").src="../../img/"+imgSrc+".gif";
}
if (document.getElementById("l_SelLang1_1")){
document.getElementById("l_SelLang1_1").innerHTML=navText;
}
}
问题在于id-tag的唯一性。由于某些术语可能不止一次出现而某些术语生成，因此需要计数器。我宁愿省略计数器，但找不到任何其他标识符来整理所有目标条款并更改其内容。
因为我希望将来安全，所以我更喜欢能够处理可能的第三语言的解决方案。使用内部HTML需要多次标记相同的术语，每种语言一次。
那么有没有什么方法可以更有效，更轻松地定位所有术语，或者更好的方法呢？我只能使用客户端解决方案，所以没有PHP等等。
在此先感谢，希望这不会太久阅读。
您可以使用数据属性：“IE6和IE7中不支持HTML5属性”这一事实意味着您没有获取getAttribute()方法或dataset属性来检索/访问它们。但你仍然可以按照this post中的解释检索它们。
<div id="geoff" data-geoff="geoff">
var geoff = document.getElementById("geoff");
alert(geoff.getAttribute("data-geoff"));
更好的是，您可以使用jQuery .data()来支持以前版本的IE。
沿着这些方向的东西应该有效：
<div data-translate="translation_key"></div>
$("[data-translate]").each(function(){
var key = $(this).data('translate');
$(this).html(dictionary[key][current_lang] || "N/A");
});
对其他回答者没有冒犯，但是将文本存储在JavaScript或数据属性中对于搜索引擎或禁用的网站访问者来说并不好，并且在添加不必要的复杂代码时没有任何好处。在我看来，最好和最简单的解决方案是使用HTML lang属性并使用JavaScript来显示和隐藏所需的语言。此解决方案也会优雅地降级，因此如果站点访问者禁用了JavaScript，它仍将显示内容。这是我的解决方案：
HTML
<button id="switch-lang">Switch Language</button>
<h1><span lang="en">Hello</span> <span lang="es">Hola</span></h1>
<p lang="en">I really enjoy coding.</p>
<p lang="es">Me gusta mucho la codificación.</p>
jQuery的
$('[lang="es"]').hide();
$('#switch-lang').click(function() {
$('[lang="es"]').toggle();
$('[lang="en"]').toggle();
});
然后我建议添加HTML5 Geolocation以确定最初根据世界中的用户位置显示哪种语言。我还会使用Fontawesome语言图标向用户显示他们可以用任何人都能理解的方式切换语言：http://fontawesome.io/icon/language/
以下是CodePen的工作代码示例：https://codepen.io/codepajamas/pen/ZejaQz?editors=1010
以下是使用选择菜单在3种（或更多）语言之间进行更改的代码笔的另一个示例：https://codepen.io/codepajamas/pen/NjGOMV
使用地理位置和Cookie更新了完整示例
我一直在研究这个问题并创建了一个更新的示例，在中文和英文两种语言之间切换（如果您需要两种以上的语言，则必须隐藏所有语言并仅显示所选语言而不是按照我的方式切换）。此代码还检测是否已使用jQuery Cookie为该语言设置了现有cookie。它还检查他们的地理位置，如果他们的浏览器支持它自动将语言设置为中文，如果他们在台湾或中国，并在所有其他国家默认为英语。下面的代码被注释，以便您可以看到每个步骤正在做什么，并希望能够根据您的需要进行修改。这里是：
HTML
<button id="switch-lang">Switch Language Icon Here</button>
<h1><span lang="en">Hello</span> <span lang="zh">你好</span></h1>
<p lang="en">I really enjoy coding.</p>
<p lang="zh">我真的很喜歡編碼。</p>
jQuery注意：这需要链接到jQuery和jQuery Cookie
$(function () {
///// Language Switching (2 languages: English and Chinese). /////
// Initially disable language switching button.
$('#switch-lang').css({'pointer-events':'none',
'cursor':'default'}).attr('disabled','disabled');
function langButtonListen() {
$('#switch-lang').click(function (event) {
event.preventDefault();
$('[lang="zh"]').toggle();
$('[lang="en"]').toggle();
// Switch cookie stored language.
if ($.cookie('lang') === 'en') {
$.cookie('lang', 'zh', { expires: 7 });
} else {
$.cookie('lang', 'en', { expires: 7 });
}
});
// Enable lang switching button.
$('#switch-lang').css({'pointer-events':'auto',
'cursor':'pointer'}).removeAttr('disabled');
}
// Check if language cookie already exists.
if ($.cookie('lang')) {
var lang = $.cookie('lang');
if (lang === 'en') {
$('[lang="zh"]').hide();
langButtonListen();
} else {
$('[lang="en"]').hide();
langButtonListen();
}
} else {
// no cookie set, so detect language based on location.
if ("geolocation" in navigator) {
// geolocation is available
navigator.geolocation.getCurrentPosition(function (position) {
// accepted geolocation so figure out which country
var lat = position.coords.latitude,
lng = position.coords.longitude;
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+lng+'&sensor=true', null, function (response) {
var country = response.results[response.results.length-1].formatted_address;
if (country === 'Taiwan' || country === 'China') {
$('[lang="en"]').hide();
$.cookie('lang', 'zh', { expires: 7 });
langButtonListen();
} else {
$('[lang="zh"]').hide();
$.cookie('lang', 'en', { expires: 7 });
langButtonListen();
}
}).fail(function (err) {
console.log('error: '+err);
$('[lang="zh"]').hide();
$.cookie('lang', 'en', { expires: 7 });
langButtonListen();
});
},
function (error) {
if (error.code == error.PERMISSION_DENIED) {
// denied geolocation
$('[lang="zh"]').hide();
$.cookie('lang', 'en', { expires: 7 });
langButtonListen();
} else {
console.log('Unknown error. Defaulting to English!');
$('[lang="zh"]').hide();
$.cookie('lang', 'en', { expires: 7 });
langButtonListen();
}
});
} else {
// geolocation IS NOT available
$('[lang="zh"]').hide();
$.cookie('lang', 'en', { expires: 7 });
langButtonListen());
}
}
});
解决此问题的方法之一可能是为您的界面使用某种客户端模板系统。这样您就不需要用一堆详细说明语言要求的数据属性来不必要地加载HTML，而只需在JavaScript中描述一次并使用一些函数来协助翻译。我在下面编写了快速示例，向您展示我的意思。
这是字典对象。它包含国家代码的所有翻译。这意味着您不需要为每个国家/地区单独添加词典。这很重要，因为这意味着我们可以非常轻松地在翻译功能中使用这个单一的对象结构，就像你马上就会看到的那样。这也意味着您可以添加任意数量的语言和翻译。
var dict = {
en: {
'Hallo': 'Hallo',
'Goodbye': 'Goodbye',
'castle': 'castle'
},
fr: {
'Hallo': 'Bonjour',
'Goodbye': 'Au revoir',
'castle': 'chateau'
},
de: {
'Hallo': 'Hallo',
'Goodbye': 'Auf Wiedersehen',
'castle': 'schloss'
}
}
这是我们的国家/地区代码，它直接与我们的字典对象中的国家/地区代码键相关：
var lang = 'fr';
我们的两个职能中的第一个。这需要一个模板和一个语言并执行翻译，返回剩下的内容（通常是我们示例中的某种HTML）。
function applyTemplate(tmpl, lang) {
// find all words within {{word}} a double set of curly braces
// (this format is similar to the handlebars templating engine)
var regex = /\{\{([a-zA-Z])\w+\}\}/g
// for each found word perform the translation and
// remove the curly braces
return tmpl.replace(regex, function (word) {
return translate(dict, lang, word.replace(/[\{\}]/g, ''));
});
}
translate函数接受字典，语言和单词并返回翻译后的单词。请注意，使用包含所有国家/地区翻译的一个对象会更容易。
function translate(dict, lang, word) {
return dict[lang][word];
}
一些HTML。这是我们的模板（display：none）和输出元素。请注意，花括号中的单词是要翻译的单词。
<div class="template"><div>{{Goodbye}}, {{castle}}</div></div>
<div id="translation"><div>
最后，把它们放在一起：
// grab the template
var tmpl = document.querySelector('.template').textContent;
var translation = document.querySelector('#translation');
// grab our translated html and add it to the output element
var html = applyTemplate(tmpl, lang);
translation.insertAdjacentHTML('afterbegin', html);
现在，显然你不必使用这种方法（那里有几十个JS模板引擎），但模板对于需要使用多种语言的网站特别有用。许多人在后端做这件事，但正如你所看到的，它也很容易在客户端完成。
希望这很有用，并为您提供一些关于如何处理解决方案的不同想法。
<script type="text/javascript">
//加载Google Transliteration API google.load（“elements”，“1”，{packages：“transliteration”}）;
var transliterationControl;
function onLoad() {
var options = {
sourceLanguage: 'en',
destinationLanguage: ['hi','or','bn','ta','te'],
transliterationEnabled: true,
shortcutKey: 'ctrl+g'
};
// Create an instance on TransliterationControl with the required
// options.
transliterationControl =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textfields with the given ids.
var ids = [ "transl1", "transl2" ];
transliterationControl.makeTransliteratable(ids);
// Add the STATE_CHANGED event handler to correcly maintain the state
// of the checkbox.
transliterationControl.addEventListener(
google.elements.transliteration.TransliterationControl.EventType.STATE_CHANGED,
transliterateStateChangeHandler);
// Add the SERVER_UNREACHABLE event handler to display an error message
// if unable to reach the server.
transliterationControl.addEventListener(
google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE,
serverUnreachableHandler);
// Add the SERVER_REACHABLE event handler to remove the error message
// once the server becomes reachable.
transliterationControl.addEventListener(
google.elements.transliteration.TransliterationControl.EventType.SERVER_REACHABLE,
serverReachableHandler);
// Set the checkbox to the correct state.
document.getElementById('checkboxId').checked =
transliterationControl.isTransliterationEnabled();
// Populate the language dropdown
var destinationLanguage =
transliterationControl.getLanguagePair().destinationLanguage;
var languageSelect = document.getElementById('languageDropDown');
var supportedDestinationLanguages =
google.elements.transliteration.getDestinationLanguages(
google.elements.transliteration.LanguageCode.ENGLISH);
for (var lang in supportedDestinationLanguages) {
var opt = document.createElement('option');
opt.text = lang;
if (lang=="TAMIL" || lang=="TELUGU" || lang=="HINDI" || lang=="ORIYA" || lang=="BENGALI"){
opt.value = supportedDestinationLanguages[lang];
if (destinationLanguage == opt.value) {
opt.selected = true;
}
try {
languageSelect.add(opt, null);
} catch (ex) {
languageSelect.add(opt);
}
}//End of if
}
}
// Handler for STATE_CHANGED event which makes sure checkbox status
// reflects the transliteration enabled or disabled status.
function transliterateStateChangeHandler(e) {
document.getElementById('checkboxId').checked = e.transliterationEnabled;
}
// Handler for checkbox's click event. Calls toggleTransliteration to toggle
// the transliteration state.
function checkboxClickHandler() {
transliterationControl.toggleTransliteration();
}
// Handler for dropdown option change event. Calls setLanguagePair to
// set the new language.
function languageChangeHandler() {
var dropdown = document.getElementById('languageDropDown');
transliterationControl.setLanguagePair(
google.elements.transliteration.LanguageCode.ENGLISH,
dropdown.options[dropdown.selectedIndex].value);
}
// SERVER_UNREACHABLE event handler which displays the error message.
function serverUnreachableHandler(e) {
document.getElementById("errorDiv").innerHTML =
"Transliteration Server unreachable";
}
// SERVER_UNREACHABLE event handler which clears the error message.
function serverReachableHandler(e) {
document.getElementById("errorDiv").innerHTML = "";
}
google.setOnLoadCallback(onLoad);