js实现页面的自定义翻译

目前流行的翻译模式有：

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

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

用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");

　　

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

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

 

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