目前流行的翻译模式有:
浏览器自带翻译,网站内部翻译,插件翻译。
在大部分浏览器自带翻译,插件翻译都不能做到专业化的翻译。
用translation.js实现的也是属于机器翻译。
做到自定义翻译有以下两个思路。
准备文件:自定义翻译的json对照数据。
思路一:节点遍历,通过以下函数实现: 将body下的文本节点中的searchWord, 替换为replaceWord,遍历json数据执行函数即可。
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,遍历执行即可。
document.body.innerHTML = document.body.innerHTML.replace(/searchWord/g, "replaceWord");
思路一较长但对界面的影响较小,思路二简洁方便,但是影响可能存在不少。
这里指的影响是:交互过程中的事件的解除和绑定。
代码植入到界面方式:控制台,油猴,或者各大插件均可,注意网页节点生成时间。