translate.js

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

特性

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

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

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

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

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

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

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

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

在線體驗

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

先拿別人的網站動手試試

1. 隨便打開一個網頁

2. 右鍵 - 審查元素

3. 粘貼入以下代碼：

1. Enter 回車鍵 ， 執行

2. 在當前網頁的左上角，就出現了一個大大的切換語言，切換試試看。

快速使用

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

更多擴展用法

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

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

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

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

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

CSS美化切換語言按鈕

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

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

這就是控制切換語言的 <select> 標簽

設定是否自動出現 select 切換語言

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

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

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

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

自定義出現的 select 切換語言所支持的語種

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

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

翻譯時忽略指定的tag標簽

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

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

翻譯時忽略指定的class值

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

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

翻譯時忽略指定的id值

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

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

翻譯指定的區域

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

js主動切換語言

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

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

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

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

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

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

設置本地語種（當前網頁的語種）

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

當前支持的本地語種有：

• chinese_simplified 簡體中文

• chinese_traditional 繁體中文

• english 英語
  如果不設置，默認會自動識別當前網頁的文本，取當前網頁文本中，出現頻率最高的語種為默認語種。
  這個會在出現 select 選擇語言時，默認選中的語種。

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

對頁面動態渲染的文本進行自動翻譯

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

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

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

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

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

注意事項

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

私有化部署翻譯服務接口

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

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

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

翻譯完后自動執行

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

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

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

自定義翻譯術語

如果你感覺某些翻譯不準確，可進行針對性的定義某些詞的翻譯結果，進行自定義術語庫。使用的方法為：

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

傳入參數解釋：

• from 要轉換的語種，傳入如 chinese_simplified

• to 翻譯至的目標語種，傳入如 english

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

你好=Hello世界=ShiJie	

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

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

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

示例

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

實際使用場景示例

普通網站中點擊某個語言進行切換

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

直接在其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); 查看當前使用的版本。
另外 v1.x 版本的相關說明參見： 使用說明 | 在線demo

v1.0

2022.2月發布，提供多語言支持能力，使網頁無需改動快速具備多語言切換能力。

v2.0

2022.12月發布，增加更多的擴展方法。

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

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

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

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

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

6. 優化 input 輸入框的 placeholder 的內容不翻譯的問題

7. 優化本地使用（file協議）時無法測試的問題?，F在本地也能正常使用及測試了。

8. 修復翻譯時會莫名其妙多了無數層font標簽的問題

9. 修復翻譯時，像是中文翻譯為韓語，鼠標多經過幾次會將其翻譯的韓語重復翻譯導致翻譯結果不準確的問題。

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

v2.1

1. 本地語種時默認賦予使用v2版本翻譯

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

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

4. 增加英文 README 文檔

5. 增加對圖片alt、meta關鍵詞及描述的翻譯

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

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

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

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

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

v2.2

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

2. 大幅優化句子翻譯的準確性，達到百度翻譯、谷歌翻譯的程度

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

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

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

6. 增加 inspector_v2.js ，用于v2版本的快速轉換體驗，并將readme中的快速體驗默認便是使用此v2版本。

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

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

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

10. 優化中英文混合時翻譯的一些意外問題

11. 優化meta - keywords 替換的問題

12. 優化轉英文時如果英文有'，比如 let's 這種的情況

13. 優化 ignore 對忽略class name有多情況下的判斷

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

15. 修復tag有時失效的問題，比如監聽狀態下局部翻譯情況

v2.3

1. 增加 translate.nomenclature 用于自定義術語支持

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

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

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

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

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

7. 增加對 input 標簽的 type=button 類型的支持

8. 增加對 input 標簽的 type="submit" 類型的支持

9. 增加 a 標簽 title 屬性的翻譯適配

10. 優化忽略類、tag、id等的判斷，使之更精準

11. 針對v2.0增加 translate.selectLanguageTag.languages 的設置

12. 優化，當前語種在未翻譯時，切換其他語種，不重新加載當前頁面

13. 修改 nodeQueue 第五維增加 translateText

14. 優化英文轉其他語種時自定義術語異常的問題

15. 優化忽略翻譯的標簽，增加 textarea

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

17. 將默認的忽略tag標簽中的img標簽去除。也對img的alt進行翻譯

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

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