translate.js

兩行js實現(xiàn)html全自動翻譯。
無需改動頁面、無語言配置文件、無API Key、對SEO友好！

特性

• 使用極其簡單。 無需任何前期準(zhǔn)備，直接加入幾行代碼即可擁有多種語言全自動切換能力。

• 不增加工作量。 無需另行改造頁面本身，也沒有各種語言都要單獨配置的語言文件，更不需要你對頁面本身要顯示的文字區(qū)域進行代碼調(diào)用，我認(rèn)為那樣對技術(shù)人員實在是太不友好了。而且它也不需要你到某某網(wǎng)站申請什么key，它本身就是開放的，拿來即用。

• 極其靈活擴展。 您可指定它只翻譯某些指定區(qū)域、切換語言時顯示下拉框還是通過擺放多個切換語言按鈕進行、可指定某些特定的元素不進行翻譯忽略……

• 自動匹配語種。 自動根據(jù)用戶所在的國家切換其國家所使用的語種

• 瞬間翻譯能力。 內(nèi)置緩存預(yù)加載機制，只要翻譯過的網(wǎng)頁，再次看時會達到瞬間翻譯的效果，給用戶的感覺就是，這個頁面本來就是這種語言的，而不是經(jīng)過第三方翻譯的。

• 永久免費使用。 采用Apache-2.0開源協(xié)議，您可永久免費使用。

• 搜索引擎友好。 完全不影響你本身網(wǎng)站搜索引擎的收錄。爬蟲所爬取的網(wǎng)頁源代碼，它不會對其進行任何改動，你可完全放心。

• 后端翻譯開源。 在某些政府機關(guān)及大集團內(nèi)部項目中，對數(shù)據(jù)隱私及安全保密有強要求場景、或您對自有客戶希望提供自建高可靠翻譯服務(wù)場景時，您可將后端翻譯接口進行私有化部署，不走我們公開開放的翻譯接口，以做到安全保密及后端服務(wù)全部自行掌控。

在線體驗

http://res.zvo.cn/translate/demo.html

先拿別人的網(wǎng)站動手試試

1. 隨便打開一個網(wǎng)頁

2. 右鍵 - 審查元素

3. 粘貼入以下代碼：

1. Enter 回車鍵 ， 執(zhí)行

2. 在當(dāng)前網(wǎng)頁的左上角，就出現(xiàn)了一個大大的切換語言，切換試試看。

快速使用

在網(wǎng)頁最末尾， </html> 之前，加入以下代碼，一般在頁面的最底部就出現(xiàn)了選擇語言的 select 切換標(biāo)簽。 其實就這么簡單：

更多擴展用法

指定切換語言的select選擇框的位置

你想在你頁面什么地方顯示，就吧下面這個放到哪即可。

<div id="translate"></div>

主要是這個 id="translate" 切換語言的按鈕會自動賦予這個id里面。當(dāng)然你也不一定非要是div的，也可以這樣

<span id="translate"></span>

CSS美化切換語言按鈕

可使用css來控制切換語言選擇的顯示位置及美觀。如：

<style>
.translateselectLanguage{
	position: absolute;
	top:100px;
	right:100px;
}
</style>

這就是控制切換語言的 <select> 標(biāo)簽

設(shè)定是否自動出現(xiàn) select 切換語言

使用場景是，如果使用了:

<a href="javascript:translate.changeLanguage('en');">切換為英語</a>

這種切換方式，那么 select下拉選擇的就用不到了，就可以用此方式來不顯示。
當(dāng)然你也可以使用css的方式來控制其不顯示。比如：

<style>#translate{	display:none;}</style>

自定義出現(xiàn)的 select 切換語言所支持的語種

每個語種之間用英文,分割。比如這里設(shè)置的是支持英語、簡體中文、韓語 的切換。根據(jù)后端翻譯服務(wù)不同，支持的語言也不同。

具體支持哪些，可通過 http://api.translate.zvo.cn/doc/language.json.html 獲取 （如果您私有部署的，將請求域名換為您自己私有部署的域名）
注意，這行要放到 translate.execute(); 上面

翻譯時忽略指定的tag標(biāo)簽

translate.ignore.tag.push('span'); //翻譯時追加上自己想忽略不進行翻譯的tag標(biāo)簽，凡是在這里面的，都不進行翻譯。

翻譯時追加上自己想忽略不進行翻譯的tag標(biāo)簽，凡是在這里面的，都不進行翻譯。
如果你想查看當(dāng)前忽略哪些tag標(biāo)簽，可直接執(zhí)行 console.log(translate.ignore.tag); 進行查看 注意，這行要放到 translate.execute(); 上面

翻譯時忽略指定的class值

translate.ignore.class.push('test');	//翻譯時追加上自己想忽略不進行翻譯的class name的值，凡是在這里面的，都不進行翻譯。

翻譯時追加上自己想忽略不進行翻譯的class標(biāo)簽，凡是在這里面的，都不進行翻譯。
如果你想查看當(dāng)前忽略哪些class，可直接執(zhí)行 console.log(translate.ignore.class); 進行查看
注意，這行要放到 translate.execute(); 上面

翻譯時忽略指定的id值

translate.ignore.id.push('test');	//翻譯時追加上自己想忽略不進行翻譯的id的值，凡是在這里面的，都不進行翻譯。

翻譯時追加上自己想忽略不進行翻譯的id的值，凡是在這里面的，都不進行翻譯。
如果你想查看當(dāng)前忽略哪些id，可直接執(zhí)行 console.log(translate.ignore.id); 進行查看
注意，這行要放到 translate.execute(); 上面

翻譯指定的區(qū)域

可使用 translate.setDocuments(...) 指定要翻譯的元素的集合,可傳入一個或多個元素。如果不設(shè)置此，默認(rèn)翻譯整個網(wǎng)頁。
注意，這行要放到 translate.execute(); 上面

js主動切換語言

比如點擊某個鏈接顯示英文界面

<a href="javascript:translate.changeLanguage('english');" class="ignore">切換為英語</a>

只需傳入翻譯的目標(biāo)語言，即可快速切換到指定語種。具體有哪些語言，可查閱： http://api.translate.zvo.cn/doc/language.json.html
其中 class="ignore" 加了這個class，代表這個a標(biāo)簽將不會被翻譯

自動根據(jù)用戶所在的國家切換其語種

用戶第一次打開網(wǎng)頁時，自動判斷當(dāng)前用戶所在國家使用的是哪種語言，來自動進行切換為用戶所在國家的語種。
如果用戶手動切換了別的語種，再使用時，那就優(yōu)先以用戶所選擇的為主，這個就不管用了。

translate.setAutoDiscriminateLocalLanguage();	//設(shè)置用戶第一次用時，自動識別其所在國家的語種進行切換

設(shè)置本地語種（當(dāng)前網(wǎng)頁的語種）

translate.language.setLocal('chinese_simplified'); //設(shè)置本地語種（當(dāng)前網(wǎng)頁的語種）。如果不設(shè)置，默認(rèn)就是 chinese_simplified 簡體中文

當(dāng)前支持的本地語種有：

• chinese_simplified 簡體中文

• chinese_traditional 繁體中文

• english 英語
  如果不設(shè)置，默認(rèn)會自動識別當(dāng)前網(wǎng)頁的文本，取當(dāng)前網(wǎng)頁文本中，出現(xiàn)頻率最高的語種為默認(rèn)語種。
  這個會在出現(xiàn) select 選擇語言時，默認(rèn)選中的語種。

注意，這行要放到 translate.execute(); 上面

對頁面動態(tài)渲染的文本進行自動翻譯

正常情況下，極大可能會有這種需求：

1. 頁面中需要通過ajax請求后端服務(wù)器獲取數(shù)據(jù)，然后再將數(shù)據(jù)渲染展示出來。

2. 頁面中的彈出提示 （就比如 msg.js 的 msg.info('你好'); ） 這個提示是js加載出來的，提示文字也需要一并進行翻譯的情況 您可加入下面一行代碼，來實現(xiàn)以上需求。

translate.listener.start();	//開啟html頁面變化的監(jiān)控，對變化部分會進行自動翻譯。注意，這里變化區(qū)域，是指使用 translate.setDocuments(...) 設(shè)置的區(qū)域。如果未設(shè)置，那么為監(jiān)控整個網(wǎng)頁的變化

建議放在 translate.execute() 這行之前。

注意事項

如果你手動設(shè)置了 translate.setDocuments(...) ，那么監(jiān)聽的就不是整個頁面了，而是單純只監(jiān)聽 setDocuments(...) 所設(shè)置的區(qū)域的改動。

私有化部署翻譯服務(wù)接口

在某些政府機關(guān)及大集團內(nèi)部項目中，對數(shù)據(jù)隱私及安全保密有強要求場景、以及您對自有客戶希望提供高可靠翻譯服務(wù)場景時，您可將翻譯服務(wù)接口進行私有化部署，不走我們公開開放的翻譯接口，以做到安全保密及后端服務(wù)全部自行掌控。
實際部署方式，可參考：translate.service
部署好后，在 translate.execute(); 之前，加入一行代碼，如下所示：

translate.request.api.host='http://121.121.121.121/'; //將這里面的ip地址換成你服務(wù)器的ip，注意開頭，及結(jié)尾還有個 / 別拉下translate.execute();

如此，翻譯請求接口就會走您自己服務(wù)器了。

翻譯完后自動執(zhí)行

當(dāng)翻譯完成后會自動觸發(fā)執(zhí)行某個方法，以便您來做自定義擴展。比如 layui的翻譯組件 便是使用了此能力在翻譯完成后重新繪制 select 選中項。

translate.listener.renderTaskFinish = function(task){
	console.log('執(zhí)行完一次');
}

進行翻譯時每當(dāng)執(zhí)行完一次渲染任務(wù)（翻譯）時會觸發(fā)此。注意頁面一次翻譯會觸發(fā)多個渲染任務(wù)。普通情況下，一次頁面的翻譯可能會觸發(fā)兩三次渲染任務(wù)。（因為一個網(wǎng)頁上可能有多種語言，每種語言都是一次翻譯任務(wù)。）
另外如果頁面中有ajax交互方面的信息時，每次ajax信息刷新后，也會進行翻譯，也是一次翻譯任務(wù)。
當(dāng)然，這里的翻譯任務(wù)是確實有進行了翻譯的前提下，執(zhí)行完才會觸發(fā)此。

自定義翻譯術(shù)語

如果你感覺某些翻譯不準(zhǔn)確，可進行針對性的定義某些詞的翻譯結(jié)果，進行自定義術(shù)語庫。使用的方法為：

translate.nomenclature.append(from, to, properties);

傳入?yún)?shù)解釋：

• from 要轉(zhuǎn)換的語種，傳入如 chinese_simplified

• to 翻譯至的目標(biāo)語種，傳入如 english

• properties 配置表，格式便是properties的格式，每行一個規(guī)則，每個前后用等號分割，等號前是要翻譯的詞或句子，等號后是自定義的翻譯結(jié)果。傳入如:

你好=Hello世界=ShiJie	

比如，要自定義 “網(wǎng)市場云建站系統(tǒng)” 、 “國際化” 這兩個詞有簡體中文翻譯為英文的結(jié)果，可以這么寫：

translate.nomenclature.append('chinese_simplified','english',`網(wǎng)市場云建站系統(tǒng)=wangmarket CMS國際化=GuoJiHua`);

這個自定義術(shù)語庫的可以單獨用一個js文件來定義，如此定義一次，在類似的項目中有使用，可直接將之前定義的js術(shù)語庫文件復(fù)制來引入即可方便使用。
當(dāng)前正在優(yōu)化中，如果原語種是中文、韓文還可以，像是英語結(jié)果會不準(zhǔn)，如果您項目中用到了，發(fā)現(xiàn)異常時，可聯(lián)系我，免費幫您調(diào)試好的同時還能完善本項目。
注意，這行要放到 translate.execute(); 上面

示例

這里給出一個示例用于參考，鏈接地址： https://res.zvo.cn/translate/doc/demo_nomenclature.html
您可打開后查看頁面源代碼，即可看到它是如何設(shè)置的。

實際使用場景示例

普通網(wǎng)站中點擊某個語言進行切換

如下圖所示，網(wǎng)站中的某個位置要有幾種語言切換

直接在其html代碼末尾的位置加入以下代碼：

參與

您可直接 fork 本項目，注意，是github倉庫 https://github.com/xnx3/translate ，非 gitee 的倉庫
如果您改動了哪些代碼，請在其中備注上自己的姓名、以及自己的個人主頁，是您參與付出的留名。比如，陳某人參與了日語翻譯的字符判斷，那可以這樣：

/*	是否包含日語，返回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)頁無需改動快速具備多語言切換能力。

v2.0

2022.12月發(fā)布，增加更多的擴展方法。

1. 可自定義忽略的Tag標(biāo)簽，進行翻譯時會忽略之

2. 可自定義忽略的class，進行翻譯時會忽略之

3. 默認(rèn)內(nèi)置 class="ignore" 為忽略的class，可在某個標(biāo)簽上增加此屬性，即可使其跳過不進行翻譯。

4. 增加緩存機制，翻譯一次后會將結(jié)果進行緩存，翻譯過后，再查看，會達到秒翻譯的結(jié)果，極大提高體驗度。

5. 增加局部翻譯的能力，可支持自定義翻譯的區(qū)域。

6. 優(yōu)化 input 輸入框的 placeholder 的內(nèi)容不翻譯的問題

7. 優(yōu)化本地使用（file協(xié)議）時無法測試的問題。現(xiàn)在本地也能正常使用及測試了。

8. 修復(fù)翻譯時會莫名其妙多了無數(shù)層font標(biāo)簽的問題

9. 修復(fù)翻譯時，像是中文翻譯為韓語，鼠標(biāo)多經(jīng)過幾次會將其翻譯的韓語重復(fù)翻譯導(dǎo)致翻譯結(jié)果不準(zhǔn)確的問題。

10. 開放翻譯云服務(wù)平臺接口 http://api.translate.zvo.cn/doc/index.html

v2.1

1. 本地語種時默認(rèn)賦予使用v2版本翻譯

2. 增加 translate.language.connector() 對句子的連接符單獨進行適配

3. 增加如果是被 <!-- --> 注釋的區(qū)域，不進行翻譯

4. 增加英文 README 文檔

5. 增加對圖片alt、meta關(guān)鍵詞及描述的翻譯

6. 優(yōu)化判斷本地語種跟要翻譯的目標(biāo)語種是否一樣，如果是一樣，那就不需要進行任何翻譯

7. 增加 translate.listener.start() 可對當(dāng)前頁面變化的區(qū)域進行自動翻譯，比如ajax加載數(shù)據(jù)后進行渲染

8. translate.execute(...) 增加可傳入翻譯區(qū)域，傳入的區(qū)域只是單純做一次性翻譯，不會影響 setDocuments(...) 的值

9. 加入任務(wù)隊列機制，徹底解決翻譯時非常小概率有文字遺漏不翻譯的問題。

10. 增加 translate.setAutoDiscriminateLocalLanguage(); 用戶第一次用時，可自動識別其所在國家的語種進行切換

v2.2

1. 開放后端翻譯服務(wù)接口的私有化一鍵部署，并開源。

2. 大幅優(yōu)化句子翻譯的準(zhǔn)確性，達到百度翻譯、谷歌翻譯的程度

3. 增加可配置對某個元素指定id忽略其不進行翻譯

4. 增加單獨針對連接符識別判斷，以提高翻譯準(zhǔn)確度

5. 增加可針對 translate.request.api.host 單獨配置，以私有化部署

6. 增加 inspector_v2.js ，用于v2版本的快速轉(zhuǎn)換體驗，并將readme中的快速體驗?zāi)J(rèn)便是使用此v2版本。

7. 增加 translate.language.autoRecognitionLocalLanguage(); 如果未手動設(shè)置當(dāng)前網(wǎng)頁的語種，會自動識別語種

8. 增加 translate.language.getLocal() 用戶獲取當(dāng)前網(wǎng)頁的語種（如果未設(shè)置，自動根據(jù)網(wǎng)頁當(dāng)前顯示的文字進行識別語種）

9. 增加 translate.selectLanguageTag.selectOnChange 用于提供重寫select onchange 事件，以便更好擴展

10. 優(yōu)化中英文混合時翻譯的一些意外問題

11. 優(yōu)化meta - keywords 替換的問題

12. 優(yōu)化轉(zhuǎn)英文時如果英文有'，比如 let's 這種的情況

13. 優(yōu)化 ignore 對忽略class name有多情況下的判斷

14. 開放后端翻譯服務(wù)接口文檔，以便更好自有擴展及使用

15. 修復(fù)tag有時失效的問題，比如監(jiān)聽狀態(tài)下局部翻譯情況

v2.3

1. 增加 translate.nomenclature 用于自定義術(shù)語支持

2. 增加 translate.listener.renderTaskFinish(renderTask); 以便更好的擴展

3. 增加 translate.language.wordBlankConnector() 適配語言是否需要空格作為連詞符，增加十余種語言的適配

4. 增加 translate.element.getNodeName 以供全局使用

5. 增加vue、uniapp中使用的說明

6. 增加 translate.element.nodeAnalyse 用于元素分析及渲染

7. 增加對 input 標(biāo)簽的 type=button 類型的支持

8. 增加對 input 標(biāo)簽的 type="submit" 類型的支持

9. 增加 a 標(biāo)簽 title 屬性的翻譯適配

10. 優(yōu)化忽略類、tag、id等的判斷，使之更精準(zhǔn)

11. 針對v2.0增加 translate.selectLanguageTag.languages 的設(shè)置

12. 優(yōu)化，當(dāng)前語種在未翻譯時，切換其他語種，不重新加載當(dāng)前頁面

13. 修改 nodeQueue 第五維增加 translateText

14. 優(yōu)化英文轉(zhuǎn)其他語種時自定義術(shù)語異常的問題

15. 優(yōu)化忽略翻譯的標(biāo)簽，增加 textarea

16. 針對新潮傳媒反饋的某些頁面無法使用問題增加相關(guān)判斷進行容錯，避免阻塞整體運行。

17. 將默認(rèn)的忽略tag標(biāo)簽中的img標(biāo)簽去除。也對img的alt進行翻譯

18. 對翻譯隊列進行排序,將原字符串長的放前面，避免造成有部分不翻譯的情況（bug是先翻譯了短的，導(dǎo)致長的被打斷而無法進行適配）

19. 修復(fù)如果一個句子中有多個被特殊字符間隔的漢字時，會導(dǎo)致漏掉末尾一些漢字不翻譯的問題