利用第三方翻译API翻译整个网站
2019-12-18 本文已影响0人
会飞的猪l
最新一个项目需要全站翻译，但是有没有做国际化。改起来比较麻烦。所以就想有没有什么好的方法可以直接翻译整个网站。
思路：
利用第三方翻译API，把网页中所有的中文发过去，拿到返回值之后把所有中文替换成英文。
1 百度翻译开发平台注册
官网有很详细的问题，一步一步走就OK啦。附上它的官网。
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;
// 防止某些标签有内容并且有标签 ，或者有空格
let vHtml = $(v).contents().filter(function (index, content) {return content.nodeType === 3}).text().trim();
// 跳过script标签
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标签
if (re.test(vHtml) && v.tagName != 'SCRIPT') {
// 防止标签里面还有标签，所以只替换里面的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>
网上随便找一个jq,和md5.js放进去就好啦。
