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协议）时无法测试的问题。现在本地也能正常使用及测试了。

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. 修复如果一个句子中有多个被特殊字符间隔的汉字时，会导致漏掉末尾一些汉字不翻译的问题