translate.js
兩行js實(shí)現(xiàn)html全自動(dòng)翻譯。
無需改動(dòng)頁面、無語言配置文件、無API Key、對SEO友好！
特性
使用極其簡單。 無需任何前期準(zhǔn)備，直接加入幾行代碼即可擁有多種語言全自動(dòng)切換能力。
不增加工作量。 無需另行改造頁面本身，也沒有各種語言都要單獨(dú)配置的語言文件，更不需要你對頁面本身要顯示的文字區(qū)域進(jìn)行代碼調(diào)用，我認(rèn)為那樣對技術(shù)人員實(shí)在是太不友好了。而且它也不需要你到某某網(wǎng)站申請什么key，它本身就是開放的，拿來即用。
極其靈活擴(kuò)展。 您可指定它只翻譯某些指定區(qū)域、切換語言時(shí)顯示下拉框還是通過擺放多個(gè)切換語言按鈕進(jìn)行、可指定某些特定的元素不進(jìn)行翻譯忽略……
自動(dòng)匹配語種。 自動(dòng)根據(jù)用戶所在的國家切換其國家所使用的語種
瞬間翻譯能力。 內(nèi)置緩存預(yù)加載機(jī)制，只要翻譯過的網(wǎng)頁，再次看時(shí)會達(dá)到瞬間翻譯的效果，給用戶的感覺就是，這個(gè)頁面本來就是這種語言的，而不是經(jīng)過第三方翻譯的。
永久免費(fèi)使用。 采用Apache-2.0開源協(xié)議，您可永久免費(fèi)使用。
搜索引擎友好。 完全不影響你本身網(wǎng)站搜索引擎的收錄。爬蟲所爬取的網(wǎng)頁源代碼，它不會對其進(jìn)行任何改動(dòng)，你可完全放心。
后端翻譯開源。 在某些政府機(jī)關(guān)及大集團(tuán)內(nèi)部項(xiàng)目中，對數(shù)據(jù)隱私及安全保密有強(qiáng)要求場景、或您對自有客戶希望提供自建高可靠翻譯服務(wù)場景時(shí)，您可將后端翻譯接口進(jìn)行私有化部署，不走我們公開開放的翻譯接口，以做到安全保密及后端服務(wù)全部自行掌控。
在線體驗(yàn)
http://res.zvo.cn/translate/demo.html
先拿別人的網(wǎng)站動(dòng)手試試
隨便打開一個(gè)網(wǎng)頁
右鍵 - 審查元素
粘貼入以下代碼：
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'https://res.zvo.cn/translate/inspector_v2.js';
head.appendChild(script);
Enter 回車鍵 ， 執(zhí)行
在當(dāng)前網(wǎng)頁的左上角，就出現(xiàn)了一個(gè)大大的切換語言，切換試試看。
快速使用
在網(wǎng)頁最末尾， </html> 之前，加入以下代碼，一般在頁面的最底部就出現(xiàn)了選擇語言的 select 切換標(biāo)簽。 其實(shí)就這么簡單：
<script src="https://res.zvo.cn/translate/translate.js"></script>
<script>
translate.setUseVersion2(); //設(shè)置使用v2.x 版本
translate.language.setLocal('chinese_simplified'); //設(shè)置本地語種（當(dāng)前網(wǎng)頁的語種）。如果不設(shè)置，默認(rèn)自動(dòng)識別當(dāng)前網(wǎng)頁顯示文字的語種。 可填寫如 'english'、'chinese_simplified' 等，具體參見文檔下方關(guān)于此的說明。
translate.execute();//進(jìn)行翻譯
</script>
更多擴(kuò)展用法
指定切換語言的select選擇框的位置
你想在你頁面什么地方顯示，就吧下面這個(gè)放到哪即可。
<div id="translate"></div>
主要是這個(gè) id="translate" 切換語言的按鈕會自動(dòng)賦予這個(gè)id里面。當(dāng)然你也不一定非要是div的，也可以這樣
<span id="translate"></span>
CSS美化切換語言按鈕
可使用css來控制切換語言選擇的顯示位置及美觀。如：
<style>
.translateselectLanguage{
position: absolute;
top:100px;
right:100px;
}
</style>這就是控制切換語言的 <select> 標(biāo)簽
設(shè)定是否自動(dòng)出現(xiàn) select 切換語言
/*
* 是否顯示 select選擇語言的選擇框，true顯示； false不顯示。默認(rèn)為true
* 注意,這行要放到 translate.execute(); 上面
*/
translate.selectLanguageTag.show = false;
translate.execute();
使用場景是，如果使用了:
<a href="javascript:translate.changeLanguage('en');">切換為英語</a>這種切換方式，那么 select下拉選擇的就用不到了，就可以用此方式來不顯示。
當(dāng)然你也可以使用css的方式來控制其不顯示。比如：
<style>#translate{ display:none;}</style>自定義出現(xiàn)的 select 切換語言所支持的語種
translate.selectLanguageTag.languages = 'english,chinese_simplified,korean'; //每個(gè)語種之間用英文,分割。比如這里設(shè)置的是支持英語、簡體中文、韓語 的切換。根據(jù)后端翻譯服務(wù)不同，支持的語言也不同。具體支持哪些，可通過 http://api.translate.zvo.cn/doc/language.json.html 獲取 （如果您私有部署的，將請求域名換為您自己私有部署的域名）
每個(gè)語種之間用英文,分割。比如這里設(shè)置的是支持英語、簡體中文、韓語 的切換。根據(jù)后端翻譯服務(wù)不同，支持的語言也不同。
具體支持哪些，可通過 http://api.translate.zvo.cn/doc/language.json.html 獲取 （如果您私有部署的，將請求域名換為您自己私有部署的域名）
注意，這行要放到 translate.execute(); 上面
翻譯時(shí)忽略指定的tag標(biāo)簽
translate.ignore.tag.push('span'); //翻譯時(shí)追加上自己想忽略不進(jìn)行翻譯的tag標(biāo)簽，凡是在這里面的，都不進(jìn)行翻譯。翻譯時(shí)追加上自己想忽略不進(jìn)行翻譯的tag標(biāo)簽，凡是在這里面的，都不進(jìn)行翻譯。
如果你想查看當(dāng)前忽略哪些tag標(biāo)簽，可直接執(zhí)行 console.log(translate.ignore.tag); 進(jìn)行查看 注意，這行要放到 translate.execute(); 上面
翻譯時(shí)忽略指定的class值
translate.ignore.class.push('test'); //翻譯時(shí)追加上自己想忽略不進(jìn)行翻譯的class name的值，凡是在這里面的，都不進(jìn)行翻譯。翻譯時(shí)追加上自己想忽略不進(jìn)行翻譯的class標(biāo)簽，凡是在這里面的，都不進(jìn)行翻譯。
如果你想查看當(dāng)前忽略哪些class，可直接執(zhí)行 console.log(translate.ignore.class); 進(jìn)行查看
注意，這行要放到 translate.execute(); 上面
翻譯時(shí)忽略指定的id值
translate.ignore.id.push('test'); //翻譯時(shí)追加上自己想忽略不進(jìn)行翻譯的id的值，凡是在這里面的，都不進(jìn)行翻譯。翻譯時(shí)追加上自己想忽略不進(jìn)行翻譯的id的值，凡是在這里面的，都不進(jìn)行翻譯。
如果你想查看當(dāng)前忽略哪些id，可直接執(zhí)行 console.log(translate.ignore.id); 進(jìn)行查看
注意，這行要放到 translate.execute(); 上面
翻譯指定的區(qū)域
var documents = [];
documents.push(document.getElementById('test1'));
documents.push(document.getElementById('test2'));
documents.push(document.getElementById('test3'));
translate.setDocuments(documents); //指定要翻譯的元素的集合,可傳入一個(gè)或多個(gè)元素。如果不設(shè)置，默認(rèn)翻譯整個(gè)網(wǎng)頁
可使用 translate.setDocuments(...) 指定要翻譯的元素的集合,可傳入一個(gè)或多個(gè)元素。如果不設(shè)置此，默認(rèn)翻譯整個(gè)網(wǎng)頁。
注意，這行要放到 translate.execute(); 上面
js主動(dòng)切換語言
比如點(diǎn)擊某個(gè)鏈接顯示英文界面
<a href="javascript:translate.changeLanguage('english');" class="ignore">切換為英語</a>只需傳入翻譯的目標(biāo)語言，即可快速切換到指定語種。具體有哪些語言，可查閱： http://api.translate.zvo.cn/doc/language.json.html
其中 class="ignore" 加了這個(gè)class，代表這個(gè)a標(biāo)簽將不會被翻譯
自動(dòng)根據(jù)用戶所在的國家切換其語種
用戶第一次打開網(wǎng)頁時(shí)，自動(dòng)判斷當(dāng)前用戶所在國家使用的是哪種語言，來自動(dòng)進(jìn)行切換為用戶所在國家的語種。
如果用戶手動(dòng)切換了別的語種，再使用時(shí)，那就優(yōu)先以用戶所選擇的為主，這個(gè)就不管用了。
translate.setAutoDiscriminateLocalLanguage(); //設(shè)置用戶第一次用時(shí)，自動(dòng)識別其所在國家的語種進(jìn)行切換
設(shè)置本地語種（當(dāng)前網(wǎng)頁的語種）
translate.language.setLocal('chinese_simplified'); //設(shè)置本地語種（當(dāng)前網(wǎng)頁的語種）。如果不設(shè)置，默認(rèn)就是 chinese_simplified 簡體中文當(dāng)前支持的本地語種有：
注意，這行要放到 translate.execute(); 上面
對頁面動(dòng)態(tài)渲染的文本進(jìn)行自動(dòng)翻譯
正常情況下，極大可能會有這種需求：
頁面中需要通過ajax請求后端服務(wù)器獲取數(shù)據(jù)，然后再將數(shù)據(jù)渲染展示出來。
頁面中的彈出提示 （就比如 msg.js 的 msg.info('你好'); ） 這個(gè)提示是js加載出來的，提示文字也需要一并進(jìn)行翻譯的情況 您可加入下面一行代碼，來實(shí)現(xiàn)以上需求。
translate.listener.start(); //開啟html頁面變化的監(jiān)控，對變化部分會進(jìn)行自動(dòng)翻譯。注意，這里變化區(qū)域，是指使用 translate.setDocuments(...) 設(shè)置的區(qū)域。如果未設(shè)置，那么為監(jiān)控整個(gè)網(wǎng)頁的變化
建議放在 translate.execute() 這行之前。
注意事項(xiàng)
如果你手動(dòng)設(shè)置了 translate.setDocuments(...) ，那么監(jiān)聽的就不是整個(gè)頁面了，而是單純只監(jiān)聽 setDocuments(...) 所設(shè)置的區(qū)域的改動(dòng)。
私有化部署翻譯服務(wù)接口
在某些政府機(jī)關(guān)及大集團(tuán)內(nèi)部項(xiàng)目中，對數(shù)據(jù)隱私及安全保密有強(qiáng)要求場景、以及您對自有客戶希望提供高可靠翻譯服務(wù)場景時(shí)，您可將翻譯服務(wù)接口進(jìn)行私有化部署，不走我們公開開放的翻譯接口，以做到安全保密及后端服務(wù)全部自行掌控。
實(shí)際部署方式，可參考：translate.service
部署好后，在 translate.execute(); 之前，加入一行代碼，如下所示：
translate.request.api.host='http://121.121.121.121/'; //將這里面的ip地址換成你服務(wù)器的ip，注意開頭，及結(jié)尾還有個(gè) / 別拉下translate.execute();
如此，翻譯請求接口就會走您自己服務(wù)器了。
翻譯完后自動(dòng)執(zhí)行
當(dāng)翻譯完成后會自動(dòng)觸發(fā)執(zhí)行某個(gè)方法，以便您來做自定義擴(kuò)展。比如 layui的翻譯組件 便是使用了此能力在翻譯完成后重新繪制 select 選中項(xiàng)。
translate.listener.renderTaskFinish = function(task){
console.log('執(zhí)行完一次');
}
進(jìn)行翻譯時(shí)每當(dāng)執(zhí)行完一次渲染任務(wù)（翻譯）時(shí)會觸發(fā)此。注意頁面一次翻譯會觸發(fā)多個(gè)渲染任務(wù)。普通情況下，一次頁面的翻譯可能會觸發(fā)兩三次渲染任務(wù)。（因?yàn)橐粋€(gè)網(wǎng)頁上可能有多種語言，每種語言都是一次翻譯任務(wù)。）
另外如果頁面中有ajax交互方面的信息時(shí)，每次ajax信息刷新后，也會進(jìn)行翻譯，也是一次翻譯任務(wù)。
當(dāng)然，這里的翻譯任務(wù)是確實(shí)有進(jìn)行了翻譯的前提下，執(zhí)行完才會觸發(fā)此。
自定義翻譯術(shù)語
如果你感覺某些翻譯不準(zhǔn)確，可進(jìn)行針對性的定義某些詞的翻譯結(jié)果，進(jìn)行自定義術(shù)語庫。使用的方法為：
translate.nomenclature.append(from, to, properties);
傳入?yún)?shù)解釋：
from 要轉(zhuǎn)換的語種，傳入如 chinese_simplified
to 翻譯至的目標(biāo)語種，傳入如 english
properties 配置表，格式便是properties的格式，每行一個(gè)規(guī)則，每個(gè)前后用等號分割，等號前是要翻譯的詞或句子，等號后是自定義的翻譯結(jié)果。傳入如:
比如，要自定義 “網(wǎng)市場云建站系統(tǒng)” 、 “國際化” 這兩個(gè)詞有簡體中文翻譯為英文的結(jié)果，可以這么寫：
translate.nomenclature.append('chinese_simplified','english',`網(wǎng)市場云建站系統(tǒng)=wangmarket CMS國際化=GuoJiHua`);這個(gè)自定義術(shù)語庫的可以單獨(dú)用一個(gè)js文件來定義，如此定義一次，在類似的項(xiàng)目中有使用，可直接將之前定義的js術(shù)語庫文件復(fù)制來引入即可方便使用。
當(dāng)前正在優(yōu)化中，如果原語種是中文、韓文還可以，像是英語結(jié)果會不準(zhǔn)，如果您項(xiàng)目中用到了，發(fā)現(xiàn)異常時(shí)，可聯(lián)系我，免費(fèi)幫您調(diào)試好的同時(shí)還能完善本項(xiàng)目。
注意，這行要放到 translate.execute(); 上面
示例
這里給出一個(gè)示例用于參考，鏈接地址： https://res.zvo.cn/translate/doc/demo_nomenclature.html
您可打開后查看頁面源代碼，即可看到它是如何設(shè)置的。
實(shí)際使用場景示例
普通網(wǎng)站中點(diǎn)擊某個(gè)語言進(jìn)行切換
如下圖所示，網(wǎng)站中的某個(gè)位置要有幾種語言切換
直接在其html代碼末尾的位置加入以下代碼：
<!-- 增加某種語言切換的按鈕。注意 ul上加了一個(gè) class="ignore" 代表這塊代碼不會被翻譯到 -->
<ul class="ignore">
<li><a href="javascript:translate.changeLanguage('english');">English</a></li>|
<li><a href="javascript:translate.changeLanguage('chinese_simplified');">簡體中文</a></li>|
<li><a href="javascript:translate.changeLanguage('chinese_traditional');">繁體中文</a></li>
</ul>
<!-- 引入多語言切換的js -->
<script src="https://res.zvo.cn/translate/translate.js"></script>
<script>
translate.setUseVersion2(); //設(shè)置使用v2.x 版本
translate.selectLanguageTag.show = false; //不出現(xiàn)的select的選擇語言
translate.execute();
</script>
參與
您可直接 fork 本項(xiàng)目，注意，是github倉庫 https://github.com/xnx3/translate ，非 gitee 的倉庫
如果您改動(dòng)了哪些代碼，請?jiān)谄渲袀渥⑸献约旱男彰⒁约白约旱膫€(gè)人主頁，是您參與付出的留名。比如，陳某人參與了日語翻譯的字符判斷，那可以這樣：
/* 是否包含日語，返回true:包含 參與完善者：陳某人 https://www.chenmouren.com/xxxxx.html*/japanese:function(str){ if(/.*[\u0800-\u4e00]+.*$/.test(str)){ return true } else { return false; }},版本
注意，v1.x 跟 v2.x 使用上略有差別，可使用 console.log(translate.version); 查看當(dāng)前使用的版本。
另外 v1.x 版本的相關(guān)說明參見： 使用說明 | 在線demo
v1.0
2022.2月發(fā)布，提供多語言支持能力，使網(wǎng)頁無需改動(dòng)快速具備多語言切換能力。
v2.0
2022.12月發(fā)布，增加更多的擴(kuò)展方法。
可自定義忽略的Tag標(biāo)簽，進(jìn)行翻譯時(shí)會忽略之
可自定義忽略的class，進(jìn)行翻譯時(shí)會忽略之
默認(rèn)內(nèi)置 class="ignore" 為忽略的class，可在某個(gè)標(biāo)簽上增加此屬性，即可使其跳過不進(jìn)行翻譯。
增加緩存機(jī)制，翻譯一次后會將結(jié)果進(jìn)行緩存，翻譯過后，再查看，會達(dá)到秒翻譯的結(jié)果，極大提高體驗(yàn)度。
增加局部翻譯的能力，可支持自定義翻譯的區(qū)域。
優(yōu)化 input 輸入框的 placeholder 的內(nèi)容不翻譯的問題
優(yōu)化本地使用（file協(xié)議）時(shí)無法測試的問題。現(xiàn)在本地也能正常使用及測試了。
修復(fù)翻譯時(shí)會莫名其妙多了無數(shù)層font標(biāo)簽的問題
修復(fù)翻譯時(shí)，像是中文翻譯為韓語，鼠標(biāo)多經(jīng)過幾次會將其翻譯的韓語重復(fù)翻譯導(dǎo)致翻譯結(jié)果不準(zhǔn)確的問題。
開放翻譯云服務(wù)平臺接口 http://api.translate.zvo.cn/doc/index.html
v2.1
本地語種時(shí)默認(rèn)賦予使用v2版本翻譯
增加 translate.language.connector() 對句子的連接符單獨(dú)進(jìn)行適配
增加如果是被 <!-- --> 注釋的區(qū)域，不進(jìn)行翻譯
增加英文 README 文檔
增加對圖片alt、meta關(guān)鍵詞及描述的翻譯
優(yōu)化判斷本地語種跟要翻譯的目標(biāo)語種是否一樣，如果是一樣，那就不需要進(jìn)行任何翻譯
增加 translate.listener.start() 可對當(dāng)前頁面變化的區(qū)域進(jìn)行自動(dòng)翻譯，比如ajax加載數(shù)據(jù)后進(jìn)行渲染
translate.execute(...) 增加可傳入翻譯區(qū)域，傳入的區(qū)域只是單純做一次性翻譯，不會影響 setDocuments(...) 的值
加入任務(wù)隊(duì)列機(jī)制，徹底解決翻譯時(shí)非常小概率有文字遺漏不翻譯的問題。
增加 translate.setAutoDiscriminateLocalLanguage(); 用戶第一次用時(shí)，可自動(dòng)識別其所在國家的語種進(jìn)行切換
v2.2
開放后端翻譯服務(wù)接口的私有化一鍵部署，并開源。
大幅優(yōu)化句子翻譯的準(zhǔn)確性，達(dá)到百度翻譯、谷歌翻譯的程度
增加可配置對某個(gè)元素指定id忽略其不進(jìn)行翻譯
增加單獨(dú)針對連接符識別判斷，以提高翻譯準(zhǔn)確度
增加可針對 translate.request.api.host 單獨(dú)配置，以私有化部署
增加 inspector_v2.js ，用于v2版本的快速轉(zhuǎn)換體驗(yàn)，并將readme中的快速體驗(yàn)?zāi)J(rèn)便是使用此v2版本。
增加 translate.language.autoRecognitionLocalLanguage(); 如果未手動(dòng)設(shè)置當(dāng)前網(wǎng)頁的語種，會自動(dòng)識別語種
增加 translate.language.getLocal() 用戶獲取當(dāng)前網(wǎng)頁的語種（如果未設(shè)置，自動(dòng)根據(jù)網(wǎng)頁當(dāng)前顯示的文字進(jìn)行識別語種）
增加 translate.selectLanguageTag.selectOnChange 用于提供重寫select onchange 事件，以便更好擴(kuò)展
優(yōu)化中英文混合時(shí)翻譯的一些意外問題
優(yōu)化meta - keywords 替換的問題
優(yōu)化轉(zhuǎn)英文時(shí)如果英文有'，比如 let's 這種的情況
優(yōu)化 ignore 對忽略class name有多情況下的判斷
開放后端翻譯服務(wù)接口文檔，以便更好自有擴(kuò)展及使用
修復(fù)tag有時(shí)失效的問題，比如監(jiān)聽狀態(tài)下局部翻譯情況
v2.3
增加 translate.nomenclature 用于自定義術(shù)語支持
增加 translate.listener.renderTaskFinish(renderTask); 以便更好的擴(kuò)展
增加 translate.language.wordBlankConnector() 適配語言是否需要空格作為連詞符，增加十余種語言的適配
增加 translate.element.getNodeName 以供全局使用
增加vue、uniapp中使用的說明
增加 translate.element.nodeAnalyse 用于元素分析及渲染
增加對 input 標(biāo)簽的 type=button 類型的支持
增加對 input 標(biāo)簽的 type="submit" 類型的支持
增加 a 標(biāo)簽 title 屬性的翻譯適配
優(yōu)化忽略類、tag、id等的判斷，使之更精準(zhǔn)
針對v2.0增加 translate.selectLanguageTag.languages 的設(shè)置
優(yōu)化，當(dāng)前語種在未翻譯時(shí)，切換其他語種，不重新加載當(dāng)前頁面
修改 nodeQueue 第五維增加 translateText
優(yōu)化英文轉(zhuǎn)其他語種時(shí)自定義術(shù)語異常的問題
優(yōu)化忽略翻譯的標(biāo)簽，增加 textarea
針對新潮傳媒反饋的某些頁面無法使用問題增加相關(guān)判斷進(jìn)行容錯(cuò)，避免阻塞整體運(yùn)行。
將默認(rèn)的忽略tag標(biāo)簽中的img標(biāo)簽去除。也對img的alt進(jìn)行翻譯
對翻譯隊(duì)列進(jìn)行排序,將原字符串長的放前面，避免造成有部分不翻譯的情況（bug是先翻譯了短的，導(dǎo)致長的被打斷而無法進(jìn)行適配）
修復(fù)如果一個(gè)句子中有多個(gè)被特殊字符間隔的漢字時(shí)，會導(dǎo)致漏掉末尾一些漢字不翻譯的問題
該文章在 2023/7/6 10:01:31 編輯過
400 186 1886
