js实现页面的自定义翻译

目前流行的翻译模式有：

浏览器自带翻译，网站内部翻译，插件翻译。

在大部分浏览器自带翻译，插件翻译都不能做到专业化的翻译。

用translation.js实现的也是属于机器翻译。

做到自定义翻译有以下两个思路。

准备文件：自定义翻译的json对照数据。

思路一：节点遍历，通过以下函数实现: 将body下的文本节点中的searchWord, 替换为replaceWord，遍历json数据执行函数即可。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function replaceBodyText(searchWord, replaceWord){     var reg = new RegExp(searchWord, 'g');     function replaceNode(node){         node.childNodes.forEach(function(v){             if(v.nodeName === 'SCRIPT')                 return; //排除<script>标签             if(!v.hasChildNodes()){                 if(reg.test(v.textContent))                     v.textContent = v.textContent.replace(reg, replaceWord);                 return;             }             replaceNode(v);         });     }     replaceNode(document.body); }

　　

思路二：直接通过获取body内容来重写对照词汇，searchWord替换为replaceWord，遍历执行即可。

?

1	document.body.innerHTML = document.body.innerHTML.replace(/searchWord/g, "replaceWord");

　　

思路一较长但对界面的影响较小，思路二简洁方便，但是影响可能存在不少。

这里指的影响是：交互过程中的事件的解除和绑定。

 

代码植入到界面方式：控制台，油猴，或者各大插件均可，注意网页节点生成时间。