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

　　

思路一較長但對界面的影響較小，思路二簡潔方便，但是影響可能存在不少。

這里指的影響是：交互過程中的事件的解除和綁定。

 

代碼植入到界面方式：控制台，油猴，或者各大插件均可，注意網頁節點生成時間。