最新一個項目需要全站翻譯诗芜，但是有沒有做國際化恨闪。改起來比較麻煩究飞。所以就想有沒有什么好的方法可以直接翻譯整個網(wǎng)站置谦。
思路：
利用第三方翻譯API，把網(wǎng)頁中所有的中文發(fā)過去亿傅，拿到返回值之后把所有中文替換成英文霉祸。
1 百度翻譯開發(fā)平臺注冊
官網(wǎng)有很詳細(xì)的問題，一步一步走就OK啦袱蜡。附上它的官網(wǎng)丝蹭。
http://api.fanyi.baidu.com/api/trans/product/index
2 怎么使用
直接上代碼吧，注釋也還算清晰坪蚁。
<!doctype html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div>測試
<div>橘子</div>
</div>
<div>梨</div>
<div>測試</div>
<div>零食</div>
<div>水果</div>
<div>上班</div>
<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/md5.js"></script>
<script type="text/javascript">
transformLanguage('en');
function transformLanguage(newLanguage) {
// 獲取所有dom元素中文
let transformStr = '';
// 獲取所有dom元素
function getChildDom(dom, type, data = {}) {
if(type == 'read') {
[...dom.children].forEach(v => {
// 判斷中文
// /^[\u0391-\uFFE5]+$/
let re= /[\u4e00-\u9fa5]/g;
// 防止某些標(biāo)簽有內(nèi)容并且有標(biāo)簽 奔穿，或者有空格
let vHtml = $(v).contents().filter(function (index, content) {return content.nodeType === 3}).text().trim();
// 跳過script標(biāo)簽
if (re.test(vHtml) && v.tagName != 'SCRIPT') {
transformStr += `${vHtml},`
}
// 遞歸獲取元素
getChildDom(v, type, data);
})
}else {
let transOld = data.trans_result[0].src.split(',');
let transNew = data.trans_result[0].dst.split(',');
[...dom.children].forEach(v => {
// 判斷中文
// /^[\u0391-\uFFE5]+$/
let re= /[\u4e00-\u9fa5]/g;
let vHtml = $(v).contents().filter(function (index, content) {return content.nodeType === 3}).text().trim();
// 跳過script標(biāo)簽
if (re.test(vHtml) && v.tagName != 'SCRIPT') {
// 防止標(biāo)簽里面還有標(biāo)簽，所以只替換里面的html,使用replace
$(v).html(
$(v).html().replace(
transOld[transOld.findIndex(arrList => arrList == vHtml)]
,
transNew[transOld.findIndex(arrList => arrList == vHtml)]
)
)
}
// 遞歸獲取元素
getChildDom(v, type, data);
})
}
}
getChildDom(document,'read');
getTranslateData();
// 獲取翻譯
function getTranslateData() {
let appid = '*******************'; // 百度翻譯API的appid
let key = '*********************'; // 百度翻譯API的key
let salt = (new Date).getTime();
let query = transformStr;
let from = 'zh';
let to = newLanguage;
let str1 = appid + query + salt + key;
let sign = MD5(str1);
$.ajax({
url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
type: 'get',
dataType: 'jsonp',
data: {
q: query,
appid: appid,
salt: salt,
from: from,
to: to,
sign: sign
},
success: function(data) {
data.trans_result && getChildDom(document,'write',data);
console.log(data);
}
});
}
}
</script>
</body>
網(wǎng)上隨便找一個jq,和md5.js放進(jìn)去就好啦敏晤。
