先交代下項目背景：項目為流程系統，項目架構並沒有多語言版本設計，在項目中期，HR的妹子突然提需求說要做一個多語言版本。本來做這個最簡單的方法是新開一個分支做成兩個版本，但這個方案被經理槍斃了，兩套代碼不利於后期維護，更改了一個版本另一個很難更改。所以任務就落到了樓主頭上。
簡述完畢，下面進入正題，要做一個完全前端的翻譯方案，基本思路就是查找替換方式，但是需面對以下一些難點：
1、如何查找出中文字符串，並且是完全匹配字符串還是只匹配中文字符串。
這個還是比較好解決的，我定義了兩種自定義標簽，一種叫“Translate”,使用精確打擊的策略。對單獨一個標簽的值進行替換。這個可以對單獨一個使用，完全匹配字符串的方式來翻譯原文。
第二種叫“TranslatB”,使用大范圍的模糊匹配的方式來翻譯，只要在body處使用一次即可，采用循環遍歷的方式，查找所有標簽的葉子標簽中的textcontent，對字符串翻譯。
2、標點符號問題，由於中文跟英語語法上的問題，一句中文翻譯后可能多出來一個“，”，“。”這樣的符號。
這個問題要靈活應用了，如果是大段的文字，我的建議是使用方法一“Translate”標簽，對字符串精確匹配完全替換，這樣就不用考慮標點符號的問題了。部分短語使用了“TranslateB”，大范圍替換方法，在“TranslateB”中我自動實現了將中文標點“，”，“。”替換為英文的‘,’，‘.’標點符號。
3、input標簽的text類型的值到底要不要翻譯。如果要翻譯，切換回中文后是否要顯示回中文，而不是英文。
對於input這樣的標簽，要想翻譯而又不影響原來的功能，最方便的方法，是把原來的標簽復制出來，更改name和ID屬性，原來的input的type改為hidden。然后對新的input進行“Translat”。這樣就不影響原來的功能，也能在切換回中文時，輸入框的值還是中文，保存翻譯效果一致性。
4、腳本中的字符如何翻譯，如alert conform等的提示。
在腳本中的文字翻譯，並不像html標簽一樣有東西可以遍歷。即使遍歷的所達到的效果也不是很理想的。所有我采用自定義腳本方法的方式，采用字符串原型定義一個“Translat()”方法來達到翻譯的目的。
以下在補充部分，在項目的開端可以判斷瀏覽器語言版本，根據瀏覽器語言版本自動設置cookies。前端保存cookies使用cookies來確定腳本使用個語言版本。
以下是部分腳本代碼，及示例。
var menuDict = [
{ Key: '工作區', Value: 'Work Area', Order: "1" },
{ Key: '待辦任務', Value: 'To-Do Task', Order: "1" },
{ Key: '已辦任務', Value: 'Completed Task', Order: "1" },
{ Key: '我發起的流程', Value: 'My Application', Order: "1" },
{ Key: '草稿箱', Value: 'Draft', Order: "1" },
{ Key: '代理設定', Value: 'Proxy Setting', Order: "1" },
{ Key: '發起流程', Value: 'Applications', Order: "1" },
{ Key: '歡迎', Value: 'Welcome', Order: "1" },
{ Key: '注銷', Value: 'Logout', Order: "1" }
]
//html翻譯，完全匹配才翻譯，可添加Order排序查找翻譯內容。
function TranslateA(languageDict) {
var language = $.cookie('language');
if (language == "English") {
if (languageDict == undefined) {
languageDict = dict;
}
//$("[placeholder]").each(function (k, v) {
// var Skey = $(v).attr("placeholder");
// var Tvalue = "";
// var myReg = /^[\u4e00-\u9fa5]+$/;//中文驗證
// $.each(languageDict, function (a, b) {
// if (b.Key.indexOf(Skey) >= 0) {
// Tvalue = b.Value;
// return false;
// }
// })
// if (Tvalue != "") {
// $(v).attr("placeholder", Tvalue);
// }
//})
$("[Translate]").each(function (k, v) {
var Skey = v.textContent;
var Sorder = $(v).attr("Translate");
var Tvalue = v.textContent;
var myReg = /^[\u4e00-\u9fa5]+$/;//中文驗證
$.each(languageDict, function (a, b) {
if (Sorder == "") {
if (b.Key == Skey) {
Tvalue = b.Value;
return false;
}
}
else {
if (b.Key == Skey && b.Order == Sorder) {
Tvalue = b.Value;
return false;
}
}
})
v.textContent = Tvalue;
})
$("[RegTranslate]").each(function (k, v) {
if (v.tagName == "INPUT") {//輸入框的Value替換掉
var myReg = /^[\u4e00-\u9fa5]+$/;//中文驗證
var Sval = v.value;
var TempVal = "";
var TempStr = "";
for (var i = 0; i < Sval.length; i++) {
if (myReg.test(Sval[i])) {
TempStr = TempStr + Sval[i];
}
else {
var isTanslate = false;
$.each(languageDict, function (a, b) {
if (b.Key == TempStr) {
TempVal = TempVal + b.Value;
TempStr = "";//還原臨時字符串
isTanslate = true;
return false;
}
})
if (!isTanslate) {
TempVal = TempVal + TempStr;
TempVal = TempVal + Sval[i];
TempStr = "";//還原臨時字符串
}
else {
TempVal = TempVal + Sval[i];
}
}
}
if (TempStr != "") {
var isTanslate = false;
$.each(languageDict, function (a, b) {
if (b.Key == TempStr) {
TempVal = TempVal + b.Value;
isTanslate = true;
TempStr = "";
}
})
if (!isTanslate) {
TempVal = TempVal + TempStr;
TempStr = "";
}
}
v.value = TempVal;
}
else {
var myReg = /^[\u4e00-\u9fa5]+$/;//中文驗證
var Sval = v.textContent;
var TempVal = "";
var TempStr = "";
for (var i = 0; i < Sval.length; i++) {
if (myReg.test(Sval[i])) {
TempStr = TempStr + Sval[i];
}
else {
var isTanslate = false;
$.each(languageDict, function (a, b) {
if (b.Key == TempStr) {
TempVal = TempVal + b.Value;
TempStr = "";//還原臨時字符串
isTanslate = true;
return false;
}
})
if (!isTanslate) {
TempVal = TempVal + TempStr;
TempVal = TempVal + Sval[i];
TempStr = "";//還原臨時字符串
}
else {
TempVal = TempVal + Sval[i];
}
}
}
if (TempStr != "") {
var isTanslate = false;
$.each(languageDict, function (a, b) {
if (b.Key == TempStr) {
TempVal = TempVal + b.Value;
isTanslate = true;
TempStr = "";
}
})
if (!isTanslate) {
TempVal = TempVal + TempStr;
TempStr = "";
}
}
v.textContent = TempVal;
}
})
$("[DeptTranslate]").each(function (k, v) {
if (v.tagName == "INPUT") {
var Sval = v.value;
if (Sval != "") {
$.ajax({
type: "post",
async: false,
url: '/Handle/PunchHandler.ashx',
data: { 'type': 'GetDeptNameEN', 'deptName': Sval },
dataType: "text",
error: function (result) {
console.log(v.value + '部門翻譯失敗');
},
success: function (result) {
if (result != "" && result != undefined) {
v.value = result;
}
}
});
}
}
})
}
}
function TranslateChine() {
$("[Translate]").each(function (k, v) {
var Skey = v.textContent;
var Sorder = $(v).attr("Translate");
var Tvalue = v.textContent;
var myReg = /^[\u4e00-\u9fa5]+$/;//中文驗證
$.each(dict, function (a, b) {
if (Sorder == "") {
if (b.Value.indexOf(Skey) >= 0) {
Tvalue = b.Key;
return false;
}
}
else {
if (b.Value.indexOf(Skey) >= 0 && b.Order == Sorder) {
Tvalue = b.Key;
return false;
}
}
})
v.textContent = Tvalue;
})
$("[placeholder]").each(function (k, v) {
var Skey = $(v).attr("placeholder");
var Tvalue = v.textContent;
var myReg = /^[\u4e00-\u9fa5]+$/;//中文驗證
$.each(dict, function (a, b) {
if (b.Value.indexOf(Skey) >= 0) {
Tvalue = b.Key;
return false;
}
})
$(v).attr("placeholder", Tvalue);
})
}
function TranslateB(lang) {
var language = $.cookie('language');
if (language == "English") {
$("[TranslateB]").each(function (k, v) {
TranslateVersion(v, lang);
})
}
}
//html翻譯，遞歸遍歷子元素方式（只匹配中文，不匹配標點符號、數字等符號，不能翻譯字符保留不變）
function TranslateVersion(o, languageDict) {
if (languageDict == undefined) {
languageDict = dict;
}
$.each(o.childNodes, function (a, b) {
if (b.childNodes != undefined) {
if (b.childNodes.length == 0 ) {//最末節點沒有子元素了
if (b.tagName == "INPUT" || b.tagName == "TEXTAREA" || b.tagName == "BUTTON") {//如果為Input元素則不翻譯Value
if (b.tagName == "BUTTON") {
$.each(languageDict, function (a5, b5) {
if (b5.Key == b.textContent) {
b.textContent = b5.Value;
return false;
}
})
}
else {
if (b.type == "button") {
$.each(languageDict, function (a4, b4) {
if (b4.Key == b.value) {
b.value = b4.Value;
return false;
}
})
}
if (b.placeholder != undefined && b.placeholder != "") {
$.each(languageDict, function (a3, b3) {
if (b3.Key == b.placeholder) {
b.placeholder = b3.Value;
return false;
}
})
}
}
}
else {
var myReg = /^[\u4e00-\u9fa5]+$/;//中文驗證
var TempVal = "";
var TempStr = "";
var Sval = "";
if (b.innerHTML == undefined) {//沒有InnerHTML只有TextContent的元素。
Sval = b.textContent;
}
else {
Sval = b.innerHTML;
}
for (var i = 0; i < Sval.length; i++) {
if (myReg.test(Sval[i])) {
TempStr = TempStr + Sval[i];
}
else {
var isTanslate = false;
$.each(languageDict, function (a1, b1) {
if (b1.Key == TempStr) {
TempVal = TempVal + b1.Value;
TempStr = "";//還原臨時字符串
isTanslate = true;
return false;
}
})
if (!isTanslate) {
TempVal = TempVal + TempStr;
if (Sval[i] == "，") {//標點符號轉換
TempVal = TempVal + ',';
}
else if (Sval[i] == "。") {
TempVal = TempVal + '.';
}
else {
TempVal = TempVal + Sval[i];
}
TempStr = "";//還原臨時字符串
}
else {
TempVal = TempVal + Sval[i];
}
}
}
if (TempStr != "") {//處理最后一個字符串
var isTanslate = false;
$.each(languageDict, function (a2, b2) {
if (b2.Key == TempStr) {
TempVal = TempVal + b2.Value;
isTanslate = true;
TempStr = "";
return false;
}
})
if (!isTanslate) {
if (TempStr == "，") {//標點符號轉換
TempVal = TempVal + ',';
}
else if (TempStr == "。") {
TempVal = TempVal + '.';
}
else {
TempVal = TempVal + TempStr;
}
TempStr = "";
}
}
if (b.innerHTML == undefined) {
b.textContent = TempVal;
}
else {
b.innerHTML = TempVal;//更換
}
}
}
else {
TranslateVersion(b, languageDict);//遞歸
}
}
})
}
//腳本字符串翻譯（只匹配中文，不匹配標點符號、數字等符號，不能翻譯字符保留不變）
String.prototype.Translate = function (Sorder) {
var me = this;
if (me != undefined) {
var language = $.cookie('language');
if (language == "English") {
var myReg = /^[\u4e00-\u9fa5]+$/;//中文字符驗證(不包括標點符號、數字、特殊字符)
var TempVal = "";
var TempStr = "";
var Sval = me.toString();
for (var i = 0; i < Sval.length; i++) {
if (myReg.test(Sval[i])) {
TempStr = TempStr + Sval[i];
}
else {
var isTanslate = false;
$.each(dict, function (a1, b1) {
if (b1.Key == TempStr) {
TempVal = TempVal + b1.Value;
TempStr = "";//還原臨時字符串
isTanslate = true;
return false;
}
})
if (!isTanslate) {
TempVal = TempVal + TempStr;
if (Sval[i] == "，") {//標點符號轉換
TempVal = TempVal + ',';
}
else if (Sval[i] == "。") {
TempVal = TempVal + '.';
}
else {
TempVal = TempVal + Sval[i];
}
TempStr = "";//還原臨時字符串
}
else {
if (Sval[i] == "，") {//標點符號轉換
TempVal = TempVal + ',';
}
else if (Sval[i] == "。") {
TempVal = TempVal + '.';
}
else {
TempVal = TempVal + Sval[i];
}
}
}
}
if (TempStr != "") {//處理最后一個字符串
var isTanslate = false;
$.each(dict, function (a2, b2) {
if (b2.Key == TempStr) {
TempVal = TempVal + b2.Value;
isTanslate = true;
TempStr = "";
return false;
}
})
if (!isTanslate) {
if (TempStr == "，") {//標點符號轉換
TempVal = TempVal + ',';
}
else if (TempStr == "。") {
TempVal = TempVal + '.';
}
else {
TempVal = TempVal + TempStr;
}
TempStr = "";
}
}
return TempVal;
}
else {
return me.toString();
}
}
}
String.prototype.TranslateAll = function (Sorder) {
var me = this;
if (me != undefined) {
var language = $.cookie('language');
if (language == "English") {
var TempVal = "";
var TempStr = "";
var Sval = me.toString();
$.each(dict, function (a1, b1) {
if (b1.Key == Sval) {
TempVal = b1.Value;
isTanslate = true;
return false;
}
})
return TempVal;
}
else {
return me.toString();
}
}
}